市面上浏览器有很多，比如 IE、Edge、火狐、Safari 等，但市场占有率第一的永远只有一个 —— Chrome。
之所以如此，很大一部分原因是 Chrome 丰富的插件库。我们在使用浏览器时，免不了要用到各种类型的插件，比如要管理你的网站密码，屏蔽页面广告等。利用好这些插件，能够极大地提升我们的工作效率。
有时我们找不到自己需要的插件，只能无奈作罢。但事实上，需求就意味着机会，你完全可以自己开发一个，不但可以让自己方便，还能靠出售插件带来不小的收益~
Chrome 插件的开发其实并不困难，开发语言都是前端同学非常熟悉的：HTML、CSS 和 JavaScript，再加上 Chrome 提供了大量功能强大的接口进行调用，我们能够非常简单迅速地实现一个满足自己需求的插件。
本文从最基本的开发步骤进行讲解，让你能够迅速掌握 Chrome 插件开发的基本流程。
开始之前
开发浏览器插件之前，可能你会存在这些疑问 ——
插件的代码会不会影响我原有网站代码的执行？如果插件卡顿会不会导致整个浏览器变得卡顿？
带着这些问题我们来学习浏览器的各大线程，浏览器共有 5 大进程，分别是：
浏览器主进程 （Browser）渲染进程（Render Process）网络进程（Network Process）GPU 进程（GPU Process）插件进程（Plugin Process）
需要注意的是，上面是浏览器的 5 种进程，并不是说浏览器就只有这 5 个进程，其中渲染进程和插件进程会有多个，也就是说每个插件都单独占用一个进程且和主进程独立，并且每个进程之间也是相互独立的，我们可以通过点击 Chrome 浏览器右上角的 “选项” 菜单，选择 More toors（更多工具）子菜单，点击 Task manager（任务管理器）来看各大进程运行情况。
这就很好解释上面的两个问题了，因为我们网站的 JavaScript 代码运行在主进程，而编写的插件代码运行在插件进程，主进程与插件进程相互隔离互不影响；又因为每个插件都运行在自己的进程中，所以当某个插件挂掉时是不会影响到其他插件，更不会影响到整个浏览器的运行。
关于浏览器插件
我们可以点击 Settings（设置） 进入设置页面再点击 Extensions（管理扩展程序）来进入浏览器插件管理界面，具体操作如下图所示：
学习任何一门新技术的最好办法就是做项目，必要的项目练习不仅可以加深我们对知识的理解，更可以给我们带来一定的成就感。了解完浏览器及浏览器插件基础知识后，下面我们就来了解下本课程会学习的知识及项目吧！
基本配置
在正式学习浏览器插件开发前，我们先了解一下每个插件必不可少的 Manifest 文件。每个浏览器插件都有一个 JSON 格式的文件，叫做 manifest.json，里面提供了插件的重要的信息， manifest.json 文件也是一个浏览器插件的灵魂，对于开发插件的人员来说，弄懂其中的配置可以让我们在开发插件时事半功倍。下面我们就来创建一个 manifest.json 文件吧。
manifest.json 文件本质上是一个 json 文件，json 中的每一项代表一种配置。其中有些字段是每个插件都要有的配置，分别是：
name
用来配置插件的名字，配置的内容会出现在安装对话框、扩展管理页面、和 Chrome 浏览器应用商店里面，具体配置如下：
{
name: "插件集";
}
version
用来配置插件的版本号，通常用 1 个到 4 个数字来表示，中间用点隔开，这些数字不能以 0 开头且必须在 0 到 65535 之间，比如下面这些都是合法的版本号配置。
"version": "1""version": "1.0""version": "2.10.2""version": "3.1.2.4567"
version 字段也是版本自动更新的依据，浏览器会自动比较已经安装的插件版本和线上版本是否一样，如何线上版本高于已安装版本，插件将会从 update_url 配置的地址中重新拉取最新代码，从而达到自动更新的目的。
manifest_version
用整数表示 manifest 文件自身格式的版本号，从 Chrome 18 后必须指定版本号为 2，如下所示：
{ "manifest_version": 2}
创建Minifest文件
学习完 Manifest 文件基础配置后，我们自己创建一个 manifest.json 文件吧。
新建文件夹
demo，然后新建文件manifest.json（必须叫此名称）。填写
manifest.json必要配置，如下所示：
{ "name": "demo", "version": "1.0.0", "manifest_version": 2}
新建
index.html作为插件的主页面，如下所示：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>demo</title>
</head>
<body>
demo </body></html>
把新建的
index.html在manifest.json中配置成插件入口，如下所示：
{ "name":"demo", "version":"1.0.0", "manifest_version":2, "browser_action": { "default_popup": "index.html"
}
}
现在我们已经构建出一个插件开发最小示例代码，如下所示：
安装到浏览器。在环境里，我们需要首先将
demo文件夹打包，然后下载到本地，解压后导入 Chrome 浏览器。
输入命令 zip -rqo demo.zip demo 打包，然后在文件处右键下载。
浏览器输入 chrome://extensions/ 根据上面所学到的插件安装方式，可以把解压后的 demo 文件直接拖拽到浏览器进行安装。具体步骤如下所示：
此步骤后面不再重复，务必牢记打包压缩的命令格式
zip -rqo <zip file name> <dir>。
点击浏览器右上角的插件管理按钮，可以弹出我们在
index.html写的内容，证明插件安装成功。
通过以上步骤我们已经成功开发了一个属于自己的浏览器插件，下面我们就通过配置 manifest.json 文件，来美化它吧。
字段配置
description
用于对插件的描述，不能超过 132 个字符，如下所示：
{ description: "用于插件描述";
}
icons
配置插件的图标，支持 16×16、48×48、128×128 三种尺寸，格式最好是 png，具体配置如下所示：
{ "icons":{ "16": "icon16.png", "48": "icon48.png", "128": "icon128.png"
}
}
下面我们就把这两个配置项添加到 manifest.json 上。
{ "name": "插件集", "version": "1.0.0", "manifest_version": 2, "description": "is demo", // 插件描述
"icons": { "48": "./logo.png" // 插件图标,为了方便起见只配置一个尺寸
}, "browser_action": { "default_popup": "index.html"
}
}
课程为大家提供了 Logo，可以自行获取到插件根目录。
https://labfile.oss.aliyuncs/courses/3484/logo.png
完善后的插件面板如下所示，需要注意的是，在每次修改代码都需要点击刷新按钮进行插件刷新。
学习更多
以上内容出自新课《Vue.js 3 + Vite 2 开发浏览器插件集》的第一节。课程使用 Vue.js 3 + Vite 最新技术从零开始开发一款谷歌浏览器插件，学完本套课程可以让前端开发者快速了解浏览器插件的运行原理及快速上手浏览器插件开发，同时也是学习 Vue.js 3 的绝佳课程。
为了让课程更加的与时俱进，课程代码全部使用 Vue 3 新语法来编写，让大家在学习浏览器插件开发的同时，也掌握了 Vue 3 的新特性，提高自己的核心竞争力。
你将学到：
课程大纲：
课程地址：
https://www.lanqiao/courses/3484
???????????? 点击文末的「阅读原文」，开始我们的浏览器插件开发之旅吧！
更多推荐
开发一个 Chrome 浏览器插件,拢共分几步？
发布评论