Ошибка типа: браузер не определен (обмен сообщениями через веб-расширение)

Question

Я пытаюсь связать свой скрипт веб-страницы с моим скриптом контента моего веб-расширения с кодом ниже

Скрипт веб-страницы

const browser = window.browser || window.chrome;
browser.runtime.sendMessage(message,
     function (response) {
          console.log(response);
     }
);

Однако,Я продолжаю получать ошибку TypeError: browser is undefined.То же самое происходит, если я использую chrome.runtime.sendMessage().

Как я должен использовать этот метод?

Answer 1

Проблема здесь в том, что скрипты пользователя / веб-страницы (непривилегированные скрипты) не имеют доступа к JavaScript API в целях безопасности, а browser, chrome являются частью JavaScript API, доступ к которым возможен только через привилегированные скрипты, такие как web фоновые скрипты расширения и скрипты контента (опять же скрипты контента не имеют доступа ко всем API JavaScript). По сути, если вам нужно отправить данные из сценария веб-страницы в фоновый сценарий, CustomEvent следует использовать для отправки данных в сценарий содержимого, который действует как мост, и оттуда отправлять эти данные в фоновый сценарий, используя browser.runtime.sendMessage. Пример кода PFB

window.onload = function(){
    document.dispatchEvent(new CustomEvent("myEvent",{
        detail:["Hello","World"]
    }));
}

contentscript.js

document.addEventListener("myEvent", function (event) {
browser.runtime.sendMessage({
    data: event.detail
});

background.js

browser.runtime.onMessage.addListener(function (message) {
     data = message.data;
     // do stuff
});