记录Chrome插件从V2版本升级到V3版本的过程中遇到的问题(谷歌浏览器历史记录插件)

推荐整理分享记录Chrome插件从V2版本升级到V3版本的过程中遇到的问题(谷歌浏览器历史记录插件)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:chrome插件查看,chrome插件存放位置,chrome 插件获取浏览记录,chrome浏览器怎么查看历史记录,chrome插件查看,chrome怎么看历史记录,chrome 插件获取浏览记录,chrome 插件获取浏览记录,内容如对您有帮助，希望把文章链接给更多的朋友！

总结一下自己在把Chrome V2版本的插件升级到V3版本的过程中，遇到的一些问题，之前也有发布一章V3版本的manifest.json配置项参数说明，基本也涵盖了下面提到的几个配置项的改动，传送门>>

总结分了两大块，一块是manifest配置文件V2和V3有哪几个配置项不同，一块是升级过程遇到的问题，下面进入正题：

1、browser_action参数：该参数是设置浏览器右侧插件那里展示的插件图标和标题

这里贴一个谷歌翻译的插件截图，插件图标就是前面的Logo，插件标题就是后面的’Google 翻译’，然后当点击红框部分时就会触发上面提到的点击监听事件

2、background参数：背景页配置参数，v3中背景页改为叫做service worker服务者

v2版本后台是叫背景页，上面配置里面添加的js文件都会在背景页里面引入加载进去，v2版本背景页中是可以调用window对象和document对象的(即可以引用jQuery.js之后使用$.ajax去发送请求)

v3版本后台是叫service worker 服务者，上面配置里面只能添加一个js文件，如果还需要引用其它js则只能在那个js文件里面用vue的import引入方式把其它文件引入加载，v3版本的service worker服务者中无法调用window和document对象(即无法引用jQuery.js，也就无法使用$.ajax发送请求了，因为jQuery是基于原生写的，里面有需要用到document对象)，且原生的XMLHttpRequest请求也无法使用，以及vue的axios也是，想要调用请求需要用fetch()去进行请求

3、permissions参数：权限配置参数

4、web_accessible_resources参数：允许外部访问Chrome插件中的资源，比如图片资源

5、内容安全政策参数：V2的value是字符串，V3是对象

1、添加插件到扩展程序时报错安全策略不允许不安全的策略 造成原因：原因就是上面的安全策略参数没有把script-src设为self 解决方案：把script-src值设置为self即可

2、复制v2版本的permissions配置项到v3时，把配置项改名为host_permissions，添加到扩展程序时报错权限清单配置错误 造成原因：因为V3的API权限配置和主机权限配置是两个参数，host_permissions里面不能添加API权限 解决方案：区分出API权限和主机权限的可配置值，把API权限的信息添加到permissions配置项中，host_permissions主机权限只保留白名单域名信息

3、需要在插件中监听某个页面的请求，使用chrome.webRequest.xxx.addListener方法报错无效 造成原因：因为上面第二条的问题原因，当时直接把webRequestAPI权限删掉了，没有把webRequestAPI权限添加到permissions配置项中 解决方案：添加permissions配置项，并把webRequest添加进去即可使用chrome.webRequest的监听事件

4、使用chrome.webRequest.xxx.addListener方法监听时，第三个参数传blocking报错，在API权限中配置webRequestBlocking了也不行 造成原因：不详！不清楚是不是V3不能用blocking了 解决方案：把blocking改成responseHeaders或者requestBody，如果是要监听请求获取请求头参数则改成responseHeaders，如果是要监听请求获取请求体参数则改成requestBody

5、在外部网站直接a标签href="chrome-extension://Chrome扩展程序ID/main.html"跳转到插件popup页，页面报错无法访问 造成原因：V3不能在外部网站通过这种绝对地址跳转的方式访问插件popup页了 解决方案：需要在外部网站通过chrome.runtime.sendMessage给插件发送消息，然后在插件background.js里面监听消息后用chrome.tabs.create({url: url}, function (tabs){})创建一个标签页打开，url是通过chrome.runtime.getURL('main.htm')来拼接的，getURL方法可以获取到当前插件的地址前缀’chrome-extension://chrome扩展程序ID/'，然后拼接传进去的参数地址

6、右侧插件图标点击监听事件chrome.browserAction.onClicked.addListener方法失效 造成原因：V3废除了browserAction配置，改为了action，前面的配置文件参数的区别说明中第一点有提到 解决方案：需要在配置文件中添加action配置项，且监听事件改成使用chrome.action.onClicked.addListener方法来监听

7、添加自定义鼠标右键菜单选项chrome.contextMenus.create({})方法报错参数不支持onclick回调函数字段 造成原因：V3中右键菜单的配置项去除了onclick回调函数参数，改为了另一种方式进行监听右键自定义菜单选项点击事件 解决方案：添加右键菜单的点击监听事件函数chrome.contextMenus.onClicked.addListener(function(){})来进行监听

8、V3版本的service worker(原V2的背景页，即background)中不支持window和document对象 造成原因：V3最大的改动就是这一点，原来V2的背景页和浏览器是有关联的，service worker直接和浏览器进行了隔离，导致window对象和document对象都无法使用，比如我们用到了浏览器数据库window.IndexdDB，以及因为没有了document对象，导致在background中无法引用jQuery去使用$.ajax，且原生的XmlHttpRequest请求也无法使用，vue的axios请求也不行 解决方案：V3版本中直接给了indexedDB这么一个参数对象，无需window.indexedDB调用，直接indexedDB调用即可使用浏览器数据库，可以一切照旧，ajax请求则需要换成Fetch请求才行

可以看这两篇介绍background的改动： 1、https://developer.chrome.com/docs/extensions/mv3/intro/mv3-migration/#background-service-workers； 2、https://developer.chrome.com/docs/extensions/mv3/migrating_to_service_workers/

9、因为不能用ajax请求，换成fetch请求后，有些请求报错501、500、401等 造成原因：fetch请求头默认参数和ajax请求头默认参数不一致，以及请求参数的格式也会发生变化 解决方案：先找之前的ajax请求，右键可以复制成fetch请求方式查看区别，看下面截图

10、fetch请求页面获取到的html返回中文乱码 造成原因：因为fetch请求都是以utf-8来编译的，但是html页面请求需要用gbk编译 解决方案：需要在fetch请求里面返回的数据格式改为arrayBuffer类型，然后接收返回的数据那里用new TextDecoder(‘gbk’).decode()方式转成字符串

11、V3的插件详情页，a标签的href不能=“javascript:”，控制台会报不符合安全策略的错误，但是不影响页面操作 造成原因：V3安全策略要求只能是self，页面上不能写js语句，a标签的href="javascript:"被认为执行了js语句，所以会报错 解决方案：把a标签的href="javascript:"去掉即可

12、V3的background.js中，不能使用veal() 和 new Function() 方法来执行字符串代码或者是转义字符串对象了 造成原因：应该也是V3的安全策略原因，不允许执行字符串代码，防止恶意代码攻击，而且本身veal这个方法就是不安全的，网上搜索相关文章都是建议不要使用 解决方案：看之前用veal方法执行的内容是什么，如果是字符串数组或字符串对象，可以用JSON.parse()转义

以上就是在升级过程中遇到的一些问题，至此结束！！！溜了溜了