Question

我需要将内容脚本中定义的变量传递给我注入到网页中的脚本。例如，我需要使用在内容脚本中定义的图像，如下所示：

var myImage = browser.extension.getURL("myImage.jpg");

然后我将内容脚本中的一些脚本注入到加载的页面中，如下所示：

var s = document.createElement('script');
s.src = browser.extension.getURL("myscript.js");
document.body.appendChild(s);

如何在脚本“ myscript.js”中访问变量“ myImage”？

Answer 1

您可以使用CustomEvent或window.postMessage 并在myscript.js中收听事件或消息。

window.postmessage示例

window.postMessage({type: 'image-var', params: myImage }, "*");

在myscript.js中

 window.addEventListener('message', function (e) {
        if (e.data.type === 'image-var') {
            console.log(e.data.params);
        }
    });

CustomEvent示例：

document.dispatchEvent(new CustomEvent('yourCustomEvent', { detail: data }));

在myscript.js中

document.addEventListener('yourCustomEvent', function (e) {
  var data = e.detail;
  console.log('received', data);
});

如何在WebExtensions中将变量从内容脚本传递到页面脚本？

1 个答案: