Chrome extensions

chrome扩展可以看成一中小型的应用,用来改善使用chrome浏览器时的体验。从实现角度看,就是一个.crx后缀命名的压缩包,里面包括但不限于HTML,JavaScript 和CSS文件。 对于功能比较多的扩展,也可以是vue 或者 react框架打包后的产物。

修改浏览器主题,修改网页上的样式,获取网络信息,截图下载等功能,利用扩展都可以完成。

基本项目结构

Manifest 文件

必须有manifest.json 配置文件,作为扩展的入口,而且后面用到的所有脚本或组件,都需要在manifest中注册。

//manifest.json
  {
  // Required
    "name": "Getting Started Example",
    "version": "1.0",
    "manifest_version": 2
  }

上面列出了必须字段,其中manifest_version版本从chrome 18 开始,需要固定写成2,不带任何引号。

background

manifest.json中指定后台脚本文件,用来监听浏览器事件。

  • script选项指定了需要注册的js文件路径。
  • persistent一般设置为false,唯一需要设置persistently为true的时候,是当前扩展用到了chrome.webRequest APi去阻止或修改网络请求。大部分情况设置"persistent": false
// manifest.json
{
 ...
 
+ "background": {
+     "scripts": ["background.js"],
+     "persistent": false
+   },

}

然后在background.js 中初始化扩展。下面示例表示在安装完成后,马上更新存储的color值。

// background.js
  chrome.runtime.onInstalled.addListener(function() {
    chrome.storage.sync.set({color: '#3aa757'}, function() {
      console.log("The color is green.");
    });
  });

permissions

权限许可,脚本中用到了那些api,对应的权限字段在这里列出来,比如前面用到了storageAPI。

// manifest.json
{
...
+  "permissions": ["storage"],
}

在chrome开放者文档中,每个api都列出了Permissions字段。
permission.PNG

也可以是请求跨域接口的权限设置,比如

  "permissions": [
    "https://\*.google.com/"
  ],

action

用户接口,可以是一个小型弹窗,提示框,右键菜单,自定义快捷键等。

比如设置page_action选项,只在指定页面中被激活,其他页面中处于灰色不可点击状态,弹窗的内容对应popup.html页面

// manifest.json
{
  ...
+    "page_action": {
+      "default_popup": "popup.html"
+    },
}

完整入门示例,可以在chrome开发者网站上下载

其它文件

需要与manifest.json配置中,指定的路径一致

安装

  1. 直接地址栏输入chrome://extensions,或者点击右上角菜单->More Tools(工具) -> Extensions(扩展程序). 勾选Developer Mode(开发者模式),
  2. 点击Load Unpacked Extension(加载已解压的扩展程序)。

练习过程中,如果不清楚某些api用法,可以在https://developer.chrome.com/... 这里,搜索对应api编写的简单示例,更快上手。
在明确自己写插件的需求后,先在chrome应用商店中用关键词搜索一下是否有相应扩展。

常用chrome扩展

1.Infinity 新标签页 (Pro)

自定义新标签页,可以选择多种壁纸
newtab.jpg

2.沙拉查词-聚合词典划词翻译

好用的翻译插件,集合了多个词典
salad.jpg

3.JSONView

在地址栏中输入接口地址,对返回的json格式数据格式化,
jsonview.jpg

4.Proxy SwitchyOmega
代理转发接口

5.掘金
推荐每日优质内容,不过跟Infinity扩展有冲突,默认显示在新开标签页,

6.mage Downloader

截图,可以截整张网页,可以下载网页中所有图片,支持多种格式

7.Screencastify - Screen Video Recorder

屏幕录制,可以保存到Google Drive

8.简悦 - SimpRead

进入沉浸式阅读,体验不错

9.JavaScript Errors Notifier
捕获页面的JavaScript报错,不用打开开发者工具

国内插件库

https://www.chromebus.cn/
https://chrome.zzzmh.cn/#ext
https://pictureknow.com

参考文档

https://developer.chrome.com/...

阅读 410

推荐阅读