用于网页初始加载的网页扩展数据 - Firefox

Question

正在为 Chrome 和 Firefox 创建扩展。根据我们的要求，我们需要在页面加载时从扩展到网页的一些信息（以前通过扩展存储在存储中）。在网页中的任何 XHR 请求触发之前，网页中需要的数据。这是在 Chrome 中通过以下代码 实现的，但无法在 Firefox 中获得相同的代码。网页收不到数据，跟Chrome一样快。

注：网页是react应用

对于Chrome（工作代码）

// Code in Webpage
chrome.runtime.sendMessage('extensionId', { messageFromWeb: 'Sample message' }, (response) =>{
    console.log('OnInit Page Details', response);
});

// Code in background.js
chrome.runtime.onMessageExternal.addListener(async function (request, sender, sendResponse) {
    sendResponse({ detail: {} });
});

对于 Firefox， 与 window.postmessage 实现相同，但不如 chrome 快，延迟获取数据（在触发 xhr 请求后网页，需要在那之前得到）。

// Code in Webpage
window.postMessage({ type: 'FROM_WEB_PAGE' }, '*');

window.addEventListener('message', (event) => {
    if (event.data.type && (event.data.type === 'DATA_BACK_FROM_EXTENSION')) {
        console.log('On Init', event.data);
    }
}, false);


// Code in Content-Script
window.addEventListener("message", function(event) {
    if (event.data.type && (event.data.type === "FROM_WEB_PAGE")) {
        chrome.runtime.sendMessage('GetInitialData');
    }
}, false);


// Code in background.js
chrome.runtime.onMessage.addListener(function (response) {
    window.postMessage( { type: 'DATA_BACK_FROM_EXTENSION', detail: response }, '*');
});

Answer 1

在 Firefox 中，有一种更快的方法：通过 wrappedJSObject register a dynamically generated code as a content script that runs at document_start and then exposes the data 到网页，这样页面就可以在开始时直接同步访问数据。

后台脚本：

let dataReg;
async function exposeData(data) {
  dataReg = await browser.contentScripts.register({
    js: [{
      code: `wrappedJSObject.__extensionData =
        cloneInto(${JSON.stringify(data)}, wrappedJSObject)`,
    }],
    matches: ['https://your.web.app/*'],
    runAt: 'document_start',
  });
}

然后您的网络应用会直接使用 window.__extensionData。

用于网页初始加载的网页扩展数据 - Firefox

Data from Extension to Webpage for Initial Load of the webpage - Firefox

javascript

messaging

google-chrome-extension

reactjs

firefox-addon-webextensions