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 配置页面,并实现了多页面间的数据共享功能,并了解到各个页面间的通信都需要通过第三者进行处理,因为本质上每个页面都是独立的进程。

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

谷歌插件示例工程

谷歌插件官方文档

本站总访问量 本站访客数人次