怎么制作网页插件 第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;