Chrome插件入门chrome插件入门一、背景关于浏览器插件小伙伴们多多少少都有所接触，开发者从常用的FeHelp

一、背景

关于浏览器插件小伙伴们多多少少都有所接触，开发者从常用的FeHelper、Postman Interceptor，到日常中使用豆包、Adblock Plus 广告拦截器，或者上班摸鱼看咨询比如掘金、hupu。你可以把浏览器比作是操作系统Linux、Windows、Android、IOS，而插件则是运行在各平台中应用。谷歌浏览器插件市场提供了各式各样的应用供大家使用，但是作为开发者我们想了解其运行机制，想自己开发可以插件呢，本篇幅主要讲解谷歌浏览器插件如何快速上手，来了解插件运行机制，那么我们现在开始吧！！！

二、插件开发基础

扩展程序术语

在开发浏览器插件前我们先了解一下几个基本术语，铺垫了解插件开发体系的整个应用架构。包括，清单、Service Worker、内容脚本、工作栏操作、侧边栏。

清单

扩展程序的清单是唯一必须具有特定文件名（即 manifest.json）的必需文件。它还必须位于扩展程序的根目录中。清单会记录重要元数据、定义资源、声明权限，并确定要在后台和网页上运行哪些文件。

最小粒度清单（manifest.json）

{
  "manifest_version": 3,
  "name": "first extension",
  "version": "1.0.0",
  "description": "最小粒度清单",
  "icons": {
    "16": "images/icon-16.png",
    "32": "images/icon-32.png",
  }
}

清单key

参数	描述
manifest_version	一个整数，用于指定扩展程序使用的清单文件格式的版本。唯一支持的值是 3
name	一个字符串，用于在 Chrome 应用商店、安装对话框和用户的“Chrome 扩展程序”页面 (chrome://extensions) 中标识扩展程序
version	用于标识扩展程序版本号的字符串，格式 x.y.z，用于更新
description	用于在 Chrome 应用商店和用户的扩展程序管理页面上描述扩展程序
icons	扩展的图标，建议提供多尺寸（16、48、128px）
action	定义扩展工具栏按钮（V3 中 browser_action 和 page_action 合并为 action）
background	定义后台脚本（V3 中必须用 service_worker）
permissions	需要的权限（如 storage、tabs、scripting）
host_permissions	访问网页的权限（URL 模式）
content_scripts	注入到网页的脚本和样式
web_accessible_resources	允许网页访问的扩展资源（V3 中必须声明）
options_page	扩展的设置页面（V2 用法，V3 推荐用 options_ui）
options_ui	扩展的设置页面（V3 推荐）
commands	定义快捷键
omnibox	定义地址栏关键字触发扩展
default_locale	默认语言（配合 _locales 文件夹实现国际化）
content_security_policy	内容安全策略（V3 默认限制更严格

Service Worker

Extension Service Worker 与 Web 扩展 Service Worker 有一些共同点。扩展 Service Worker 在需要时加载，并在其进入休眠状态时取消加载。只要扩展程序 Service Worker 在加载后还会主动接收事件，它就会运行，不过它可以关闭。与对应的 Web 应用一样，扩展 Service Worker 无法访问 DOM，不过您可以根据需要将其用于屏幕外文档。

内容脚本

内容脚本会在网页上下文中运行 JavaScript，内容脚本是在网页情境中运行的文件。借助标准文档对象模型(DOM)，它们能够读取浏览器访问的网页的详细信息、对其进行更改，并将信息传递给其父级扩展程序。

工作操作栏

在用户点击扩展程序工具栏图标时执行代码，或使用 Action API 显示弹出式窗口。

侧边栏

在浏览器的侧边栏中显示自定义界面。借助侧边栏 API，扩展程序可以在侧边栏中显示自己的界面，从而实现持久体验，为用户的浏览历程锦上添花。

创建第一个扩展程序

新建项目目录结构

best-partners-tools/                  # 项目根目录
│
├── background/                       # 存放后台脚本（Manifest V3 中是 service worker）， # 后台主脚本，处理扩展生命周期事件、消息
│
├── images/                            # 存放扩展图标（不同尺寸适配）
│
├── popup/                              # 扩展弹出页（点击扩展图标时显示）
│
├── script/                             # 内容脚本（注入到网页中执行），主内容脚本
│
├── style/                              # 样式文件
│
├── extra-script/                       # 额外的构建/辅助脚本
│   ├── generate-icons.js               # 自动生成不同尺寸图标的脚本
│
├── manifest.json                       # Chrome 扩展配置文件（必需）
│
└── package.json                        # 如果使用 npm/yarn 管理依赖

添加浏览器插件图标

在extra-script目录中添加generate-icons.js生成浏览器插件图标的脚本
通过node generate-icons.js或者npx node generate-icons.js来运行生成脚本
运行完成以后会在images目录中生成16、32、48、128尺寸的图标用于测试使用

// 这里主要是生成浏览器插件的图标
// 使用 sharp 库来处理 SVG 图标并生成不同尺寸的 PNG 图标
// 需要先安装 sharp 库：npm install sharp
// 注意：此脚本需要在 Node.js 环境中运行
// node generate-icons.js 或者 npx node generate-icons.js
const sharp = require("sharp");

const svgCode = `
<svg width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
  <rect width="128" height="128" rx="20" fill="#1E88E5"/>
  <circle cx="64" cy="64" r="50" fill="#ffffff" opacity="0.1"/>
  <path d="M40 70 L55 55 L73 73 L88 58" stroke="#fff" stroke-width="6" fill="none" stroke-linecap="round"/>
  <path d="M78 40 l10 10 l-20 20 l-10 -10 z" fill="#FF9800"/>
  <circle cx="64" cy="64" r="4" fill="#FF9800"/>
</svg>
`;

const sizes = [16, 32, 48, 128];

(async () => {
  for (const size of sizes) {
    await sharp(Buffer.from(svgCode))
      .resize(size, size)
      .png()
      .toFile(`./images/icon${size}.png`);
    console.log(`✅ 生成 icon${size}.png`);
  }
})();

添加popup弹出页面

popup目录中添加popup.html文件

<html>
  <body>
    <h1>Best Partners Tools</h1>
  </body>
</html>

补充清单文件manifest.json

{
  "manifest_version": 3,
  "name": "Best Partners Tools",
  "version": "1.0.0",
  "description": "chrome extension for Best Partners",
  "action": {
    "default_popup": "popup/popup.html",
    "default_icon": {
      "16": "images/icon16.png",
      "32": "images/icon32.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  },
}