Chrome插件从零开始开发指南（一）完成一个示例工程

AdamCoder

• 9 min read
Chrome插件从零开始开发指南（一）完成一个示例工程

简介

嗨，各位极客；在你的浏览器中装上了多少插件呢？让我猜猜：tampermonkey 油猴脚本，Chrono下载管理器，bilibilihelper，喔当然还有必不可少的 Adblock。有了解过这些插件是怎么运作的么？想要完成一个自己的插件么？快和我一起动手吧！

基础知识

本文参考 Chrome Extensions V3版本 开发指南，接下来我们简单的介绍一下一个插件的组成，

Chrome 插件通常由以下几部分组成：

  • manifest.json：插件的 meta 信息，包含插件的名称、版本号、图标、脚本文件名称等信息，从这里你可以看到全部的参数。
  • popup：点击插件出发的弹框页面，会创建一个独立的浏览器页面实例。
  • options：插件的扩展配置页面，会创建一个独立的浏览器页面实例。
  • background.js：插件的后台运行脚本，单独的运行在一个浏览器实例中。
{
  "manifest_version": 3,
  "name": "Chrome 插件开发 示例",
  "description": "这是一个 Chrome 开发示例工程",
  "version": "1.0",
  "permissions": [ // 插件需要的权限信息 依次为：数据存储、访问活跃的标签页、执行插入脚本
    "storage", "activeTab", "scripting"
  ],
  // 时间
  "action": {
    // 设置插件在插件区域的icon
    "default_icon": {
      "16": "readIcon.png",
      "32": "readIcon.png",
      "64": "readIcon.png",
      "128": "readIcon.png"
    },
    // 插件在插件区域被点击时的弹出页面
    "default_popup": "popup.html"
  },
  // 后台运行脚本
  "background": {
    "service_worker": "background.js"
  },
  // 全局icon 会出现在配置页面的icon中
  "icons": {
    "16": "bookIcon.png",
    "32": "bookIcon.png",
    "64": "bookIcon.png",
    "128": "bookIcon.png"
  },
  // 配置页面
  "options_page": "options.html"
}

在插件区域点击咱们插件后将触发popup 事件，唤起 popup.html 页面

option 事件

点击右键插件中的选项按钮，将触发option 事件，唤起 options.html 页面

background 事件

当插件被载入后，将后台执行 background.js 脚本

开始动手

我们将按照官方示例完成一个示例工程，在这个工程中，我们将提供一个可以设置网页背景颜色的小工具，并且在配置页面提供多个颜色供用户选择。

那我们就开始吧！先创建一个文件夹，命名为 start，然后用编辑器打开文件夹，开始编码啦，我使用的是vscode，当然任何编辑器都可以完成这项编码。

创建 manifest.json 描述文件

创建一个 manifest.json 文件

{
  "manifest_version": 3,
  "name": "Chrome 插件开发 示例",
  "description": "这是一个 Chrome 开发示例工程",
  "version": "1.0",
  "permissions": [
    "storage", "activeTab", "scripting"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "icon.png",
    "32": "icon.png",
    "64": "icon.png",
    "128": "icon.png"
  },
}

找一张你喜欢的照片，命名为icon并添加到文件夹中，这里先没有配置popup页面和option页面，不着急，一步步来。

Background Js 后台执行程序

创建一个 background.js 文件

// 初始化一个颜色值
let color = '#3aa757';

// 在chrome浏览器创建的时候，设置颜色初始值
chrome.runtime.onInstalled.addListener(() => {
  // 需要注意的是，此时设置的持久对象的键名为 color 其值为 #3aa757
  chrome.storage.sync.set({ color });
  console.log('设置一个默认的颜色，默认颜色值为绿色 %cgreen', `color: ${color}`);
});

然后就可以尝试一下插件的运行啦，进入插件页面，先在右上角开启开发者模式，然后点击加载已解压的扩展程序，找到你的 start 文件夹加载进来。

此时页面上就会出现你的插件了，你会发现在有一个Service Worker视图可以点击，点击查看一下

你就可以看到 background.js 成功运行并打印了日志

接下来我们配置一个弹出页面，创建 popup.html

<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>插件弹出页面</title>
    <link rel="stylesheet" href="button.css">
  </head>
  <body>
    <button id="changeColor"></button>
    <img url="icon.png"/>
    <!-- 引入js -->
    <script src="popup.js"></script>
  </body>
</html>

创建 popup.js

// 获得 改变颜色的按钮
let changeColor = document.getElementById("changeColor");

// 获取当前已设置颜色
chrome.storage.sync.get("color", ({ color }) => {
  changeColor.style.backgroundColor = color;
});

// 创建按钮点击事件 触发对当前激活的浏览器窗口中的当前激活的选项卡设置背景颜色
changeColor.addEventListener("click", async () => {
  let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  
  // 注入执行js代码
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: setPageBackgroundColor,
  });
});

// 注入执行的方法块
// 设置body的背景颜色为目标颜色
function setPageBackgroundColor() {
  chrome.storage.sync.get("color", ({ color }) => {
    document.body.style.backgroundColor = color;
  });
}

创建 button.css

body {
  min-width: 357px;
  overflow-x: hidden;
}

img {
  margin: 5px;
  border: 2px solid black;
  vertical-align: middle;
  width: 75px;
  height: 75px;
}

button {
  height: 30px;
  width: 30px;
  outline: none;
  margin: 10px;
  border: none;
  border-radius: 2px;
}

button.current {
  box-shadow: 0 0 0 2px white,
              0 0 0 4px black;
}

喔当然，还要修改 manifest.json，添加上 popup.html的配置，还需要准备一张在插件区域展示的 popupIcon 照片。

{
  "manifest_version": 3,
  "name": "Chrome 插件开发 示例",
  ... 省略 ...
    "128": "icon.png"
  },
  "action": {
    "default_icon": {
      "16": "popupIcon.png",
      "32": "popupIcon.png",
      "64": "popupIcon.png",
      "128": "popupIcon.png"
    },
    "default_popup": "popup.html"
  }
}

然后在插件页面刷新重新加载

这时候我们就可以点击插件啦，按照1点击插件，然后点击2，触发按钮事件

bingo! 当前页面的背景颜色变成绿色了。

似乎只有一个绿色不太合适，我们得为用户提供更多的选择，那就再做一个选项页面，提供配置功能吧。

Option 选项配置页面

创建 options.html

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>插件选项配置页面</title>
  <link rel="stylesheet" href="button.css">
</head>

<body>
  <div id="buttonDiv">
  </div>
  <div>
    <p>选择一个新的背景颜色</p>
  </div>
  <script src="options.js"></script>
</body>

</html>

创建 options.js

// 获取按钮区域 div
let page = document.getElementById("buttonDiv");
// button.css 有一个 button current css 样式，为选中的颜色添加出黑色边框
let selectedClassName = "current";
// 设置待选颜色按钮
const presetButtonColors = ["#3aa757", "#e8453c", "#f9bb2d", "#4688f1"];

// 创建按钮事件 通过标记所选按钮 保存颜色
function handleButtonClick(event) {
  // 从事件的父级中找到之前被选中的按钮
  let current = event.target.parentElement.querySelector(
    `.${selectedClassName}`
  );
  // 从他的class列表中去掉选中状态
  if (current && current !== event.target) {
    current.classList.remove(selectedClassName);
  }

  // 获取按钮携带的数据信息 也就是我们想要的颜色
  let color = event.target.dataset.color;
  // 添加选中状态
  event.target.classList.add(selectedClassName);
  // 设置当前选中颜色
  chrome.storage.sync.set({ color });
}

// 按颜色列表依次添加按钮到页面
function constructOptions(buttonColors) {
  // 获取当前已设置的颜色
  chrome.storage.sync.get("color", (data) => {
    let currentColor = data.color;
    // 循环颜色列表
    for (let buttonColor of buttonColors) {
      // 创建按钮 赋予按钮颜色
      let button = document.createElement("button");
      button.dataset.color = buttonColor;
      button.style.backgroundColor = buttonColor;

      // 如果是当前已选中的按钮，则设置
      if (buttonColor === currentColor) {
        button.classList.add(selectedClassName);
      }

      // 创建点击事件
      button.addEventListener("click", handleButtonClick);
      // 添加回页面上
      page.appendChild(button);
    }
  });
}

// js 被加载后 自执行初始化方法 创建按钮
constructOptions(presetButtonColors);

然后再修改一次 manifest.json

{
  "manifest_version": 3,
  "name": "Chrome 插件开发 示例",
  ... 省略 ...
    "default_popup": "popup.html"
  },
  "options_page": "options.html"
}

然后再重载一次插件，bingo！右键我们的插件就多出选项页面啦

点击进入选项页面，出现了我们在代码中配置的四个颜色了，随便点选其他三种颜色。

我们就可以惊喜的发现在popup页面的按钮颜色也发生了变化了。

小结

至此，我们的起步示例工程的开发就完成了。

在这次工程中，我们完成了配置基本信息、开发了popup 弹出页面、option 配置页面，并实现了多页面间的数据共享功能，并了解到各个页面间的通信都需要通过第三者进行处理，因为本质上每个页面都是独立的进程。

那我想提个小问题，如果我想在选项配置页面选择了颜色之后，然后再点击到一个具体的选项卡中自动帮我修改背景颜色，应该怎么实现呢？

谷歌插件示例工程

谷歌插件官方文档

Sign up for more like this.

Enter your email
Subscribe
本站总访问量次 本站访客数人次