写一个Chrome浏览器插件
共 3833字,需浏览 8分钟
·
2024-11-18 15:38
一、什么是浏览器插件
二、浏览器插件有哪些种类
三、插件目录介绍
a的文件名 | 文件介绍 |
---|---|
manifest | 核心配置文件,配置插件平台版本、名称、权限、Aicon、Api权限、host权限等。 |
popup.html | 插件弹出页面,原生html、css页面。 |
popup.js | 插件页面的脚本文件。 |
popup.css | 插件页面的样式文件 |
background.js | 后台文件,可以监听浏览器事件,在浏览器后台持续运行。 |
content.js | 插入到页面中的js脚本,可以监听DOM事件,操作DOM元素。 |
四、开始写一个插件
1. 配置manifest。
以下是一个基础的manifest配置
2. 写一个插件的弹框界面popup.html
和写html页面一样,在body里面写元素,但是需要注意样式文件popup.css和脚本文件popup.js需要外部引入。
3. 写一个插件弹框界面的样式文件popup.css。
4. 写一个插件弹框界面的脚本文件popup.js。
脚本文件的主要作用在于响应插件弹窗的行为事件,并发送消息给内容脚本或者后台脚本。
以下代码是在popup.js中,监听id为tag元素的点击事件,获取当前窗口active标签页,并给此标签页推送一个message。
4. 写一个插件的内容脚本content.js
content.js会被插入到网页环境中,用于监听浏览器事件,读取和操作DOM元素。
以下代码是监听页面load事件,和接收来自第三步中send的message。
window.addEventListener("load", function () {
// 监听页面load事件
})
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
console.log("-----------");
if (request.greeting === "tag") {
console.log(request.greeting)
}
});
5. 写一个插件的后台脚本background.js
后台脚本会在浏览器窗口打开期间持续运行,监听浏览器事件,网络请求等。
以下代码是浏览器屏蔽漏某些url请求的实现。
把上述的几个文件创建完成之后就实现了一个简单的插件,然后直接安装到浏览器扩展即可。
五、解释几个消息发送和接收的Api
1. 获取指定的浏览器标签页:
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {})
2. 向指定标签页中的内容脚本发送一条消息,其中包含在发送回响应时运行的可选回调函数。在当前扩展程序的指定标签页中运行的每个内容脚本中都会触发 runtime.onMessage 事件。
chrome.tabs.sendMessage(tabs[0].id, { greeting: "tag-remove" }, function (response) { console.log(response); });
3. 向扩展程序或其他扩展程序/应用中的事件监听器发送一条消息。请注意,扩展程序无法使用此方法向内容脚本发送消息。如需向内容脚本发送消息,请使用
chrome.runtime.sendMessage( extensionId?: string, message: any, options?: object, callback?: function,)
4. onMessage,通过扩展程序进程(通过 runtime.sendMessage
)或内容脚本(通过 tabs.sendMessage
)发送消息时触发。
chrome.runtime.onMessage.addListener( callback: function,)
想了解其他浏览器插件Api,请点击跳转
六、接下来让我们丰富插件的能力
1. 实时删除页面上的元素,我们经常会遇到一些烦人的广告,删掉他。广告一般都是有固定的元素节点的,找到元素节点的class或者id,按以下处理。
2. 有人不习惯点开右上角插件再点击功能按钮,怎么办呢,简单,给浏览器右键菜单添加快捷键。
3. 还是拦截广告,广告可能出现在iframe中,但是呢我不想使用删除DOM的方式,怎么办呢,那就直接拦截网络请求。
5. 标记页面文本
七、参考文档
评论