Webextension：从外部 url 访问 json 字典，如何？

Question

允许浏览器中的网络扩展程序从远程 url 加载 javascript 是可能的（尽管有风险）使用 manifest.json 文件中的以下指令 - 通过包含一些内容喜欢：

"content_security_policy": "script-src 'self' https://example.com; object-src 'self'"

如文档所述here。

我的问题是如何继续插入远程位于 https://example.com 上的 javascript 源文件？

我在 Firefox 中尝试在扩展代码的顶部添加：

var script_insert='<script src="https://example.com/dict.js"></script>';
document.write( script_insert + '\n' );

其中 dict.js包含：

window.dict_L1C = {
"a" : "hello",
"b" : "world"
}

但失败并显示警告：

Content Security Policy: Ignoring “'unsafe-inline'” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “https:” within script-src: ‘strict-dynamic’ specified

我想我做错了，或者我遗漏了一些重要的东西。

更新： 我现在正在查看提供的解决方案here

Answer 1

这就是我如何在网络扩展中设法从https://www.remote-dictionary.com/dict.json 中读取字典的方法。首先创建包含 permissions 部分的 manifest.js，如下所示：

{
  "manifest_version": 2,
  "name": "mywebextension",
  "version": "1.0",
  "description": "reads a dictionary from a remote website and uses it on another",

 "background": { "scripts": [ "background.js" ] },

  "content_scripts": [ { "matches": ["*://my-insertion-site.com/*"], "js": [  "content.js" ] } ],

  "permissions": [ "storage",  "https://www.remote-dictionary.com/*" ]
}

接下来创建访问远程词典的 background.js 文件，然后将其存储在浏览器本地。

if (typeof chrome !== 'undefined') { browser = chrome}

function fetchDict() {
    let req = new Request( "https://www.remote-dictionary.com/dict.json", {
        method: 'GET',
        headers: { 'Accept': 'application/json' },
        redirect: 'follow',
        referrer: 'client'
    });

    fetch(req).then(function(response) {
        // .json returns another promise
        return response.json();
    }).then(function(data) {
        browser.storage.local.set({data: data}); // set storage for content-script
  }).catch(error => { console.log(error); });
}

fetchDict();

和 content.js 脚本：

if (typeof chrome !== 'undefined') { browser = chrome }

browser.storage.local.get({data: ""},function(data){ // get from local storage 
window.dict=data.data; 
  )
})

// later access the dictionary values:
window.dict[ "my_key"];

Webextension：从外部 url 访问 json 字典，如何？

Webextension: Access json dictionary from external url, How?

content-security-policy

firefox-addon-webextensions

add-on