Chrome插件开发入门

刘承瑜
470 阅读6分钟

自2022年1月17日起，Chrome 网上应用店已停止接受新的 Manifest V2 扩展程序

20221012214335.jpg

所以本文基于最新的V3版本介绍

一、Chrome扩展程序简介

大家经常说的谷歌浏览器插件，其实是谷歌浏览器扩展程序，以下是官方介绍：

扩展是自定义浏览体验的小型软件程序。它们让用户可以通过多种方式定制 Chrome 的功能和行为，例如：

  • 生产力工具
  • 网页内容丰富
  • 信息聚合
  • 乐趣和游戏

扩展如何工作？

扩展程序是基于 HTML、JavaScript 和 CSS 等 Web 技术构建的。它们在单独的沙盒执行环境中运行，并与 Chrome 浏览器交互。

扩展程序允许通过使用 API 修改浏览器行为和访问 Web 内容来“扩展”浏览器。

二、Chrome扩展程序基础知识

一图了解扩展程序各个部分的关系

20221012213622.jpg

1. 清单文件 manifest.json

向浏览器提供有关扩展的信息，例如最重要的文件和扩展可能使用的功能。

{
  // Required
  "manifest_version": 3,
  "name": "My Extension",
  "version": "versionString",

  // Recommended
  "action": {...},
  "default_locale": "en",
  "description": "A plain text description",
  "icons": {...},

  // Optional
  "author": ...,
  "background": {
    // Required
    "service_worker": "background.js",
    // Optional
    "type": ...
  },
  "commands": {...},
  "options_page": "options.html",
  "options_ui": {
    "page": "options.html"
  },
  "permissions": ["tabs"]
}

2. service_worker(background.js)

background script是扩展的事件处理程序; 它包含对扩展很重要的浏览器事件的侦听器。它处于休眠状态，直到触发事件，然后执行指示的逻辑。有效的后台脚本仅在需要时加载，并在空闲时卸载。

在V2版本是配置background.html 和 background.js，不再过多赘述，在v3版本中，将所有脚本移动到service worker中

3. content_script

读取或写入网页的扩展程序使用 content_script。内容脚本包含在已加载到浏览器的页面上下文中执行的 JavaScript。内容脚本读取和修改浏览器访问的网页的 DOM。

content_script可以通过使用storage/message API来与扩展其他部分进行通信。

注入方式

对于manifest.json来说

  1. 可以配置静态声明去注入
  2. 可以通过编程方式注入 需要获取activeTab权限
{
 "name": "My extension",
 ...
 "content_scripts": [
   {
     "matches": ["https://*.nytimes.com/*"],
     "css": ["my-styles.css"],
     "js": ["content-script.js"]
   }
 ],
 ...
}

对于获取了权限的content_script通过代码执行注入

{
  "name": "My extension",
  ...
  "permissions": [
    "activeTab"
  ],
  "background": {
    "service_worker": "background.js"
  }
}

// background.js
chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    files: ['content-script.js']
  });
});

或者函数体可以作为内容脚本注入和执行

// background.js
function injectedFunction() {
  document.body.style.backgroundColor = 'orange';
}

chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    func: injectedFunction
  });
});

请注意，注入的函数是chrome.scripting.executeScript调用中引用的函数的副本，而不是原始函数本身。因此，函数的主体必须是自包含的；对函数外部变量的引用将导致内容脚本抛出ReferenceError

4. popup

运行于弹窗的html显示 & js脚本

20221012184442.jpg

5. Option

正如扩展程序允许用户自定义 Chrome 浏览器一样，选项页面支持扩展程序的自定义。选项可用于启用功能并允许用户选择与其需求相关的功能。

20221012182036.jpg

20221012182128.jpg

可配置式，开关功能，让用户自行选择想使用的功能

有两种可用的扩展选项页面类型，整页和嵌入式。选项的类型取决于它在清单中的声明方式。

整页选项

扩展的选项页面将显示在新选项卡中。选项 HTML 文件列在该options_page字段下注册。

{
  "name": "My extension",
  ...
  "options_page": "options.html",
  ...
}

嵌入式选项

嵌入式选项允许用户调整扩展选项，而无需离开嵌入式框内的扩展管理页面。要声明嵌入选项，请options_ui在扩展清单中的字段下注册 HTML 文件，并将open_in_tab键设置为 false。

{
  "name": "My extension",
  ...
  "options_ui": {
    "page": "options.html",
    "open_in_tab": false
  },
  ...
}

三、开始第一个扩展程序

1. 新建manifest.json

{
  "name": "My First Plugin",
  "version": "1.0",
  "manifest_version": 3,
  "icons": {
    "48": "icon_48.png"
  },
  "action": {
    "default_icon": {
      "48": "icon_48.png"
    },
    "default_popup": "popup.html"
  }
}

2. 新建popup.html文件

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <h1>Hello</h1>
</body>
</html>

最简单的扩展程序已经完成，下面在浏览器中加载

3. 浏览器中加载

在开发模式下，需要打开chrome的开发者模式才可以测试自己写的扩展程序。
打开的方法为：

  1. chrome浏览器的地址栏输入：chrome://extensions/；
  2. 在右上角会找到一个开关：“开发者模式”；
  3. 打开开关后，会发现在扩展程序的页面内出现三个按钮：“加载已解压的扩展程序”、“打包扩展程序”、“更新”；
  4. 点击“加载已解压的扩展程序”，选择自己刚刚的扩展程序目录即可成功加载自己的扩展程序了；

20221012154327.jpg

选中项目目录

20221012155053.jpg

加载成功

20221012155833.jpg

底部的错误按钮，可查看报错信息，刷新按钮可重新加载扩展程序

20221012160149.jpg

点击图钉固定到工具栏

20221012165024.jpg

右键点击扩展程序图标，可以调试

20221012160717.jpg

20221012185847.jpg

到此，第一个扩展程序已完成开发、浏览器加载

四、尝试简单的Demo

文本收藏扩展程序

选中一段文字，右键收藏，在扩展程序页面中可以管理收藏的内容

// manifest.json
{
  "name": "随记",
  "version": "1.0",
  "manifest_version": 3,
  "description": "收藏网页文字",
  "action": {
      "default_icon": "icon.png",
      "default_title": "随记",
      "default_popup": "popup.html"
  },
  "background": {
    "service_worker": "background.js",
    "type": "module"
  },
  "permissions": ["storage", "tabs", "contextMenus"]
}

清单文件中声明所需权限，storage、contextMenus

//1、创建contextMenus
const contextMenu = {
  id: "addAmount",
  title: "添加到随记",
  //contexts:page,video...
  contexts: ["selection"]
}
chrome.contextMenus.create(contextMenu);

//2、为contextMenus添加事件监听
chrome.contextMenus.onClicked.addListener(function (clickData) {
  const selectionText = clickData.selectionText
  if (selectionText) {
    const today = getNowFormatDate();
    // 存储收藏数据
    chrome.storage.sync.get('collectionData', function (budget) {
      let userData = budget.collectionData;
      if (userData) {
        const list = userData[today] || [];
        list.push(selectionText);
        userData[today] = list;
      } else {
        userData = {};
        userData[today] = [selectionText]
      }
      chrome.storage.sync.set({ 'collectionData': userData }, function () {
      });
    })
  }
})

function getNowFormatDate() {
  let date = new Date(),
    year = date.getFullYear(),
    month = date.getMonth() + 1,
    strDate = date.getDate();
  if (month >= 1 && month <= 9) month = '0' + month;
  if (strDate >= 0 && strDate <= 9) strDate = '0' + strDate;
  let currentdate = `${year}年${month}月${strDate}日`
  return currentdate
}

效果：

选中文本，右键打开菜单

image.png

20221012210606.jpg

20221012210550.jpg

五、实用扩展程序推荐

1. FE Helper

强烈推荐 一款强大的扩展程序系统，基本可以满足日常开发需求，内置了多种扩展程序可以按需下载。

目前支持：JSON美化工具，JSON比对工具，信息编码转换，生成二维码/解码，图片转Base64，代码美化工具，JS正则表达式，简易Postman，网页截屏工具，页面取色工具，Excel转JSON，我的便签笔记，时间(戳)转换，随机密码生成，Markdown工具，进制转换工具，颜色转换工具，Crontab工具，网页油猴工具，便捷思维导图，网页栅格标尺，代码压缩工具，网页性能检测

fehelp.png

2. OneTab：将无数Tab合并在一个页面

经常同时打开多个网页标签？切换来切换去弄得眼花缭乱，而且容易出现电脑卡顿。OneTab能帮你解决这个困扰，下载安装后只需要点击这个扩展程序，就能够把所有标签集合为一个标签。不仅瞬间让你浏览器整洁无暇，还能节省 95% 的内存！

3. 截图工具：Full Page Screen Capture

在日常办公过程中，电脑截图这个事恐怕是很难避免了，最基本的方法就是使用”PrtScr“键。若有截长图的需求，只能寻找专门的截图软件，但其实chrome的Full Page Screen Capture扩展程序已经实现了这项功能。

4. 广告屏蔽：Adblock Plus

现在网页上的广告实在太多了，应付广告页面花费了我们大量时间。所以，像Adblock Plus这种广告屏蔽工具就出现了，安装好Adblock Plus之后在浏览器右上角会出现一个红色的小图标，同时会弹出一个新的标签页对Adblock Plus进行基本的说明。

参考

谷歌开发文档

avatar
文章
阅读
粉丝