前言
当我们浏览网站时，都会发送许多请求来获取网页内容。这些请求中有些是重要的，而有些是我们不需要，因为它们可能是广告或建议等。在本文中，将创建一个有助于阻止和取消阻止所选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整理编辑！
