零基础入门chrome浏览器扩展插件开发教程

本文介绍了浏览器扩展插件的开发API,包括Chrome、搜狗等浏览器的开发文档和技巧。重点讲述了V2到V3版本的变化,如ServiceWorker的使用、权限管理、背景脚本与内容脚本通信的调整以及搜狗浏览器的特定注意事项。
摘要由CSDN通过智能技术生成

一、浏览器扩展插件开发API文档

搜狗扩展开发文档:https://www.bookstack.cn/read/sogou/50caed12b572182b.md

chrome扩展开发教程:chrome谷歌浏览器开发文档

360浏览器应用开放平台:开发文档

二、浏览器扩展插件开发参考攻略

https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html【干货】Chrome插件(扩展)开发全攻略

十分钟带你入门Chrome插件开发

Chrome插件开发_V3_浏览器扩展插件基础教程

Google浏览器插件入门教程_chrome 插件api文档-CSDN博客

三、浏览器扩展插件V2-V3版本

自我的谷歌插件从升级到V3起,一直遇到一些偶现的一些小bug,定位了好久,是因为background(V3叫做service worker)加载不出导致的。
我在baidu搜了一圈,发现V2有个persistent属性,如果设置为true会始终后台运行,相当于一个独立的服务器页面。
false则会让background 变成了一种短暂加载进内存的脚本,脚本可以多次被线程加载执行,执行完毕后就释放,可以降低谷歌浏览器的内存耗费。
事实上,这么点内存耗费并不是那么重要,所以大多数情况下无脑设置persistent:true。
在V3中,chrome extensions大刀阔斧地砍掉了background,直接改为了persistent始终为false的service worker,也就是说,新的background会不断的卸载重装卸载重装。
官网迁移指南中提到,我们要因此修改几个点:
1.manifest 调整
2.不能嵌套监听,因为当第一个执行完成后,线程就被关闭了,第二次还没来的及执行,就被从内存中销毁了。那这个问题怎么处理呢?官方给出的答案是chrome.storage.local.set/get 解决
3.同时因为失去了页面,也没有了window对象,无法使用setTimeout 和 setInterval 了,必须用 alarm 来处理
4.同样,也没有了XMLHttpRequest对象,但是提供了简洁版的 fetch(好坑啊)
5.同样,没有了document,无法进行DOM 结构解析,需要自行寻找解析库来用,如果非得用 Dom 结构或者 browser environment,则需要新打开一个 tab 或者 window,与 background 进行通信来解决
6.视频和音频捕捉也需要新开 windows 和 tabs 来处理
7.canvas 画布需要用service worker中提供的new OffscreenCanvas(width, height) 

四、浏览器扩展插件常用授权

permissions 主要指插件API的一些调用授权
activeTab
alarms
background
bookmarks
browserSettings
browsingData
captivePortal
clipboardRead
clipboardWrite
contentSettings
contextMenus
contextualIdentities
cookies
debugger
dns
downloads
downloads.open
find
geolocation
history
identity
idle
management
menus
menus.overrideContext
nativeMessaging
notifications
pageCapture
pkcs11
privacy
proxy
scripting
search
sessions
storage
tabHide
tabs
theme
topSites
unlimitedStorage
webNavigation
webRequest
webRequestBlocking
 https://blog.csdn.net/wangsenling/article/details/124851107

五、记录Chrome插件从V2版本升级到V3版本的过程中遇到的问题

注意:搜狗浏览器backgroundjs里面定时任务会在控制台关闭后存在间断不执行的问题,还有无法向contentjs里面传递消息;

//v2配置,v2配置中是用browser_action参数来配置图标和标题,然后右侧插件图标点击时触发的监听事件是chrome.browserAction.onClicked.addListener()
"browser_action": {
  "default_icon": {
    "19": "images/icon19.png"
  },
  "default_title": "插件标题"
}

//v3配置,在v3中需要把browser_action废弃了,需要改成action,同时插件图标的点击监听事件也是一样,把chrome.browserAction改成chrome.action
//如果不添加action这个配置参数的话,chrome.action.onClicked.addListener()这个监听方法会无效
"action": {
  "default_icon": {
    "19": "images/icon19.png"
  },
  "default_title": "插件标题"
}

记录Chrome插件从V2版本升级到V3版本的过程中遇到的问题(https://blog.csdn.net/lxm1353723767/article/details/127706101)

六、搜狗浏览器注意事项

1、通过Navigator userAgent 属性判断搜狗浏览器,时而不准确;可以通过chrome对象里面是否包含account属性进行判断;

2、backgroundjs向contentjs发送消息不生效;可以利用定时器通过缓存去取;

3、扩展插件弹框关闭后,backgroundjs处于睡眠内容会中断执行;

4、同个浏览器多次窗口打开,在后打开的浏览器窗口中打开插件,操作的还是之前窗口的内容,是backgroundjs获取当前选中窗口id还是之前导致的,通过content或popup获取当前选中传给backgorund进行通信会解决;

  • 10
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值