[英]Data from Extension to Webpage for Initial Load of the webpage - Firefox
Creating an extension for Chrome
and Firefox
.为
Chrome
和Firefox
创建扩展。 Based on our requirement, we need some of the information(previously stored in storage by extension) from extension to webpage at the time page load.根据我们的要求,我们需要在页面加载时从扩展到网页的一些信息(之前通过扩展存储在存储中)。 Data needed in webpage before any
XHR
request trigger from webpage.在网页触发任何
XHR
请求之前网页中需要的数据。 This is achieved in Chrome
by following code but unable to get the same for Firefox
.这是通过以下代码在
Chrome
中实现的,但对于Firefox
无法获得相同的结果。 Data not received to webpage as similar to Chrome as fast.网页接收到的数据没有像 Chrome 一样快。
Note: Webpage is a react application注意:网页是一个反应应用程序
For Chrome (Working Code)对于 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: {} }); });
For Firefox, implemented the same with window.postmessage
but it is not as fast as chrome, got data in delayed(after xhr request triggered from webpage, need to get before that).对于 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 }, '*'); });
In Firefox there's an even faster method: register a dynamically generated code as a content script that runs at document_start
and then exposes the data to the web page via wrappedJSObject
so the page has direct access to the data synchronously, right at the start.在 Firefox 中,有一种更快的方法: 将动态生成的代码注册为在
document_start
处运行的内容脚本,然后通过wrappedJSObject
将数据公开给 web 页面,这样页面就可以在开始时直接同步访问数据。
background script:背景脚本:
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',
});
}
Your web app then uses window.__extensionData
directly.您的 web 应用程序然后直接使用
window.__extensionData
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.