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

一、简述

我们所说的chrome插件一般都是指chrome扩展程序(Chrome Extension)。chrome插件是一个用Web技术开发、用来增强浏览器功能的软件,它其实就是一个由HTML、CSS、JS、图片等资源组成的一个.crx后缀的文件。chrome插件除了Chrome浏览器之外,还可以运行在所有webkit内核的国产浏览器,比如360极速浏览器、360安全浏览器、搜狗浏览器、QQ浏览器等等。

二、chrome插件的能力

除了支持传统的一切 web API、JavaScript API 以外,chrome插件额外支持以下API(chrome.xxx):

  • bullet 浏览器窗口(chrome.window)
  • tab标签(chrome.tabs)
  • 书签(chrome.bookmark)
  • 历史(chrome.history)
  • 下载(chrome.download)
  • 网络请求(chrome.webRequest)
  • 自定义右键菜单(chrome.contextMenus)
  • 开发者工具扩展(chrome.devtool)
  • 插件管理(chrome.extension)

三、chrome插件的组成

主要由以下部分组成:

  1. manifest.json (配置文件,目前最新是v3版本)
  2. popup (点击插件图标弹出的页面)
  3. content script (插入到目标页面中执行的JS)
  4. background script (在浏览器后台Service Workers中运行的程序)
  5. options (选项页面,可有可无)

四、manifest v3的主要特性

  1. Service Workers取代background pages,使用Service Workers,可对资源进行缓存,从而实现离线访问。
  2. 网络请求调整,新增了一个declarativeNetRequestAPI,允许插件修改及阻断网络请求。
  3. 远程资源访问限制,禁止访问外部的JavaScript及Wasm文件,图片、音视频文件不受影响。
  4. Promises使用,可以愉快地使用promise了,包括async/await。
  5. manifest文件的部分配置和chrome API做了部分调整。

五、基于manifest v3的chrome插件Demo展示

十分钟带你入门Chrome插件开发_第1张图片
十分钟带你入门Chrome插件开发_第2张图片
十分钟带你入门Chrome插件开发_第3张图片
十分钟带你入门Chrome插件开发_第4张图片
如需获取demo项目源码,请到我的github上自行clone,顺便给咱点个Star,非常感谢。
https://github.com/hepengwei/chrome-extension-basic-demo

六、chrome插件开发本地调试

  1. 调试popup.html页面:右键点击浏览器右上角插件图标,然后选择点击"审查弹出内容"。
  2. 调试background.html或background.js:在浏览器的扩展程序管理页面找到自己加载的扩展程序,然后点击"Service Worker"(MV2则是"背景页")。
  3. 调试content_scripts.js:在注入的页面按F12,和正常页面一样调试。
  4. 调试options.html页面:右键点击浏览器右上角插件图标,然后选择点击"选项",打开插件的选项页,然后按F12,和正常页面一样调试。

七、chrome插件开发注意事项总结

  1. manifest.json必须放在插件项目的根目录,里面包含了插件的各种配置信息,其中也包括了popup、content script、background script等路径。

  2. 不支持使用SVG格式的图片。

  3. 在MV3中,由于Service Workers的机制,background页中不支持使用XMLHttpRequest,建议使用fetch()。

  4. 不允许在html文件中写js代码,只能通过script标签导入js文件的方式,导入文件也不能使用项目外部的文件,比如不能使用CDN上的文件

  5. 不要直接在元素中给onclick属性一个函数调用,例如testB,即使有定义onSave方法,也会报错onSave is not defined,要给元素添加事件要使用JS动态添加,例如$(“#save”).click(onSave)。

  6. 内容脚本和网站想要访问的所有资源都必须在web_accessible_resources属性下声明。

  7. popup可以直接调用background中的JS方法,也可以直接访问background的DOM。

  8. 在对popup页面审查元素的时候popup会被强制打开无法关闭,只有控制台关闭了才可以关闭popup,原因很简单:如果popup关闭了控制台就没用了。

  9. 插件图标在未命中popup的URL匹配规则的页面时没有变灰,这是chrome自身的一个bug(可以关注bug论坛:https://bugs.chromium.org/p/chromium/issues/detail?id=1127067)。

  10. chrome.tabs.connect或chrome.tabs.sendMessage不能用于与选项页面通信,选项页面可以使用chrome.runtime.connect和chrome.runtime.sendMessage与background页通信。

  11. 很多时候你发现你的代码会莫名其妙的失效,找来找去又找不到原因,这时打开background的控制台才发现原来某个地方写错了导致代码没生效,正是由于background报错的隐蔽性(需要主动打开对应的控制台才能看到错误),所以特别注意这点。

  12. 关于content script的注意事项

  • content script文件中可以获取web页面的DOM并修改,content script和原始页面共享DOM,但是不共享JS,JS是相互隔离的,可以通过window.postMessage和window.addEventListener来实现二者消息通讯。
  • 不能访问background或popup中JS定义的变量或方法。
  • 不能访问web页面或其他content script中定义的变量或方法。
  • 不能发送跨域请求。
  • content script文件中只能使用下面列出的API:
    chrome.extension(getURL , inIncognitoContext , lastError , onRequest , sendRequest)
    chrome.i18n
    chrome.runtime(connect , getManifest , getURL , id , onConnect , onMessage , sendMessage)
    chrome.storage

八、国际化配置

在项目根目录下创建名为 “_locales” 的文件夹,在该文件夹中加入如下文件夹及文件

  • _locales/en/messages.json
  • _locales/zh_CN/messages.json

在每种语言的messages.json中添加相同的属性变量,配置如下:

{
    "tooltip": {
       "message": "这里是字段显示的内容"
    }
}

使用时
在manifest.json或CSS文件中通过 __MSG_tooltip__ 引入,

{
    "action": {
        "default_title": "__MSG_tooltip__",
    },
    "default_locale": "zh_CN",
}

在JS文件中通过 const tooltip = chrome.i18n.getMessage(“tooltip”) 引入。

你可能感兴趣的:(chrome,javascript,前端)