Как отправить данные из скрипта контента на веб-ресурс?

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), которые мне нужно прочитать внутри доступный через Интернет ресурс (в данном случае main.js).

Единственное решение, которое я нашел до сих пор, - это создать пользовательское событие в скрипте содержимого и прослушать его в файле main.js, например,

content_script. js:

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

main. js:

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

Но это так ' не работает Firefox, когда я получаю Error: Permission denied to access property xyz.

Кто-нибудь знает другой способ отправки данных из скрипта контента на доступный в Интернете ресурс?

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);
    });
};

main. js:

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

Есть ли отличие от реального кода?