怎么制作网页插件 第1篇
在应用商店中下载下来的插件基本上都是以.crx为文件后缀，该文件其实就是一个压缩包，包括插件所需要的html、css、javascript、图片资源等等文件。
下图是FEHelper的插件包解压后的文件，
其中，
一般来说，清单文件文件是必须的，且必须放在插件开发目录的根目录上。其他的目录都可以自定义。
这个插件安装好的用户界面如下图，
而这些页面其实就是我们之前看到的template中的模板文件。
怎么制作网页插件 第2篇
chrome插件一般有两种用户界面，一种是浏览器按钮，一种是页面地址栏按钮。前者称之为Browser Actions，后者被称之为Page Actions。
这是page actions：
这是browser actions：
Page Actions 与 Browser Actions 的区别就是 Page Actions 并不是在每个页面上都是有用的，它必须在特定的页面中插件功能才能使用。
这两种用户面界面分别对应中的browser_action和page_action字段。
怎么制作网页插件 第3篇
编写文件是创建插件的之一步，以下是一个简单的示例：
```json
manifest_version: 3,
name: My Custom Plugin,
version: ,
description: A simple plugin to demonstrate custom functionality.,
permissions: [storage, activeTab],
background: {
service_worker:
},
action: {
default_popup: ,
default_icon: {
16: icons/,
48: icons/,
128: icons/
}
}
```
通过这个基础的文件结构，我们可以开始构建插件的核心功能。
怎么制作网页插件 第4篇
开发移动端的同学往往需要多个设备来会测试，市面上的二维码生成对于长链接生成的二维码密度过于密集，所以想实现一个可以生成短链的插件，帮助我们能直接访问链接或者文本。
生成二维码/生成短链接
根据浏览器指纹- 生成动态短链(10分钟有效)
定时10分钟删除短链数据
短链响应二维码内容，如果是链接那就302，如果不是直接body展示
二维码插件源码地址，需要的欢迎star：
怎么制作网页插件 第5篇
开发浏览器插件对开发者最基础要求为能够使用html、css、javascript。如果想要进一步学习如何使用框架开发的话需要开发者熟悉react开发。
Chrome 插件由不同的部件构造而成，包括：后台脚本、内容脚本、选项页、UI 元素以及各种逻辑文件。
参考文档：
所有的浏览器插件必须在根目录下新建文件清单记录重要的元数据，定义资源，声明权限，并标识哪些文件在后台和页面上运行。这是插件的配置文件，说明了插件的各种信息；它的作用等同于小程序的和前端项目的。
service worker作用是处理和监听浏览器事件，相当于是在后台持续运行的脚本，可以使用浏览器的全部api；但是不能和页面内容直接交互。
content scripts是在网页上执行的javascript，可以读取和修改网页上的dom元素，但只能使用部分的浏览器api，具体请见：content scripts。
所有的插件页面都可以使用浏览器api。
具体配置请参考文档manifest
常用的配置如下：
我们在项目中创建一个最简单的配置文件，manifest 描述插件的元数据，包括插件名、描述以及版本等等：
为方便插件调试，Chrome在开发模式下，支持加载未打包的插件。只需指定插件的开发目录（包含manifest）即可完成加载，关键步骤如下：
打开插件管理页面，直接点这个访问这个链接即可：chrome://extensions；