插件入门

谷歌浏览器扩展程序，俗称 - 谷歌插件

只要是使用谷歌内核的浏览器都是可以使用的。

谷歌浏览器（Google Chrome）的扩展程序可以增加浏览器的功能性，它们是独立的小程序，可以改变浏览器的外观、拦截广告、帮助用户自动填写表单、提供临时邮箱服务、密码管理、自动翻译网页、提供新标签页的定制内容等。

它可以完成很多 web 前端很多无法做到的事情，可以调用一些列的系统级别的 api , 对很多一些已经上线的三方前端应用做劫持和修改。其强大能力不多细说了。

你的第一个浏览器扩展程序

直接上干货

在根目录新建 manifest.json 的新文件。此 JSON 文件描述了扩展程序的功能和配置。例如，大多数清单文件包含一个 "action" 键，用于声明 Chrome 应用作扩展程序的操作图标的图片，以及当用户点击扩展程序的操作图标时在弹出式窗口中显示的 HTML 页面。

manifest.json 配置

{
  "manifest_version": 3,
  "name": "Hello Extensions of the world",
  "description": "hello world",
  "version": "1.0",
  "action": {
    "default_popup": "hello.html",
    "default_icon": "icon.png"
  }
}

这里先简单说几个必填字段的含义

下面是一个表格，简要说明了您提供的manifest.json文件中每个键的含义：

Key	含义
`manifest_version`	声明该清单文件使用的版本。当前，Chrome 扩展程序支持`2`和`3`两个版本的清单。这里使用的是版本`3`。
`name`	扩展程序的名称，将显示在 Chrome 扩展程序商店和工具栏上。
`description`	扩展程序的简短描述，通常会显示在扩展程序详情页面上。
`version`	扩展程序的版本号。
`action`	配置扩展程序的行为（manifest_version: 2）。在 manifest_version: 3 中通常使用`action`去定义浏览器动作和页面动作。
`action.default_popup`	为浏览器操作按钮定义弹出内容的 HTML 文件名。当用户点击工具栏上该扩展的图标时，会显示这个 HTML 页面。
`action.default_icon`	定义扩展程序在工具栏上显示的图标。支持多种尺寸，确保扩展在不同大小的工具栏上都具有合适显示效果。

请注意，自manifest_version 3起没有browser_action或page_action的区别。取而代之的是统一使用action，且不再指定特定的类型。此外，manifest.json 3 版本中也使用了许多新的概念和 API，因此如果需要详细的信息，建议参考 Google Chrome 扩展开发文档。

htmml + icon

default_popup 是描述插件点击之后的界面， default_icon 就是插件的图标了。

直接防止在 manifest.json 同级目录就可以。当然也可以配置相对路径。

这里关于 icon 最好在做一下多场景 icon 配置

{
  "manifest_version": 3,
  "name": "Hello Extensions of the world",
  "description": "hello world",
  "version": "1.0",
  "action": {
    "default_popup": "hello.html",
    "default_icon": "icon.png"
  },
  "icons": {
    "16": "icon.png",
    "32": "icon.png",
    "48": "icon.png",
    "128": "icon.png"
  }
}

不同数字倍数的 icon 可以放不同的倍图，而且都会根据倍数，显示在不同的位置

图标大小	图标的使用场景
16x16	扩展程序页面和上下文菜单上的网站图标
32x32	Windows 计算机通常需要此大小
48x48	显示在“扩展程序”页面上
128x128	安装时会显示在 Chrome 应用商店中

关于 html

这个就没啥好说的。

直接上 html 片段即可，可以在 html 里面插入 JS 和 CSS 代码

hello.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Hello World with Extensions - 晴小篆</h1>
    <p>我想测试一下中文可以输入吗？</p>
    <script src="popup.js"></script>
  </body>
</html>

popup.js

console.log("hello world");

在浏览器扩展中运行你的插件程序

在浏览器中访问 chrome://extensions/ , 或者访问[浏览器设置] --> [扩展程序] --> [管理扩展程序]

点击开发者模式旁边的切换开关以启用开发者模式。
点击 Load unpacked（加载解压缩）按钮，然后选择扩展程序目录。

然后你就得到你的扩展程序了。

点击你的扩展程序，即可看到你的 html popup 内容了

调试 JS

要在控制台中查看这条消息的记录，请按以下步骤操作：

打开弹出式窗口。
右键点击弹出式窗口。
选择检查。
检查弹出式窗口。

使用 TypeScript

如果您使用 VSCode 或 Atom 等代码编辑器进行开发，可以通过 npm 软件包 chrome-types 来利用 Chrome API 的自动填充功能。当 Chromium 源代码发生更改时，此 npm 软件包会自动更新。

装个包

npm init

pnpm install typescript chrome-types typescript-transform-paths

然后初始化一个 tsconfig.json

这里直接贴我的配置

{
  "ts-node": {
    "transpileOnly": true,
    "require": ["tsconfig-paths/register"]
  },
  "compilerOptions": {
    "target": "es2020",
    "module": "commonjs",
    "baseUrl": "./",
    "paths": {
      "@utils/*": ["utils/*"],
      "@src/*": ["src/*"]
    },
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}

但是记住浏览器是只能使用 JS 文件，所以编写完了 TS 文件之后，记得使用 tsc 编译成 JS 即可。

【学习篇】【01】谷歌浏览器插件入门