无法使用 chrome 扩展后台脚本在 google firestore 中添加数据答案

【问题标题】：Cannot add data in google firestore with chrome extension background script无法使用 chrome 扩展后台脚本在 google firestore 中添加数据
【发布时间】：2019-12-12 11:51:32
【问题描述】：

尝试从 chrome 扩展的 background.js 文件中添加数据时出现此错误

xhrio.js:632 拒绝连接到“https://firestore.googleapis.com/google.firestore.v1.Firestore/Write/channel?database=projects%2Fmind-map-data%2Fdatabases%2F(default)&VER=8&RID=60227&CVER=22&X-HTTP-Session-Id=gsessionid&%24httpHeaders=X-Goog-Api-Client%3Agl-js%2F%20fire%2F7.5.0%0D%0A&zx=i1wtdiez7b36&t=1”，因为它违反了以下内容安全策略指令：“connect-src 'self' wss://*.firebaseio.com”。

连接代码为：

var config = {
    apiKey: "alksdnaksjsdf",
    authDomain: "asdasd.firebaseapp.com",
    databaseURL: "https://miasdlkamsd00sandata.firebaseio.com",
    projectId: "asdkaskd-asdjads",
    storageBucket: "mind-map-data.appspot.com",
    messagingSenderId: "840605340675",
    appId: "1:sadsadwes :web:2b3b13899ee06d9a4dea36",
    measurementId: "G-askdlamsdpo"
};

const app = firebase.initializeApp(config);
const appDb = firebase.firestore();


appDb.collection("mind-map-data").add({
    name: "dummy_map_1",
    timeStamp: (new Date()).getTime(),
    neurons: 3
}).then(() => {
    logConsoleInto(4, "data added successfully");
}).catch((err) => {
    logConsoleInto(4, err);
});

【问题讨论】：

在other questions 上，他们提到扩展程序在从内容脚本执行 XMLHTTPRequest 时应该绕过页面的内容安全策略。也值得一试workaround mentioned here

标签： javascript google-chrome-extension google-cloud-firestore

【解决方案1】：

将此行添加到您的manifest.json：

"content_security_policy": "script-src 'self' https://www.gstatic.com/ https://*.firebaseio.com https://www.googleapis.com; object-src 'self'; connect-src 'self' wss://*.firebaseio.com;"

【讨论】：

我尝试使用此解决方案，但仍然显示错误。

【解决方案2】：

tl;dr：为了提高安全性，Chrome 扩展程序中的内容脚本很快将禁止跨域提取。此类请求可以从扩展后台页面发出，并在需要时转发到内容脚本。

参考：https://www.chromium.org/Home/chromium-security/extension-content-script-fetches

【讨论】：