Chrome 扩展程序开发

秋山曾
428 阅读2分钟

前言

Chrome 扩展程序是一种可以在浏览器中运行的程序，借助浏览器提供的 API，可以增强页面的功能。Chrome 扩展程序的语法和 Web 前端类似，也是 html/css/js 的组合。

架构

Chrome 扩展程序主要由以下几部分组成：

  • Manifest.json：描述扩展程序的基本信息，包括名称、版本、作者、描述等。
  • Background Script：后台脚本，扩展程序加载时会被自动执行，并且一直存在于扩展程序的整个生命周期。
  • Content Script：内容脚本，会插入到页面中，可以访问 DOM 并且可以修改 DOM，也可以和扩展程序通信。
  • UI elements：用来增强浏览器的用户体验，如果扩展程序需要显示一些 UI 元素，可以在这里添加。比如右键菜单、快捷键、地址栏和点击插件出现的 popup 等。
  • Options page：设置页面，用来设置扩展程序的一些配置信息。

除了 Manifest.json 必须存在外，其他所有文件都是可选的。

Manifest.json

必须有的属性：

  • manifest_version - manifest 的版本
  • name - 插件的名字
  • version - 插件版本

manifest_version 目前 Chrome 浏览器推荐 3，2023 年将停止支持 2，但目前国内如 360 安全浏览器等浏览器仍然只支持 2。

Content Script 的注入方式

1）静态声明式注入

在 manifest.json 中的 content_scripts 的字段：

{
 "name": "My extension",
 ...
 "content_scripts": [
   {
     "matches": ["https://*.nytimes.com/*"],
     "css": ["my-styles.css"],
     "js": ["content-script.js"]
   }
 ],
 ...
}

2）以编程方式注入

//// content-script.js ////
document.body.style.backgroundColor = 'orange';

//// background.js ////
chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    files: ['content-script.js'],
  });
});

v2 和 v3 版本的一些差异

  1. background 使用了 service worker 替代了原来的 background 页面
  2. 需要指定 host permissions
  3. browser_action 和 page_action 合并为 action
  4. web_accessible_resources 由字符串数组变为对象数组

更多请查阅官方文档。

一些注意事项

  1. 扩展程序中的 html 不能执行内联 js。
  2. manifest.json 中的 Match patterns 包含 scheme、host、path 三个部分，v3 版本使用 <all_urls> 匹配所有 url。
  3. 很多扩展 API 已支持 promise，如果没有传 callback 参数则返回 promise。

为扩展程序提供的常用 API

  1. chrome.cookies - 操作 cookie
  2. chrome.tabs - tab 相关
  3. chrome.webRequest - 观察、分析、拦截、修改请求
  4. chrome.bookmarks - 操作书签
  5. chrome.contextMenus - 操作右键菜单
  6. chrome.storage - 操作本地存储

安装和调试

  1. 浏览器打开扩展程序管理界面 chrome://extensions
  2. 开启 “开发者模式”
  3. 可以选择 “加载已解压的扩展程序”，选择本地开发目录

开发时可以点击扩展程序开关旁边的刷新按钮重新载入插件。要调试 popup 需要在菜单栏右键扩展程序选择 Inspect Popup, 调试 background 则需要在扩展程序管理界面中对应扩展找到 background 页面或者 service worker （v3）。

avatar
文章
阅读
粉丝