摘要：以下示例将阻止所有对的请求。从存储请求和阻止请求的对象中删除当前选项卡的属性。收听消息告知后台进程阻止的列表已被用户更新。两者都提供类似的功能和事件处理程序。
前言
当我们浏览网站时，都会发送许多请求来获取网页内容。这些请求中有些是重要的，而有些是我们不需要，因为它们可能是广告或建议等。在本文中，将创建一个有助于阻止和取消阻止所选URL的Chrome扩展插件，让你选择你打开的网址及该打开的网页中的所有URL，是否需要阻止。
我们注意到，对于某些网站，即使我安装了AdBlock扩展插件，我也还是能看到广告。这些网站正在向广告提供商发出多带带的请求，由于某些原因，AdBlock无法接受。解决这个问题的一个解决方案是将条目添加到host文件（在Windows上），我发现它很麻烦。所以，我阅读了关于Chrome扩展程序，并尝试自己创建一个。
免责声明
自编写代码以来，Chrome API可能已经更改。有关最新信息，请参阅Google的文档；
此扩展程序在64位Windows 10和Chrome版本57.0.2987.133上通过测试；
此扩展程序不适用于Google Play商店/网上商店；
相关代码
您只需要在计算机上安装一个文本编辑器和Chrome来查看/修改代码。Chrome扩展程序至少包含以下四个项目：
Manifest.json文件
HTML页面
CSS文件
Javascript文件
Manifest文件
Manifest文件可以被认为是扩展名的定义。它是一个简单的JSON文件，具有预定义的属性，可以告诉浏览器有关扩展名。除此之外，它还有助于设置扩展名的名称，版本控制，描述，权限，用户界面以及与其关联的JS文件。Manifest文件代码如下：
Manifest文件代码
在上面的JSON中，
manifest_version 为2，如Google文档所示。
browser_action 告诉扩展程序的图标和包含弹出窗口的HTML页面。
permissions定义给予扩展的一组权限。在这种情况下，我们分配权限才能访问URL和选项卡。我们还需要扩展才能跟踪和阻止请求以及存储访问来保存阻止的URL。
background定义我们将运行一些JavaScript作为后台进程。Chrome会处理扩展系统，并会生成一个包含此脚本的页面。在这种情况下，我们不需要任何特定的HTML。如果需要，也可以指定。
有关Manifest文件中个关键字的详细信息，后面会有专门文章与大家分享，请大家关注后面的文章。
HTML页面和CSS文件
此扩展程序的HTML页面相当简单。它只包含一个列表和几个按钮。弹出的完整HTML如下所示：
HTML代码
CSS代码
JavaScript代码
由于JS代码较多，这里就不截图。如Manifest文件和HTML文件所示，这里有两个JS文件： background.js和popup.js。正如名字所暗示的那样，前者处理后台任务，后者涉及扩展弹出窗口的代码。
background.js
后台脚本允许我们维护状态或编写长时间运行的进程。在这种情况下，我们需要跟踪他们正在访问的所有标签和URL。因此，此脚本将需要变量来存储这些详细信息，还需要一些事件处理程序来跟踪Chrome启动时，打开或关闭选项卡以及何时发出请求。使用Chrome的API，我们可以按照以下格式将处理程序绑定到事件：
每个处理程序必须具有可从文档中找到的特定定义（参数的数量和类型）。例如，如果我们在创建一个新的选项卡时触发一些代码，我们可以这样绑定我们的处理程序（在大多数情况下，我使用了匿名函数，我们可以使用一个具有正确定义的命名函数）：
一些事件可以异步和同步处理，一些事件也可以返回数据。例如，onBeforeRequest
可以同时处理异步方式。它还可以返回指定请求应该做什么的数据。以下示例将阻止所有对UglySite的请求。它还指定一个过滤器，只提到对UglySite的请求，并且VeryUglySite应该发送到扩展插件。
该代码，而如果我们改变上面将阻止在同步方式的要求blocking来asyncBlocking，我们可以做到这一点是异步的。在这种情况下，我们也可以指定一个回调函数。除了听事件之外，我们还可以注册回调来收听从扩展名发送的自定义消息。例如，当用户打开扩展弹出窗口时，我们需要获取当前选项卡完成的所有请求。这可以这样实现：
在上面的示例中，我们使用request.action属性来收听更多的消息。以下部分将显示如何向此侦听器发送消息。
在这个扩展插件中，还需处理以下事件：
chrome.tabs.onCreated：将当前选项卡的属性添加到存储请求和阻止的请求的对象中。
chrome.tabs.onRemoved：从存储请求和阻止请求的对象中删除当前选项卡的属性。
chrome.webRequest.onBeforeRequest：拦截所有的请求，并在需要的时候阻止它们。
chrome.runtime.onMessage：收听要求当前标签的请求的消息。这将使用动作requests。
chrome.runtime.onMessage：收听消息告知后台进程阻止的URL列表已被用户更新。这将使用动作resync。
为了保存或获取数据，可以使用chrome.storage.local或chrome.storage.sync。两者都提供类似的功能和事件处理程序。两者之间的区别在于本地将仅存储当前计算机上的数据。同步将在当前用户登录并启用同步的所有浏览器之间同步数据。如果用户没有启用它，同步也将作为本地使用。
对于这种情况，我们使用get和set函数来允许我们读取和写入数据到Chrome的存储空间。请注意，该数据默认情况下未加密，因此不得存储敏感信息。以下片段显示保存和从存储中检索数据。
popup.js
此文件包含扩展弹出窗口所需的所有代码。它执行两个主要任务：在加载时获取标签的请求，并在点击保存按钮时将用户选择保存到存储。要获取该选项卡的请求，它会将request消息发送到后台进程。以下内容用于发送消息：
在这里，为了获取当前标签的ID，使用了Chrome的API的以下功能：
：
将扩展添加到Chrome
从上面的链接下载并提取代码。
在Chrome上，转到chrome://extensions页面并选中Developer mode复选框。
点击Load unpacked extension并选择包含代码下载的文件夹。
扩展程序现在应该在工具栏中可见。刷新页面以查看请求。
本文由甲爪日付广告联盟www.jiazhua.com整理编辑！
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/91688.html
摘要：简单高效的自定义方式对于这些情况我们可以使用一个强大的浏览器插件，简称，中文俗称为油猴，支持和浏览器。简单几行代码，就可以去除大部分页面广告。声明需要使用的函数。 会CSS就会去广告~ 传统去广告方法的弊端 我们浏览网页的时候经常不免会看到各种不想看到的广告内容，最简单的方案就是通过浏览器插件来解决，比如大名鼎鼎的AdBlock插件以及国内的各种广告拦截助手。 但这些插件的拦截能力可...
摘要：简单高效的自定义方式对于这些情况我们可以使用一个强大的浏览器插件，简称，中文俗称为油猴，支持和浏览器。简单几行代码，就可以去除大部分页面广告。声明需要使用的函数。 会CSS就会去广告~ 传统去广告方法的弊端 我们浏览网页的时候经常不免会看到各种不想看到的广告内容，最简单的方案就是通过浏览器插件来解决，比如大名鼎鼎的AdBlock插件以及国内的各种广告拦截助手。 但这些插件的拦截能力可...
摘要：一般而言，扩展会对用户浏览的页面进行相应的操作和一些数据传递，本案例的本质是，当用户浏览网页版微博时，扩展会向当前页面注入预先写好的，这样便对微博网页版进行了样式重构。采用这样的方法依次处理所有你不想看到的元素，你的微博便会简洁很多。 0x00. 前言 微博现在也是变得越来越臃肿，广告越来越多，早已不再是微博了，这让微博深度用户的我感到十分焦灼。由于之前就尝试写过 Chrome 插件，...
摘要：新站极简插件打磨已久，终于上线访问地址借此机会，推荐个最强插件，瞬间开发效率加倍用于调试应用程序的和扩展。可以解决扩展无法自动更新的问题，同时可以访问谷歌搜索，邮箱，等谷歌服务。 showImg(http://upload-images.jianshu.io/upload_images/15934130-50747924438e3c47.jpg?imageMogr2/auto-orie...
摘要：新站极简插件打磨已久，终于上线访问地址借此机会，推荐个最强插件，瞬间开发效率加倍用于调试应用程序的和扩展。可以解决扩展无法自动更新的问题，同时可以访问谷歌搜索，邮箱，等谷歌服务。 showImg(http://upload-images.jianshu.io/upload_images/15934130-50747924438e3c47.jpg?imageMogr2/auto-orie...
阅读 1634·2021-09-22 10:02
阅读 1896·2021-09-02 15:40
阅读 2822·2019-08-30 15:55
阅读 2207·2019-08-30 15:44
阅读 3572·2019-08-30 13:18
阅读 3204·2019-08-30 11:00
阅读 1915·2019-08-29 16:57
阅读 537·2019-08-29 16:41
