Error in event handler: ReferenceError: window is not defined chrome extension with manifest v3
Question
I am using manifest version 3 for chrome extension this error I face in background js: Error in event handler: ReferenceError: window is not defined chrome extension with manifest v3
"manifest_version":3, "permissions":["contextMenus","storage", "activeTab","tabs","scripting","webRequest"],
var posLeft = ( window.width - winWidth ) / 2;
3 answers
solution1
0 2021-06-30 12:24:26
ManifestV3 extension uses a service worker so it doesn't have DOM or window . Hopefully, an alternative API will be implemented, please click the star in https://crbug.com/1180610 .
As a workaround you can open minimized a window, read the screen size there, then resize.
Extension page
background service worker:
chrome.windows.create({url: 'hello.html', state: 'minimized'});hello.html:
<head> <script src=hello.js></script>hello.js:
resizeWindow(chrome.windows.WINDOW_ID_CURRENT, 500, 300); function resizeWindow(id, w, h) { chrome.windows.update(id, { left: (screen.availWidth - w) / 2, top: (screen.availHeight - h) / 2, width: w, height: h, state: 'normal', }); }Web page
manifest.json:
{ "content_scripts": [{ "matches": ["*://*.your.web.url/*"], "js": ["content.js"], "run_at": "document_start" }],content.js:
chrome.runtime.sendMessage({ type: 'screenSize', w: screen.availWidth, h: screen.availHeight, }); document.addEventListener('DOMContentLoaded', () => { // process the page here }, {once: true});background service worker:
chrome.windows.create({url: 'https://your.web.url', state: 'minimized'}, wnd => { chrome.runtime.onMessage.addListener(function onMessage(msg, sender) { if (msg.type === 'screenSize' && sender.tab?.id === wnd.tabs[0].id) { chrome.runtime.onMessage.removeListener(onMessage); const width = 500, height = 300; chrome.windows.update(wnd.id, { width, height, left: (msg.w - width) / 2, top: (msg.h - height) / 2, state: 'normal', }); } }) });
solution2
0 2021-08-28 20:20:35
Well for others who may look here for that error message in a similar context, I got the same error when neglecting to make the window object accessible at runtime rather than at the time that the injected function is dynamically being readied for injection into a particular tab by the v3 background script.
In order to get dynamically injected from a v3 background script, the tab specific object (in this case window ) needs to be included inside the function being passed, as in the following anonymous function case:
chrome.scripting.executeScript({
target: { tabId: currentTab.id },
func: () => window.history.back()
});
if window.history.back is provided as the value for func then obviously it will not be known or available to the background script and the same error message will ensue.
This is already described indeed in the docs.
solution3
0 2022-07-27 08:26:22
If you are trying to access window object in background.js as it is a service worker you won't have access to window object, but you may try self as it will have all the properties of window object in background.js try
console.log(self,"self")
var window = window ?? self;
Note: if you are using Vite or Webpack this might work
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.