开发一个 Chrome 浏览器插件，拢共分几步？
市面上浏览器有很多，比如 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.com/courses/3484/logo.png
完善后的插件面板如下所示，需要注意的是，在每次修改代码都需要点击刷新按钮进行插件刷新。
学习更多
以上内容出自新课《Vue.js 3 + Vite 2 开发浏览器插件集》的第一节。课程使用 Vue.js 3 + Vite 最新技术从零开始开发一款谷歌浏览器插件，学完本套课程可以让前端开发者快速了解浏览器插件的运行原理及快速上手浏览器插件开发，同时也是学习 Vue.js 3 的绝佳课程。
为了让课程更加的与时俱进，课程代码全部使用 Vue 3 新语法来编写，让大家在学习浏览器插件开发的同时，也掌握了 Vue 3 的新特性，提高自己的核心竞争力。
你将学到：
课程大纲：
课程地址：
https://www.lanqiao.cn/courses/3484
???????????? 点击文末的「阅读原文」，开始我们的浏览器插件开发之旅吧！
开发一个 Chrome 浏览器插件，拢共分几步？相关推荐
- 如何开发一个chrome浏览器插件
目录 前言 chrome扩展程序 文件结构 manifest.json html和css js 加载插件 调试 总结 前言 当前,chrome浏览器早已成为占据最大的市场份额,也是综合体验最好的浏览器 ...
- 安装Vue浏览器插件拢共分几步（保姆文章）
(据说vue3的插件也适用vue2) 一.打开极简插件网页 极简插件_Chrome扩展插件商店_优质crx应用下载 (zzzmh.cn)https://chrome.zzzmh.cn/index#/i ...
- python写chrome插件_用VueJS写一个Chrome浏览器插件
浏览器基本已经天下大统了,放眼望去都是Chromium的天下.那么,能写一个浏览器插件也算是一种回报率不错的技能. 基本知识 浏览器插件官方的说法叫扩展程序,允许你为浏览器增加各种功能,但不需要深入研 ...
- 2021年10款优质Chrome浏览器插件推荐
Chrome插件像一个个小帮手,帮我们提升效率,完成一些有价值的事情.其实有很多这样的优质实用插件,很多人并不知道它们的存在,下面就特意为大家整理10款非常有用的插件. 1.哔哩哔哩助手:B站扩展程序 ...
- 如何从零开始开发一个 Chrome 插件？
什么是浏览器插件? 简单来说浏览器插件,是浏览器上的一种工具,可以提供一些浏览器没有的功能,帮你做一些有趣的事情.开发者可以根据自己的喜欢,去实现一些功能.插件基于Web技术(html.css.js) ...
- 前端拓展：如何开发一个 Chrome 插件？
什么是浏览器插件? 简单来说浏览器插件,是浏览器上的一种工具,可以提供一些浏览器没有的功能,帮你做一些有趣的事情.开发者可以根据自己的喜欢,去实现一些功能.插件基于Web技术(html.css.js) ...
- 分享几款我在高频使用的 Chrome 浏览器插件，每一个都好用到飞起
分享几款我在高频使用的 Chrome 浏览器插件,每一个都好用到飞起 ✨博主介绍 前言 编程相关 JSON-handle Octotree - GitHub code tree 学习相关 划词翻译 M ...
- 强烈推荐 10 款珍藏的 Chrome 浏览器插件
Firebug 的年代,我是火狐(Mozilla Firefox)浏览器的死忠:但后来不知道为什么,该插件停止了开发,导致我不得不寻求一个新的网页开发工具.那段时间,不少人开始推荐 Chrome 浏览 ...
- chrome浏览器插件开发经验（一）
chrome浏览器插件开发经验(一) http://open.chrome.360.cn/extension_dev/messaging.html 最近在进行chrome浏览器插件的开发,一些小的经验 ...
最新文章
- 人工智能助力全国大学智能车竞赛
- CAS SSO 单点登录 实例
- Object.create()和Object.assign()
- mysql2008r1_mysql8 参考手册-分区修剪
- linux 7修改yum源,CentOS 7修改yum源为阿里源
- 一个数据包大小是多少k_算法交流： 6046 数据包的调度机制 【2.6基本算法之动态规划】...
- wxpython使用简介_wxpython简介
- 【转载】会议是浪费工作时间的最佳去处
- ButterKnife 8.6.0 使用
- shell错位_shell脚本出错！来大神指出错误出处！！！！
- Windows Server AppFabric
- SEO整体优化有哪些操作步骤
- 看完Jeff Dean新论文，我再也不相信大厂的鬼话了
- return true
- 阿里云大学-虚拟化技术入门-听课笔记
- 计算机组成原理：VHDL设计微程序控制器(代码通俗易懂)
- OpenCV学习常用网址
- 笔记 | 杂谈控制固定效应这件事
- 紫光全速狂飙！2019年就开始量产64层NAND闪存芯片
- 学习笔记(01):【孙伟老师UID课堂】设计师也能会的-WEB前端入门基础HTML+CSS视频教程-09综合表单标签讲解-1...