浏览器插件开发(一)入门之自制屏蔽某度广告的插件
一:浏览器扩展介绍:
浏览器扩展是一个小软件定义模块的网页浏览器,通常称为浏览器插件,大部分浏览器允许安装拓展,其作用有用户界面修改,广告拦截和Cookie管理等
包含基本平台信息的应用程序清单JSON文件
定义该函数的JS文件
定义用户界面的HTML和CSS文件
Edge浏览器商店:Microsoft Edge 加载项
在扩展商店我们可以搜索并下载开发者们上传到商店的一些扩展,即插件,有通用性的,合适所有网站或大部分网站,也有专用性的,适合某一类或某一个网站,具体用法在下载扩展时看扩展的详情描述就可以
二:手写一个广告屏蔽的插件
2.1 插件功能介绍
效果一:简化搜索页面
使用前
使用后,
效果二:简化搜索后的列表
使用前:
使用后:
设计思路:
大致思路:使用浏览器调试工具,查看需要删去部分元素的class属性值或id属性值,然后用JS代码根据ID获取到HTML元素,然后删除即可,这一步是写在js文件时进行的,一般是每定位一个就写一段将其删除的代码
自制插件
参照官方开发文档的教程,接下来直接开始。在本地创建一个文件夹,用来存放扩展(注意:在安装扩展后,该文件夹位置不能修改,和官方的标准项目结构不同)
我的图标是:
有了上述思路后,先把除了js脚本以外的其他文件创建好并填上内容,具体如下:
1.manifest.json 全局配置文件
Edge插件开发文档中有说每个扩展包必须在根目录中有一个mainfest.json文件。清单提供了扩展,扩展包版本,扩展名称和说明等的详细信息
这里的Edge官方提供的mainfest接口,这里作为初学者,只需要设置插件的基本信息,这里manifest_version是当前edge官方支持的版本----
manifest3。其中的 content_scripts 是比较关键的配置,用来指定插件加载的JS文件、CSS文件还有起作用的网站,这里是以正则匹配的方式进行,这样就使得插件只在某一类网站里有效,不会影响其他网站。
{ "name": "BaiduSimply", "description": "简化百度相关网站的插件", "version": "1.0", "manifest_version": 3, "action": { "default_popup": "popup.html", "default_icon": "BaiduSimply.png" }, "content_scripts": [ { "matches": ["https://www.baidu.com/*"], "js": ["main.js"], "css": ["style.css"] } ]}2. popup.html 插件显示的内容
X度广告屏蔽插件已开启 作者: 小超该HTML页面是在安装插件后显示的,Edge浏览器安装插件后,运行中的插件会在网页的地址栏右边显示,图标是自定义的,点击后显示的HTML内容也是自定义的,这里只是做一个插件在运行中的提示
3. style.css 设置插件作用网站的样式
发现有内容只需要通过css就可以直接隐藏,那么这部分内容就可以不用JS来删除,因此用CSS样式速度更快
/* 关闭X度搜索的广告 */#s_wrap, #s_top_wrap,#s-top-left, #u1, .cr-content{ display: none;}/* X度搜索结果居中 */.margin-inline-auto { margin-inline: auto;}#content_left{ width: 100%;}/* 关闭相关搜索 */#rs_new{ display: none;}/* 关闭搜索后的广告 */#content_right, #EC_result{ display: none;}4. main.js 屏蔽广告的关键JS脚本
其实屏蔽广告只需要设置CSS样式,这里的JS只是居中搜索结果,最终能达到上述的效果
function inlineResult(){ const result = document.getElementsByClassName("c-container") // 使搜索结果居中 document.getElementById("content_left").style = "width: 100%" for (let i = 0; i < result.length; i++) { result[i].classList.add("margin-inline-auto") }}window.onload = function () { inlineResult();}// 每隔一秒执行一次居中搜索结果setInterval(function(){ inlineResult();}, 1000)三:Edge浏览器安装插件
使用 Edge浏览器,菜单-扩展-打开Microsoft Edge加载项,找不到的话浏览器直接访问网址:edge://extensions/