过滤分享的Chrome扩展开发详解

简介: 明确需求 扩展的功能在前文《眼不见为净——过滤人人网分享的chrome扩展》中已做了介绍:把人人网中一些带有“不分享就如何如何”等诅咒信息的标题给屏蔽掉,眼不见为净!描述得更详细些就是: 过滤功能只在人人网域名(http://*.renren.com/*)下启用; 只有访问人人网时,扩展的图标才显示; 好友的分享信息会出现在很多地方(如好友主页、新鲜事、分享主页等),这些都要过滤;

明确需求

扩展的功能在前文《眼不见为净——过滤人人网分享的chrome扩展》中已做了介绍:把人人网中一些带有“不分享就如何如何”等诅咒信息的标题给屏蔽掉,眼不见为净!描述得更详细些就是:

  1. 过滤功能只在人人网域名(http://*.renren.com/*)下启用;
  2. 只有访问人人网时,扩展的图标才显示;
  3. 好友的分享信息会出现在很多地方(如好友主页、新鲜事、分享主页等),这些都要过滤;
  4. 我只是不想看到那些讨厌的标题,但分享的视频、图片等还是想看的。

其中(4)是核心功能,(2)可有可无。

Chrome扩展简介

Chrome扩展的主页是:http://code.google.com/chrome/extensions/index.html。在此我只简单地介绍一下和本扩展相关的内容,更详细的信息请访问其主页。在本扩展中一共只有六个文件,其中三个是图片文件(用于图标),其他三个文件大小都不到1KB,所以无需“多事”把所谓的源码上传,直接把那几行代码贴到文章中即可。下面逐一介绍六个文件:

图标文件

图标文件有三个尺寸,都是由同一张图片修改而成。我没什么艺术细胞,原始图片的作者并不是我,只是觉得蛮符合这个扩展的主题,呵呵。如果您知道它的作者请给我留言,或者有志同道合的朋友帮忙贡献一张新图标,在此谢过!

  1. icon19.png:大小为19x19,用于地址栏中显示;
  2. icon48.png:大小为48x48,在Chrome的扩展管理页面(chrome://extensions)中显示;
  3. icon128.png:大小为128x128,安装此扩展时显示。

原始图片:

manifest.json

这个Chrome扩展的配置文件,用JSON(JavaScript Object Notation)来描述与扩展相关的信息,完整介绍请访问:http://code.google.com/chrome/extensions/manifest.html。本扩展的配置信息如下:

前面五项比较简单,顾名思义,分别是扩展的“名称”、“版本号”、“描述”、“图标”以及“背景页面”。在本扩展中“背景页面”用于实现功能(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

这部分是核心功能,我使用的模式(reg)非常简单:检查是否包含“不分享”三个字。大家可以照葫芦画瓢添加其他模式。

人人网中分享标题分别使用“span”标签(新鲜事中)、“h4”等标题标签(分享主页)以及“a”超链接标签(好友主页)。我们需要通过DOM逐一获取,此处以“span”标签为例:获取页面中所有的“span”元素,删除它们的子标签,用模式“reg”测试,如果成功就用文本“msg”替换。其他标签依此类推。

另外一个需要注意的地方:字符编码。人人网页面采用UTF-8编码,这对匹配中文会有影响,因此在保存filter.js这个文件时,需要将字符编码设为UTF-8(默认ANSI),否则将匹配失败。

剩下的第一行特别引人注目,这不是一个标准的JavaScript方法,而是Chrome提供的API。它向扩展发送了一个请求,此请求可被“background.html”中的脚步捕捉。Chrome扩展就是通过发送和捕捉请求来通信的。

background.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

目录
相关文章
|
6月前
|
Web App开发 JavaScript 前端开发
使用vue快速开发一个带弹窗的Chrome插件
使用vue快速开发一个带弹窗的Chrome插件
236 0
使用vue快速开发一个带弹窗的Chrome插件
|
6月前
|
Web App开发 人工智能 自然语言处理
谷歌公布 2023 年最受欢迎Chrome扩展
谷歌公布 2023 年最受欢迎Chrome扩展
|
6月前
|
Web App开发 JavaScript 前端开发
chrome调试秘籍,让你的开发速度飞起来
chrome调试秘籍,让你的开发速度飞起来
|
19天前
|
Web App开发 Windows
win 快捷键大全,虚拟窗口、桌面等操作细节,可以使界面整洁,分类工作;Chrome快捷键,都是一些开发的骚操作
这篇文章提供了Windows操作系统和Chrome浏览器的快捷键大全,以及Xshell的快捷键操作,旨在帮助用户提高工作效率和界面管理。
86 2
|
19天前
|
Web App开发 JSON JavaScript
vue学习:chrome 中 vuetools 开发插件 的下载、安装
这篇文章介绍了如何在Chrome浏览器中下载、安装并测试Vue.js开发插件——vue-devtools。
112 0
vue学习:chrome 中 vuetools 开发插件 的下载、安装
|
3月前
|
Web App开发 存储 前端开发
《Chrome谷歌插件Top10》开发最好用的谷歌插件
本文介绍了多个实用的浏览器插件及其安装方法。包括CSDN浏览器助手,提供高效开发工具;FeHelper,前端必备工具,支持格式化、压缩等功能;uBlock Origin,有效屏蔽广告和弹窗;PageLiner,网页标尺工具,便于前端设计;Fatkun,批量下载图片;Smallpdf,文件转换工具;Octotree,GitHub代码树插件;Awesome Screenshot,截图与录屏工具;ColorZilla,颜色拾取器;Dark Reader,暗黑模式阅读插件。安装方式有通过Chrome商店搜索或下载crx插件本地安装。
62 11
|
3月前
|
Web App开发 JSON 安全
【跨域难题终结者】:一键解锁Chrome浏览器神秘设置,彻底告别开发阶段的跨域烦恼!
【8月更文挑战第20天】跨域是前端开发常遇难题,尤其在前后端分离项目中。浏览器因安全考量会阻止不同源间的请求。本文对比CORS、JSONP、代理服务器等解法,并介绍开发阶段通过调整Chrome设置来临时禁用跨域限制的方法,提供启动Chrome及使用`fetch`API示例,适合快速测试。但请注意这不适用于生产环境,存在一定安全风险。
591 1
|
3月前
|
Web App开发 前端开发 JavaScript
手摸手教你,从0到1开发一个Chrome浏览器插件
开发 Chrome 插件既有趣又具成就感。本教程将引导你从零开始,逐步创建一个简单的 Chrome 插件。首先了解 Chrome 插件是可增强浏览器功能的小程序。以一个基础示例开始,你将学习如何设置开发环境,包括安装 Chrome 和准备文本编辑器,并掌握 HTML、CSS 和 JavaScript 的基础知识。接着,我们将构建插件的基本结构,涉及 `manifest.json` 配置文件、`background.js` 后台脚本、`popup.html` 用户界面以及 `style.css` 样式表。
290 8
|
4月前
|
Web App开发 前端开发 Java
通过设置 Chrome 解决开发调用跨域问题
通过设置 Chrome 解决开发调用跨域问题
1111 7
|
5月前
|
存储 Web App开发 JSON
【Chrome插件】如何在Chrome插件开发中处理复杂数据结构的存储?
在Chrome插件开发中,遇到问题:存储包含Map和数组的复杂数据结构到`chrome.storage.local`时,读取为空。原因在于`chrome.storage.local`只支持JSON序列化,而Map无法直接序列化。解决方案是使用`serializeMap`和`deserializeMap`方法将Map转换为数组进行存储和读取。更新的`saveMindData`和`getMindData`方法实现了数据的正确序列化和反序列化。
116 5