过滤分享的Chrome扩展开发详解
明确需求
扩展的功能在前文《眼不见为净——过滤人人网分享的chrome扩展》中已做了介绍:把人人网中一些带有“不分享就如何如何”等诅咒信息的标题给屏蔽掉,眼不见为净!描述得更详细些就是:
- 过滤功能只在人人网域名(http://*.renren.com/*)下启用;
- 只有访问人人网时,扩展的图标才显示;
- 好友的分享信息会出现在很多地方(如好友主页、新鲜事、分享主页等),这些都要过滤;
- 我只是不想看到那些讨厌的标题,但分享的视频、图片等还是想看的。
其中(4)是核心功能,(2)可有可无。
Chrome扩展简介
Chrome扩展的主页是:http://code.google.com/chrome/extensions/index.html。在此我只简单地介绍一下和本扩展相关的内容,更详细的信息请访问其主页。在本扩展中一共只有六个文件,其中三个是图片文件(用于图标),其他三个文件大小都不到1KB,所以无需“多事”把所谓的源码上传,直接把那几行代码贴到文章中即可。下面逐一介绍六个文件:
图标文件
图标文件有三个尺寸,都是由同一张图片修改而成。我没什么艺术细胞,原始图片的作者并不是我,只是觉得蛮符合这个扩展的主题,呵呵。如果您知道它的作者请给我留言,或者有志同道合的朋友帮忙贡献一张新图标,在此谢过!
- icon19.png:大小为19x19,用于地址栏中显示;
- icon48.png:大小为48x48,在Chrome的扩展管理页面(chrome://extensions)中显示;
- icon128.png:大小为128x128,安装此扩展时显示。
原始图片:
manifest.json
这个Chrome扩展的配置文件,用JSON(JavaScript Object Notation)来描述与扩展相关的信息,完整介绍请访问:http://code.google.com/chrome/extensions/manifest.html。本扩展的配置信息如下:
{ "name": "FRRS", "version": "0.2.3", "description": "FRRS", "icons": { "48": "icon48.png", "128": "icon128.png" }, "background_page": "background.html", "page_action": { "default_icon": "icon19.png", "default_title": "FRRS" }, "content_scripts": [ { "matches": ["http://*.renren.com/*"], "js": ["filter.js"], "run_at": "document_end" } ] }
前面五项比较简单,顾名思义,分别是扩展的“名称”、“版本号”、“描述”、“图标”以及“背景页面”。在本扩展中“背景页面”用于实现功能(2),详细内容会在下文介绍。
“page_action”是声明页面信息(本例中包含标题和图标),与之对应的是“browser_action”(本例中没有使用)。当你的扩展与页面无关时用“browser_action”,此时图标会一直显示在工具栏中;而像本例中,扩展只是针对某些特点的页面(人人网)则使用“page_action”,此时图标显示在地址栏中,并且默认是不显示的(功能2)。
至于这个扩展具体作用于哪些页面,则需要在“content_scripts”里指定,其中元素“matches”用于匹配URL(详细内容参见http://code.google.com/chrome/extensions/match_patterns.html)、“js”用于指定具体的动作、“run_at”用于指定脚步运行的时间。本例中指定了,当前页面的URL与“http://*.renren.com/*”匹配时(功能1),并且在页面加载完成后,执行“filter.js”里的脚步。
filter.js
// show icon chrome.extension.sendRequest(); // pattern var reg = new RegExp('[^>]*不分享[^<]*', 'g'); var msg = 'redraiment提醒您:此信息中可能含有另您不愉快的内容,眼不见心不烦。'; // filter span var spans = document.getElementsByTagName('span'); for (var s = 0; s < spans.length; s++) { var context = spans[s].innerHTML.replace(/<[^>]+>/g, ''); if (reg.test(context)) { spans[s].innerHTML = msg; } } // filter heads // ... // filter href // ...
这部分是核心功能,我使用的模式(reg)非常简单:检查是否包含“不分享”三个字。大家可以照葫芦画瓢添加其他模式。
人人网中分享标题分别使用“span”标签(新鲜事中)、“h4”等标题标签(分享主页)以及“a”超链接标签(好友主页)。我们需要通过DOM逐一获取,此处以“span”标签为例:获取页面中所有的“span”元素,删除它们的子标签,用模式“reg”测试,如果成功就用文本“msg”替换。其他标签依此类推。
另外一个需要注意的地方:字符编码。人人网页面采用UTF-8编码,这对匹配中文会有影响,因此在保存filter.js这个文件时,需要将字符编码设为UTF-8(默认ANSI),否则将匹配失败。
剩下的第一行特别引人注目,这不是一个标准的JavaScript方法,而是Chrome提供的API。它向扩展发送了一个请求,此请求可被“background.html”中的脚步捕捉。Chrome扩展就是通过发送和捕捉请求来通信的。
background.html
<html> <head> <script> chrome.extension.onRequest.addListener( function(request, sender, sendResponse) { chrome.pageAction.show(sender.tab.id); } ); </script> </head> </html>
脚步中添加了一个监听器,当捕捉到“filter.js”发送的消息时就显示图标。
我想大家肯定会问,为什么不直接在“filter.js”里执行“chrome.pageAction.show()”来显示图标,干嘛这么多事要发送一个请求?这是Chrome扩展的限制,Chrome的所有API请参看:http://code.google.com/chrome/extensions/api_index.html,但“content_script”里指定的脚步只能使用部分API(显示图标这个API就不在其中),而“background_page”里可以调用所以API,因此只能通过这种方式来实现。
其他
扩展开发好了,至于如何发布使用,请参见Chrome扩展开发的“Hello World”:http://code.google.com/chrome/extensions/getstarted.html。
版权声明
请尊重原创作品。转载请保持文章完整性,并以超链接形式注明原始作者“redraiment”和主站点地址,方便其他朋友提问和指正。
联系方式
我的邮箱,欢迎来信(redraiment@gmail.com)
我的Blogger(子清行):http://redraiment.blogspot.com/
我的Google Sites(子清行):https://sites.google.com/site/redraiment
我的CSDN博客(梦婷轩):http://blog.csdn.net/redraiment
我的百度空间(梦婷轩):http://hi.baidu.com/redraiment
相关文章
- 在 Go 里用 CGO?这 7 个问题你要关注!
- 9款优秀的去中心化通讯软件 Matrix 的客户端
- 求职数据分析,项目经验该怎么写
- 在OKR中,我看到了数据驱动业务的未来
- 火山引擎云原生大数据在金融行业的实践
- OpenHarmony富设备移植指南(二)—从postmarketOS获取移植资源
- 《数据成熟度指数》报告:64%的企业领袖认为大多数员工“不懂数据”
- OpenHarmony 小型系统兼容性测试指南
- 肯睿中国(Cloudera):2023年企业数字战略三大趋势预测
- 适用于 Linux 的十大命令行游戏
- GNOME 截图工具的新旧截图方式
- System76 即将推出的 COSMIC 桌面正在酝酿大变化
- 2GB 内存 8GB 存储即可流畅运行,Windows 11 极致精简版系统 Tiny11 发布
- 迎接 ecode:一个即将推出的具有全新图形用户界面框架的现代、轻量级代码编辑器
- loongarch架构介绍(三)—地址翻译
- Go 语言怎么解决编译器错误“err is shadowed during return”?
- 敏捷:可能被开发人员遗忘的部分
- Denodo预测2023年数据管理和分析的未来
- 利用数据推动可持续发展
- 在 Vue3 中实现 React 原生 Hooks(useState、useEffect),深入理解 React Hooks 的