摘要：我的扩展是专门用于知乎网站的，因此选择了来处理。在文件中进行如下设置知乎屏蔽扩展在中指定域可以使扩展常驻后台。由于注入到了知乎页面，而存放在扩展的域下，要在中获得关键词的值，就必须用到页面中的通信。
本文原发在我的博客。
前段时间电影《疯狂动物城》上映了，然后我的知乎首页就被它刷屏了。虽然我对这部电影没有任何意见，但作为一个还没去电影院看过的人来说，每看到相关问题一次都是无情的剧透，于是我毅然屏蔽了“疯狂动物园”这个话题。本以为问题解决了，但是接下来我又被迫看到这个问题：
问题上添加的五个话题无一命中，我又被剧透了一脸。算了，既然知乎的屏蔽规则靠不住，那就自己动手吧。这样我的Chrome浏览器扩展——ZhihuFilter就诞生了，点击这里查看Github上的项目。
扩展功能其实扩展的功能很简单，当打开知乎首页后，扩展会依次检查你的屏蔽关键词列表是否出现在了某一个答案中，如果出现了，就会把这个答案隐藏，取而代之的是提示信息和一个展开答案的按钮。效果如下图所示：
你可以点击图中的按钮来查看答案，之后可以选择再次隐藏或展开。
当你安装了扩展后，会在地址栏的右侧显示出图标
点击图标后，将会出现设置屏蔽词的界面
你可以在这个页面中设置你想屏蔽的词语。
关于Chrome扩展的开发关于Chrome扩展开发的内容，可以查看Google的官方文档或者是这个教程。
一个应用（扩展）其实是压缩在一起的一组文件，包括HTML，CSS，Javascript脚本，图片文件，还有其它任何需要的文件。
开发扩展的时候，必不可少的是一个manifest.json文件，这是一个配置文件，会告诉Chrome你的扩展中包含了哪些内容。manifest.json中包含扩展的名字、版本及各种资源文件（如图标、显示页面等）的链接。
我的扩展的manifest.json文件
Browser_action 和 page_actionBrowser_action和page_action是扩展的两种类型，它们很相似，主要的区别在于browser_action可以应用于所有的页面，而page_action只能在你设定的几个特定网站内使用。我的扩展是专门用于知乎网站的，因此选择了page_action来处理。
按照Google的文档描述，两者还有一个区别：browser_action的图标显示在地址栏的外部，page_action的图标显示在地址栏内部。但是，在这里的讨论中，似乎新版本的Chrome浏览器中已经将两者都显示在了地址栏的外侧，不过page_action的图标只有在打开特定的网站时才不会显示为灰色。
在manifest.json文件中进行如下设置：
"page_action": {
"default_icon": "images/icon.png",
"default_title": "知乎屏蔽扩展"
},
background.js
在Manifest中指定background域可以使扩展常驻后台。background可以包含三种属性，分别是scripts、page和persistent。
我在扩展中只用到了scripts：
"background": {
"scripts": ["js/jquery-2.2.1.js","js/background.js"]
},
这样就会自动生成一个包含了列出的脚本文件的后台页面。
在我的background.js文件中有如下内容：
// 当网址改变的时候，判断当前的页面是否是知乎
// 如果是的话，就显示出图标，并设置它的弹出页面
chrome.tabs.onUpdated.addListener(function(id, info, tab){
if (tab.url.toLowerCase().indexOf("zhihu.com") > -1){
chrome.pageAction.show(id);
chrome.pageAction.setPopup({
tabId: id,
popup: "popup.html"
});
}
});
background.js文件中还有一个用于和content_script进行通信的监听器。
Content Scripts参考资料：
Google的Backgorund Pages文档
另一个教程
Content scripts是在Web页面内运行的javascript脚本。通过使用标准的DOM，它们可以获取浏览器所访问页面的详细信息，并可以修改这些信息。
在manifest.json文件中进行设置：
"content_scripts": [
{
"matches": ["*://*.zhihu.com/*"],
"js": ["js/jquery-2.2.1.js", "js/content_script.js"]
}
在打开匹配的网站时，列出的js文件会被注入页面，这样就可以获得浏览器所访问的web页面的详细信息，并可以对页面做出修改。虽然content script和页面共享了DOM结构，但不能访问该页面或其它content script中定义的函数和变量，这样就避免了相同的函数或变量名称的干扰。
我的扩展的主要功能就是在content_script.js中完成的，在该脚本中通过对页面的DOM进行操作来实现功能。
扩展功能的实现 对知乎首页进行分析查看一下知乎首页的源代码，所有的答案内容是放在一个id=js-home-feed-list的div中的，结构大致如下：
而在答案部分中，又分为摘要和完整的答案。
…