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

更新日期: 2022-11-03阅读: 1.4k标签: 插件

出错

配置mv3后,在后台代码background.js使用domPurify发现无法访问window,会一直报错

Uncaught ReferenceError: window is not defined

查看后台,globalThis变成了一个叫ServiceWorkerGlobalScope的玩意


原因

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 pageMV3 - 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<el.attributes.length; i++) {
		str += ' '+el.attributes[i].name+'="'+el.attributes[i].value+'"';
	}
	str += '>';
	for (i=0; i<el.childNodes.length; i++) {
		c = serialize(el.childNodes[i]);
		if (c) str += '\n\t'+c.replace(/\n/g,'\n\t');
	}
	return str + (c?'\n':'') + '</'+name+'>';
}

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])));

链接: https://fly63.com/article/detial/12232

对于前端开发,整理推荐好用的chrome插件或应用

向web前端开发者整理提供的chrome插件或应用:比如Postman、JSON Viewer、Page Ruler 、ChromeADB 等等

使用原生js开发插件的实现方法

作为前端开发,我们都习惯使用一些开源的插件例如jquery工具库,那么如何使用原生js来开发封装一个自己的插件呢?接下来就看一下怎么去开发一个自己的js插件,先上代码

typeahead.js_jquery input 搜索自动补全jQuery插件

jquery.typeahead.js是一款高级的自动补全jQuery插件。该自动补全插件提供超过50个配置选项和回调方法,用于完成自动补全功能,能够完成绝大部分表单自动补全的需求。

js轮播插件_轮播图js代码插件总汇

这篇文章为大家分享图片轮播插件,最全最简单最通用的 幻灯片轮播插件,pc端和移动端都可完美使用,能满足绝大部分网站的轮播需求。js轮播插件包括Swiper、slick、owl carousel2、jssor/slider 、iSlider 等

ios风格的时间选择插件

在上个项目中,客户希望时间选择插件可以是ios风格的那种,但是找了很久,发现并没有用vue的ios风格时间插件,于是自己便自己造了一个轮子.插件依赖于better-scroll和vue

前端最常用的vscode插件集

在前端开发中,使用Visual Studio Code有哪些你常用的插件?推荐几个自己喜欢的,不带链接,自己搜索安装吧。这些都是比较实用、前端必备的插件集

浏览器插件_常用谷歌浏览器插件推荐

常用谷谷歌浏览器确实没有其它国产软件的内置功能丰富。但是 Google 浏览器的的优点恰恰就体现在拥有超简约的界面,以及支持众多强大好用的扩展程序,用户能够按照自己的喜好去个性化定制浏览器。今天我就给大家介绍几款自己常用的插件。

sublime安装插件

安装Sublime text 2插件很方便,可以直接下载安装包解压缩到Packages目录,也可以安装package control组件,然后直接在线安装

BlockUI详细用法_Jquery中ajax加载提示插件blickUI

BlockUI 插件是用于进行AJAX操作时模拟同步传输时锁定浏览器操作。当它被激活时,它会阻止使用者与页面(或页面的一部分)进行交互,直至它被取消。BlockUI以在DOM中添加元素的方法来实现阻止用户与浏览器交互的外观和行为

vue项目中vscode格式化配置和eslint配置冲突

使用vscode开发vue项目的时候,从远端拉下一个新的项目后,安装完依赖后跑起项目时,发现直接报了一堆语法错误:包括换行、空格、单双引号、分号等各种格式问题

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!