快速学习 Chrome Extension

常驻后台 background

可以理解 background 是一个常驻 Chrome 后台的页面，只要浏览器打开它就存在，Chrome 关闭它才关闭，一般把需要一直运行的、全局代码都放在 background 里。

现在，加载 background 文件夹，开始学习吧。

配置

要使用 background 非常简单，只要在 manifest.json 里添加 配置 即可。

体验一下，在 backgorund.js 中添加如下代码，试试是不是在 10 秒后 alert 出 Hello, world!

// background.js
let timeout = 10000;
window.setTimeout(function() {
  alert('Hello, world!');
}, timeout);

调试

加载完成后，可以看到 背景页，点击打开，就看到我们熟悉的调控台了。

权限

background 权限很高，几乎可以使用这里所有的 API。

注入页面脚本 Content Scripts

Content Scripts 是运行在页面中的一段脚本（JavaScript文件），通过 Web DOM 接口，写在 Content Scripts 中的脚本可以读取Web页面中的任何元素内容，但它和真正的 inject 还有稍许区别，试想一下，如果我们在一个 React 应用程序中，想获取到 React 对象，以及任何原页面本身的脚本上下文，Content Scripts 并没有提供这样的能力，而是需要额外再注入一段脚本，这个脚本是由 script 标签创建的 JavaScript。

那么 Content Scripts 都提供了哪些能力：

• 少部分的 Chrome *API 可以使用

• 可以获取 DOM 元素

限制条件如下：

• 大部分的 Chrome *API 无法使用

• 不能访问 Chrom Extension 页面中定义的变量和函数

• 不能访问 Web 页面 或者其他 Content Scripts 中定义的变量和函数

一般而言，我们常常使用 Content Scripts 做一些比如处理 DOM 的事情，很可惜如果你想真正的访问 Web 页面中定义的变量和函数，还是可以使用另外的一种方式来解决这个问题。咋一看，Content Scripts 不能访问 Chrome Extension 页面中定义的变量和函数，但是我们可以使用 Chrome Extension 通信消息机制来处理这个问题，间接性的来进行交互。

目前来说在 Chrome Extension 中使用 Content Scripts 有两种方式可供选择：

• 在 manifest.json 文件中声明 Content Scripts

• 在某个状态条件的触发下动态的注入

声明 Content Scripts

声明的 Content Scripts 非常的简单，我们只需要在 manifest.json 文件中声明即可，如：

{
  "version": "0.0.1",
  "name": "welearnmore-content_scripts",
  "manifest_version": 2,
  "description": "welearnmore",
  "content_scripts": [
    {
      "matches": ["https://icepy.me/*"],
      "js": ["content_scripts.js"]
    }
  ],
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self';"
}

我们可以在 content_scripts.js 文件中随便写一个log，如：console.log('icepy')，然后运行一下，我们可以体验项目 查看，在控制台中，将得到如下的一行输出：如图：

动态注入 Content Scripts

在某些场景下，我们可能需要动态的注入一段 Content Scripts，来触达我们的业务，这个时候这种方式就能很好的处理这个问题，我们主要利用了 chrome.tabs.executeScript 的能力来达到动态注入的目的。

首先，我们需要先配置 manifest.json 文件，如：

{
  "version": "0.0.1",
  "name": "welearnmore-dynamic_content_scripts",
  "manifest_version": 2,
  "description": "welearnmore",
  "browser_action": {
    "default_title": "welearnmore dynamic content scripts",
    "default_icon": "img/logo.png",
    "default_popup": "popup.html"
  },
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "permissions": [
    "tabs",
    "<all_urls>"
  ]
}

然后在 background.js 中，利用消息通信的机制，去打开一个tab，由 Popup 页面中的某个按钮来触发：

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
  chrome.tabs.create({ url: 'https://icepy.me'}, function(tab){
    chrome.tabs.executeScript(tab.id, {file: 'dynamic_content_scripts.js'});
  });
})

dynamic_content_scripts.js 随便写一个 log，如：

console.log('icepy');

现在，我们可以体验项目 查看，在你的 Chrome 浏览器中，如图：

侧边栏按钮 popup

看上去 Popup 就是一个普通的HTML文件，它可以包含任何内容，比如：HTML，CSS，JavaScript，与普通网页唯一的区别是，它显示在浏览器的右上角，如图：

你可以使用 Popup Actions 将图标放置在地址栏中，并且定义需要处理的页面事件，显而易见，在这里的处理，可以在 manifest.json 文件中配置完成。

现在，加载 popup 文件夹，来开始学习吧。

配置

如果要开启 Popup 需在 manifest.json 文件中 配置入口文件 即可：

{
  "name": "我的popup扩展程序",
  "version": "2.0",
  "browser_action": {
    "default_title": "popup action page",
    "default_icon": "img/logo.png",
    "default_popup": "popup.html"
  }
}

运行结果

权限

与 background 不同的是，它是一个可见的网页，因此可以理解为普通浏览器中的安全策略以及限制在这个运行环境中同样存在，并且可调用的 Chrome API 有与 background 不同，它是受限的。

选项页 options page

为了让用户有地方可以设置你的 Extension 功能，因此你可能需要提供一个选项页面来让用户进行某些设置操作，我们可以很简单的在 manifest.json 文件中配置你的 Options page，如：

{
  "version": "0.0.1",
  "name": "welearnmore-options_page",
  "options_page": "option.html"
}

大部分情况下，Options Page 和 Popup Page 几乎一样，Chrome Extension 给我们提供了一个运行环境，但是页面和交互，这就需要你利用好 Web 技术来完善它了，唯一和 Popup Page 的区别，可能就是 Options Page 场景，主要利用在用户设置某些操作上（复杂的）。