2

我正在使用加载页面后出现的自定义弹出窗口制作 chrome 扩展。我想将输入字段中提交的答案保存到我的 firebase 数据库中，这样我就不能将它们包含在另一个网站中。一切正常，但问题是，扩展程序的答案被阻止：

跨域读取阻止 (CORB) 阻止了 MIME 类型文本/纯文本的跨域响应。有关更多详细信息，请参阅。

我怎么解决这个问题？

注意：我不是这方面的专家，所以我非常感谢一个易于遵循的解决方案:)

这些是我的步骤：

我下载了 firebase.js 并将其添加到我的 manifest.json 中：

"matches": ["<all_urls>"],
        "js": [  "Libraries/firebase-app.js",
                "Libraries/firebase-firestore.js",
                "sketch.js"],

我使用内容脚本将 html 注入网页：

<div id="bg-modal">
<div class="modal-content">
  <button class="close">+</button>
    <div class="text"></div>

      <form class="antwortfeld antwortfeld1" action="">
          <textarea type="text" name="antwort" placeholder="Antworten"></textarea>
          <button class="Senden">Senden</button>
      </form>

我在内容脚本中添加了 firebase 应用程序配置并初始化了 firebase

// Your web app's Firebase configuration
var firebaseConfig = {
  apiKey: "...TRZeHhLQ9gMa4V4gy9WSlQ",
  authDomain: "....firebaseapp.com",
  databaseURL: "https://....firebaseio.com",
  projectId: "....",
  storageBucket: "....appspot.com",
  messagingSenderId: "...0021",
  appId: "1:385077100021:.....ba5a776b4bc"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);

const db = firebase.firestore();

然后我也将它添加到内容脚本中，以将输入数据保存到 firebase：

const form1 = document.querySelector('.antwortfeld1');


// saving data
form1.addEventListener('submit', (e) => {
  e.preventDefault();
  db.collection('Antworten').add({
    Antwort1: form1.antwort.value,
  })

  form1.antwort.value = ' ';
})

正如我所说，一切正常，但我被阻止了。我想我必须使用背景脚本来解决这个问题？那会是什么样子？还有其他选择吗？

4

0 回答 0