javascript - 如何将数据从内容脚本发送到 Web 可访问资源？

Question

我正在使用内容脚本 ( content_script.js) 将脚本 ( main.js) 注入网页。

清单.json：

{
  "manifest_version": 2,
  "content_scripts": [
    {
     "run_at": "document_end",
     "js": ["content_script.js"]
    }
  ],
  "options_page": "options.html",
  "options_ui": {
    "page": "options.html",
    "open_in_tab": true
  },
  "web_accessible_resources": [
    "main.js"
  ],
  "permissions": ["tabs", "storage"]
}

content_script.js：

var s = document.createElement('script');
s.src = chrome.extension.getURL('main.js');
(document.head||document.documentElement).appendChild(s);
s.onload = function() {
    s.parentNode ? s.parentNode.removeChild(s) : null;
};

我有一些数据存储在chrome.storage.local（在options.js文件中设置），我需要在 Web 可访问资源（main.js在本例中）中读取这些数据。

到目前为止我发现的唯一解决方案是在内容脚本中创建一个自定义事件并在main.js文件中收听它，如下所示

content_script.js：

chrome.storage.local.get(foo, function(result) {
  var event = new CustomEvent("ExtensionOptionsRead", { detail: result });
  window.dispatchEvent(event);
});

主.js：

window.addEventListener("ExtensionOptionsRead", function(event) {
  window.extensionOptions = event.detail
})

但这在我得到的 Firefox 上不起作用Error: Permission denied to access property xyz。

有谁知道将数据从内容脚本发送到 Web 可访问资源的另一种方法？

标签： javascriptgoogle-chrome-extensionfirefox-addon-webextensions

Answer 1

该文件建议我们使用window.postMessage. 它允许我们发送任何可接受的数据JSON.stringify()。 https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#Communicating_with_the_web_page

顺便说一句，我看不到Permission denied这些代码有任何错误：

清单.json：

{
  "name":"foo",
  "version":"1",
  "manifest_version": 2,
  "content_scripts": [
    {
     "run_at": "document_end",
     "js": ["content_script.js"],
     "matches": ["<all_urls>"]
    }
  ],
  "web_accessible_resources": [
    "main.js"
  ],
  "permissions": ["tabs", "storage"]
}

content_script.js：

chrome.storage.local.set({ foo: { property: true } });

var s = document.createElement('script');
s.src = chrome.extension.getURL('main.js');
(document.head||document.documentElement).appendChild(s);
s.onload = function() {
    s.parentNode ? s.parentNode.removeChild(s) : null;

    chrome.storage.local.get({ foo: 0 }, function(result) {
      var event = new CustomEvent("ExtensionOptionsRead", { detail: result });
      window.dispatchEvent(event);
    });
};

主.js：

window.addEventListener("ExtensionOptionsRead", function(event) {
  window.extensionOptions = event.detail
  console.log('window.extensionOptions ', window.extensionOptions);
});

与真实代码有什么区别吗？