手把手教你开发一个 chrome 扩展程序

[kemistep]

用来向您的浏览器添加新功能并个性化您的浏览体验的小程序。

chrome 扩展程序是 HTML\JS\CSS\images 和其他可以在 web 页面中使用的资源的压缩包，可以增强 chrome 浏览器功能或定制浏览体验。

chrome 扩展程序本质上是网页，可以使用浏览器为网页提供的所有 API 。

首先我们来看下扩展程序的主要的几个名词

扩展程序主要名词

• Manifest （清单文件）
• Background Script （后台脚本）
• UI Elements （页面元素）
• Content Script （内容脚本）
• Options Page

清单文件 manifest.json

扩展文件都会有一个 mainfest 清单文件 清单文件必须要命名为 manifest.json ，为浏览器提供扩展程序的相关信息，比如使用了哪些文件和该扩展程序可以使用哪些功能。

一个基本的 mainfest 文件结构如下（用于一个浏览器按钮，它将会访问来自 google.com 的信息）

{
  "name": "My Extension",
  "version": "2.1",
  "description": "Gets information from Google.",
  "icons": {
    "128": "icon_16.png",
    "128": "icon_32.png",
    "128": "icon_48.png",
    "128": "icon_128.png"
  },
  "background": {
    "persistent": false,
    "scripts": ["background_script.js"]
  },
  "permissions": ["https://*.google.com/", "activeTab"],
  "browser_action": {
    "default_icon": "icon_16.png",
    "default_popup": "popup.html"
  }
}

后台脚本 background script

后台脚本是扩展程序的事件处理程序，其中包含扩展程序的事件监听器，可以在后台运行，只在需要时才加载，在空闲时不加载。 特点：

• Javascript 文件总是运行在后台.
• 有 Chrome 应用程序级别命令的访问权限。
• 有使用所有 Chrome API 的权限

用户页面 UI Elements

用户界面应该在不分散用户注意力的前提下自定义或增强浏览体验，不应该有过多的内容，尽可能的少而精。。

扩展程序都有一个后台网页（ background.html）包含主要逻辑的不可见页面，扩展程序也可以包含其他页面，来展示扩展程序的用户页面。

许多扩展程序以 浏览器按钮 或 页面按钮 的形式向 Google Chrome 浏览器增加用户界面，每个扩展程序最多能有一个浏览器按钮或页面按钮。 当扩展程序与大部分网页相关时选择使用浏览器按钮，当扩展程序的图标显示还是消失取决于具体网页时选择使用页面按钮。

浏览器按钮（browser_action）和页面按钮（page_action）的区别在于，浏览器按钮常驻右上角工具栏，页面按钮可以控制显示还是隐藏（置灰）。

扩展程序也有其他的引入方式，比如右键菜单项，使用多功能框（chrome 浏览器的地址栏）或者创建快捷键。

扩展程序的 UI 页面，比如弹出框 popup，是包含 JavaScript 的普通 HTML 页面（popup.html）。

使用页面按钮和弹出窗口（popup）的扩展程序可以使用 declarative content API 在后台脚本（background.js）中设置规则，以供用户确定弹出窗口何时可用。 满足条件后，后台脚本会与弹出窗口进行通信，以使用户可以点击其图标。

内容脚本 content script

如果扩展程序需要与用户加载的网页交互，那么必需要使用内容脚本。内容脚本可以修改网页。

内容脚本中是一些 JS 代码，在已加载到浏览器的页面的上下文中执行，可以读取和修改浏览器访问的网页的 DOM。应该将内容脚本视为已加载网页的一部分，而不是扩展程序的一部分。

内容脚本可以通过通信并使用 存储 API 来与其父扩展进行通信。

特点：

• 拥有一部分 Api 的使用权限（比如从 backgorund 监听消息）
• 对于页面 Dom 有完整的访问权限，但是对于任何 window 级别的对象没有访问权限（比如全局变量），对于 frame 也没有访问权限；这是因为安全限制。
• Content scripts运行在介于插件和页面之间，全局的 window 对象是和页面 / 插件全局命名空间完全不同的。

option page

就像扩展程序允许用户自定义 Chrome 浏览器一样，选项页面也可以自定义扩展程序。 选项可用于启用功能，并允许用户选择与他们的需求相关的功能。

我们做一个给制定页面（developer.chrome.com）更换背景颜色的 chrome 扩展程序。

1. 创建文件结构

.
├── background.js
├── images
│   ├── get_started128.png
│   ├── get_started16.png
│   ├── get_started32.png
│   └── get_started48.png
├── manifest.json
├── popup.html
└── popup.js

2. 创建 mainfest 清单文件

扩展程序从清单文件开始，我们统一命名为 mainfest.json

{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "manifest_version": 2
}

3. 在 chrome 中安装

1. 打开扩展程序的管理页面：chrome://extensions. 或者在右上角的菜单中找到更多工具的扩展程序
2. 打开开发者模式
3. 选择加载已解压的扩展程序，选中你刚创建的文件
4. 扩展程序就已经加载成功了，因为清单文件中没有包含图标，所以展示默认图标

4. 编写后台脚本

虽然扩展程序已经安装了，但是什么内容都还没有，我们先来完成后台脚本。 在 mainfest.json 中的 background 字段中添加脚本文件的文件名 background.js

{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "manifest_version": 2
}

4.1 注册监听事件

扩展程序会扫描注册文件中需要侦听的重要事件。

在 background.js 文件中加入 runtime.onInstalled onInstalled 监听器，然后使用 storage API 在全局存储一个 color 变量

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

4.2 注册权限

因为我们使用了 storage API ，所以必须在 mainfest.json 文件中注册后才能使用

"permissions": ["storage"],

4.3 刷新

然后我们在扩展程序的管理页面点击刷新按钮就可以重新载入扩展程序。

点击查看视图后面的 背景页 链接，就可以打开一个新的浏览器检查页面，控制台有我们刚刚 console 的 log The color is green. 这个就是上文提到的没有页面的后台页面。

5. 引入用户界面

扩展程序可以有很多种引入用户页面的方式，这里我们使用的是弹出窗 popup。 在 mainfest.json 中的 page_action 字段中添加 "default_popup" 字段和 default_icon 字段添加 icon（相对路径引入，不再赘述） 可以提供要在 chrome 中使用的任意大小的图标，然后 chrome 会选择最接近的图标并将其缩放为适当的大小，以填充 16 个浸入空间。

但是，如果未提供确切的大小，则此缩放比例可能导致图标丢失细节或显得模糊。 icon 的可以通过两种方式设置，一种是静态图片，另一种是 canvas。使用静态图片更加简单，但是使用 canvas 可以增加动效。

静态图片只要是 WebKit 可以展示的图片就可以，可以是 BMP, GIF, ICO, JPEG, PNG。但是对于未压缩的扩展程序，只能是 PNG 的。

{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "page_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/get_started16.png",
      "32": "images/get_started32.png",
      "48": "images/get_started48.png",
      "128": "images/get_started128.png"
    }
  },
  "manifest_version": 2
}

该 html 文件内容如下，最基础的一个 html 文件，只包含一个 button 按钮，我们的目的是点击这个按钮，改变网页的背景颜色。

<!DOCTYPE html>
<html>
  <head>
    <style>
      button {
        height: 30px;
        width: 30px;
        outline: none;
      }
    </style>
  </head>
  <body>
    <button id="changeColor"></button>
  </body>
</html>

6. 增加弹出框展示规则

然后我们在 后台脚本增加一条展示规则：在 host 等于 developer.chrome.com 时展示 popup 的页面。因为使用了 declaractiveContent api，所以我们还需要在脚本文件中注册下权限。

声明式内容 API 允许您根据网页的 URL 和它的内容匹配的 CSS 选择器来显示您的扩展程序的页面按钮，而不需要拥有主机权限或插入内容脚本。

'use strict';
chrome.runtime.onInstalled.addListener(function() {
  chrome.storage.sync.set({color: '#3aa757'}, function() {
    console.log("The color is green.");
  });
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    chrome.declarativeContent.onPageChanged.addRules([{
      conditions: [new chrome.declarativeContent.PageStateMatcher({
        pageUrl: {hostEquals: 'developer.chrome.com'},
      })
      ],
      actions: [new chrome.declarativeContent.ShowPageAction()]
    }]);
  });
});

重新加载后你会发展，只有在 developer.chrome.com host 该图标是亮的，其他 host 下是置灰的。

最后一步，我们获取从后台脚本文件中设置到 storage 中的 color 变量，更换 popup 中 button 的颜色，然后点击 button ，更换当前页面的背景颜色。

我们需要创建一个 popup.js 并且在 popup.html 中引入。就和正常的网页开发一样的使用姿势。

'use strict';
let changeColor = document.getElementById('changeColor');
chrome.storage.sync.get('color', function(data) {
  changeColor.style.backgroundColor = data.color;
  changeColor.setAttribute('value', data.color);
});
changeColor.onclick = function(element) {
  let color = element.target.value;
  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    console.log('color', color);
    chrome.tabs.executeScript(
        tabs[0].id,
        {code: 'document.body.style.backgroundColor = "' + color + '";'});
  });
};

我们使用了 chrome 的 tabs api，所以需要在 mainfest.json 中获取 activeTab 的权限

至此，我们已经完成了我们第一个 chrome 扩展程序的开发。 在 developer.chrome.com/ 下，点击右上角工具栏我们创建的扩展程序，会有一个弹出框，其中只有一个绿色的按钮，点击按钮，该网页的背景颜色会变成绿色。

https://juejin.im/post/6844904077889912839