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

什么是 chrome 扩展程序

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

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

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

扩展程序是如何加强 chrome 功能的

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

扩展程序主要名词

• 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 浏览器同样，选项页面也能够自定义扩展程序。 选项可用于启用功能，并容许用户选择与他们的需求相关的功能。

开发第一个 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 变量

// Copyright 2018 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
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 选择器来显示您的扩展程序的页面按钮，而不须要拥有主机权限或插入内容脚本。

// Copyright 2018 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
'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 下是置灰的。

7. 获取后台脚本存储的变量

最后一步，咱们获取从后台脚本文件中设置到 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/ 下，点击右上角工具栏咱们建立的扩展程序，会有一个弹出框，其中只有一个绿色的按钮，点击按钮，该网页的背景颜色会变成绿色。