谷歌浏览器插件MV3报错"Uncaught ReferenceError: window is not defined"

出错

配置mv3后,在后台代码background.js使用DOMPurify发现无法访问window,会一直报错
Uncaught ReferenceError: window is not defined
查看后台,globalThis变成了一个叫ServiceWorkerGlobalScope的玩意

创新互联长期为近1000家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为云梦企业提供专业的成都网站制作、网站设计、外贸网站建设云梦网站改版等技术服务。拥有10余年丰富建站经验和众多成功案例,为您定制开发。

原因

mv3使用了一个叫Service workers的东西替代原来的background页面,不提供dom API,所以不管是window还是document、HTMLElement……都会xx is not defined
chrome官方介绍:

Manifest V3 replaces background pages with service workers.
Like their web page counterparts, extension service workers listen for and respond to events in order to enhance the end user's experience. For web service workers this typically means managing cache, preloading resources, and enabling offline web pages. While extension service workers can still do all of this, the extension package already contains a bundle of resources that can be accessed offline. As such, extension service workers tend to focus on reacting to relevant browser events exposed by Chrome's extensions APIs.

另附mv2和mv3后台页区别对比表:

MV2 - Background page MV3 - Service worker
Can use a persistent page. Terminates when not in use.
Has access to the DOM. Doesn't have access to the DOM.
Can use XMLHttpRequest(). Must use fetch() to make requests.

解决

1. 放弃在后台页直接调用dom API

chrome官方态度还是比较明确的,所以最好不要花太大力气去搞。能用chrome API的全都用chrome API实现,特别是标签和窗口的操作。另外chrome也提供了一些mv2到mv3迁移的建议migrating_to_service_workers

2. 使用undom模拟

undom是比jsdom轻量的Document接口实现,基本满足dom操作的需求,简单易用。
安装

pnpm install --save undom

使用

import undom from 'undom';
let document = undom();

// 简单操作dom
let foo = document.createElement('foo');
foo.appendChild(document.createTextNode('Hello, World!'));
document.body.appendChild(foo);

// 驱动第三方库DOMPurify
const purify = DOMPurify(document);
purify.sanitize(html..)

另外undom本身不支持直接输出HTML,因为它只实现了Document的骨架,不能直接用innerHTML、querySelector等,提供了手动解析的方法

function serialize(el) {
	if (el.nodeType===3) return el.textContent;
	var name = String(el.nodeName).toLowerCase(),
		str = '<'+name,
		c, i;
	for (i=0; i';
}

function enc(s) {
	return s.replace(/[&'"<>]/g, function(a){ return `&#${a};` });
}

// 输出完整html
console.log(serialize(document.childNodes[0]));
// 转义html
console.log(enc(serialize(document.childNodes[0])));

当前题目:谷歌浏览器插件MV3报错&quot;Uncaught ReferenceError: window is not defined&quot;
浏览地址:http://bzwzjz.com/article/dsojicd.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 成都网站设计 成都网站建设 H5网站制作 营销型网站建设 网站制作公司 成都网站建设 定制级高端网站建设 网站设计公司 成都企业网站设计 攀枝花网站设计 宜宾网站设计 营销网站建设 响应式网站设计方案 高端网站设计 手机网站制作 成都网站建设 网站建设方案 温江网站设计 网站建设公司 网站设计制作 手机网站制作设计 成都商城网站建设