chrome/edge浏览器插件开发入门与加载使用

同学们可以私信我加入学习群！

---

---

前言

chrome插件的出现，初衷可能是为了方便用户更好地控制浏览器，只是经过漫长的发展，如今已经出现各种骚操作与黑科技。

有了插件，可以说人操作浏览器的动作，都可以通过代码来自动化实现。

比如大学那些无聊的网课，可以通过插件来刷新页面；某些网站无聊的问答，可以通过插件+AI的方式自动回复；某些网站的自动签到，可以通过插件自动打开页面+签到；浏览器屏蔽广告……本系列所有工具，都可通过博主的个人主页:https://lizetoolbox.top:8080/#/qrCode_contact来获取。

具体能实现什么，需要同学们自行探索，说的太多，我就从一个分享者，变成可刑之路的引领人。

其实很多同学的基础知识扎实，上手插件开发可能只需要十分钟，但是因为缺乏这方面的了解，而感觉它很神秘。类似的还有爬虫、各类脚本……心疼那些花钱学这些的同学一秒钟。

一、插件与普通前端项目

学习插件开发前，我们先看一下普通的前端项目，以vue为例，最终打包后的目录是什么样的：

dist就是打包后的目录，对前端有所了解的同学都知道，把dist部署到Nginx或者tomcat中，就可以作为一个web站点运行了。

它里面有assets、img、favicon.ico、index.html四个部分。其中img文件夹、favicon.ico都是和我业务相关的文件，如果你是最干净的vue项目，不一定有这些文件，所以每个同学都会遇到，真正基础的文件只有两个：

• assets
• index.html
  有HTML基础的同学看到这里就会感觉很熟悉了，这不就是一个最简单的html页面吗，html文件只有一个：index.html，所有的js、css文件都放在assets中，html中通过标签，写入js和css，index的代码如下：
  
  其中

  <script type="module" crossorigin src="/assets/index-BywMMX96.js"></script><link rel="stylesheet" crossorigin href="/assets/index-sDuVFabf.css">

就是在引入assets中的js和css。

上面就是一个最简单的vue项目打包编译后的代码结构。不管你是通过什么方式开发前端，最终得到的都是类似关系的HTML、css、js文件，这三类文件组成了前端的基础。

可能有同学会有疑惑，文章不是要讲解chrome插件吗，为什么花这么大篇幅介绍前端？

因为chrome插件就是99%的前端+1%的配置，简而言之就是，chrome插件就是在一个完整的前端项目中，写入一个描述chrome插件的配置文件。最终的文件结构如下：

对比普通前端的文件结构，我们就会发现，上面的图片和普通前端项目，最重要的不同就是多了个manifest.json。

二、开发插件——manifest.json

既然我们已经知道关键文件就是manifest.json，那我们研究一下这个文件，基本就学会了chrome插件开发的大部分知识，文件内的代码如下：

{"manifest_version": 2,"name": "中二少年工具箱","version": "1.0","description": "中二少年学编程开发的工具箱，微信公众号【前端系列教程】，微信小程序【中二少年工具箱】，csdn/掘金/知乎【中二少年学编程】","browser_action": {"default_icon": {"132": "log.ico"},"default_title": "中二少年学编程","default_popup": "index.html"},"permissions": ["storage","tabs"],"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}

上面是我开发的插件配置，大部分配置，相信大家看示例就能猜到用途。这里简单讲解其中比较重要的几个：

• manifest_version ：扩展的清单版本号，一般是一个整数，按照开发其它软件的经验，这个应该会在自动升级时被获取，我的插件一般都是离线版并未上架商城，所以我对这个没有深入研究。
• name:插件名称
• description：对插件的描述
• default_icon：插件的图标，这个注意路径，如果没有特殊情况，最好就放在根目录下，和index.html同级
• default_title:插件在浏览器中显示的名称。
  
• permissions：插件的权限，按我上面配置，就是指插件可以操作浏览器的缓存和标签页。
• content_security_policy：插件的安全策略，类比于普通前端项目设置在index.html页面的meta标签，这里有没有效果其实我还没有测试。

上面就是插件配置的所有内容，只要大家在自己index.html页面同级目录，放入上面的配置文件，那么就可以把我们的前端项目，变成一个插件了。

三、插件使用

以谷歌和edge浏览器为例，其它浏览器插件使用和开发，请自行探索。

edge浏览器中使用/加载插件

edge浏览器的扩展通过打开浏览器右上角的设置对话框，就可以快速找到：

当然，也可以直接在浏览器的地址栏输入地址：edge://extensions/
最终打开的页面如下：

可以看出，上面的只显示了我们浏览器中存在的插件，但是没有添加插件的入口。这时候打开左侧开发人员模式，打开后，页面就会出现“加载插件”按钮：

点击加载解压缩的扩展，选择我们刚才的dist文件夹：

最终在扩展列表，会出现我们的插件：

直接在当前页面，就可以看到扩展对话框中存在我们的插件了：

chrome浏览器中使用/加载插件

chrome浏览器与edge浏览器的内核都是chrome内核，所以插件完全兼容，加载、使用方式也大同小异。

打开扩展程序：

或者在地址栏输入：chrome://extensions/

打开后的页面，类似于edge浏览器：

只要打开右上角的开发者模式，就会出现对应的加载插件按钮。

然后参考上面edge浏览器的操作，加载插件即可。

---

总结

大家如果需要联系博主，或者获取博主各系列文章对应的资源，可以通过中二少年学编程的个人主页来获取。

浏览器插件功能会形成一个系列，后续会有各类浏览器插件免费提供给大家使用，有定制需求的小伙伴可以私信博主，反正免费的，来薅一波羊毛吧！