市面上浏览器有很多，比如 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
{
name: "插件集";
}
-
version
"version": "1""version": "1.0""version": "2.10.2""version": "3.1.2.4567"
version 字段也是版本自动更新的依据，浏览器会自动比较已经安装的插件版本和线上版本是否一样，如何线上版本高于已安装版本，插件将会从 update_url 配置的地址中重新拉取最新代码，从而达到自动更新的目的。
-
manifest_version
{ "manifest_version": 2}
学习完 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.com/courses/3484/logo.png
完善后的插件面板如下所示，需要注意的是，在每次修改代码都需要点击刷新按钮进行插件刷新。
为了让课程更加的与时俱进，课程代码全部使用 Vue 3 新语法来编写，让大家在学习浏览器插件开发的同时，也掌握了 Vue 3 的新特性，提高自己的核心竞争力。
你将学到：
课程大纲：
课程地址：
https://www.lanqiao.cn/courses/3484
👇👇👇 点击文末的「阅读原文」，开始我们的浏览器插件开发之旅吧！
本文始发于微信公众号（蓝桥云课精选）：开发一个 Chrome 浏览器插件，拢共分几步？
- 左青龙
- 微信扫一扫
-
- 右白虎
- 微信扫一扫
-
评论