阻止廣告：JavaScript實現(xiàn)Chrome插件實例分析

Sike 發(fā)布于2019-08-22 11:03 / 2370人閱讀

摘要：以下示例將阻止所有對的請求。從存儲請求和阻止請求的對象中刪除當前選項卡的屬性。收聽消息告知后臺進程阻止的列表已被用戶更新。兩者都提供類似的功能和事件處理程序。

前言

當我們?yōu)g覽網(wǎng)站時，都會發(fā)送許多請求來獲取網(wǎng)頁內(nèi)容。這些請求中有些是重要的，而有些是我們不需要，因為它們可能是廣告或建議等。在本文中，將創(chuàng)建一個有助于阻止和取消阻止所選URL的Chrome擴展插件，讓你選擇你打開的網(wǎng)址及該打開的網(wǎng)頁中的所有URL，是否需要阻止。

我們注意到，對于某些網(wǎng)站，即使我安裝了AdBlock擴展插件，我也還是能看到廣告。這些網(wǎng)站正在向廣告提供商發(fā)出多帶帶的請求，由于某些原因，AdBlock無法接受。解決這個問題的一個解決方案是將條目添加到host文件（在Windows上），我發(fā)現(xiàn)它很麻煩。所以，我閱讀了關(guān)于Chrome擴展程序，并嘗試自己創(chuàng)建一個。

免責聲明

自編寫代碼以來，Chrome API可能已經(jīng)更改。有關(guān)最新信息，請參閱Google的文檔；
此擴展程序在64位Windows 10和Chrome版本57.0.2987.133上通過測試；
此擴展程序不適用于Google Play商店/網(wǎng)上商店；

相關(guān)代碼

您只需要在計算機上安裝一個文本編輯器和Chrome來查看/修改代碼。Chrome擴展程序至少包含以下四個項目：

Manifest.json文件
HTML頁面
CSS文件
Javascript文件
Manifest文件

Manifest文件可以被認為是擴展名的定義。它是一個簡單的JSON文件，具有預定義的屬性，可以告訴瀏覽器有關(guān)擴展名。除此之外，它還有助于設置擴展名的名稱，版本控制，描述，權(quán)限，用戶界面以及與其關(guān)聯(lián)的JS文件。Manifest文件代碼如下：

Manifest文件代碼

在上面的JSON中，

manifest_version 為2，如Google文檔所示。
browser_action 告訴擴展程序的圖標和包含彈出窗口的HTML頁面。
permissions定義給予擴展的一組權(quán)限。在這種情況下，我們分配權(quán)限才能訪問URL和選項卡。我們還需要擴展才能跟蹤和阻止請求以及存儲訪問來保存阻止的URL。
background定義我們將運行一些JavaScript作為后臺進程。Chrome會處理擴展系統(tǒng)，并會生成一個包含此腳本的頁面。在這種情況下，我們不需要任何特定的HTML。如果需要，也可以指定。
有關(guān)Manifest文件中個關(guān)鍵字的詳細信息，后面會有專門文章與大家分享，請大家關(guān)注后面的文章。

HTML頁面和CSS文件

此擴展程序的HTML頁面相當簡單。它只包含一個列表和幾個按鈕。彈出的完整HTML如下所示：

HTML代碼

CSS代碼

JavaScript代碼

由于JS代碼較多，這里就不截圖。如Manifest文件和HTML文件所示，這里有兩個JS文件： background.js和popup.js。正如名字所暗示的那樣，前者處理后臺任務，后者涉及擴展彈出窗口的代碼。

background.js

后臺腳本允許我們維護狀態(tài)或編寫長時間運行的進程。在這種情況下，我們需要跟蹤他們正在訪問的所有標簽和URL。因此，此腳本將需要變量來存儲這些詳細信息，還需要一些事件處理程序來跟蹤Chrome啟動時，打開或關(guān)閉選項卡以及何時發(fā)出請求。使用Chrome的API，我們可以按照以下格式將處理程序綁定到事件：

每個處理程序必須具有可從文檔中找到的特定定義（參數(shù)的數(shù)量和類型）。例如，如果我們在創(chuàng)建一個新的選項卡時觸發(fā)一些代碼，我們可以這樣綁定我們的處理程序（在大多數(shù)情況下，我使用了匿名函數(shù)，我們可以使用一個具有正確定義的命名函數(shù)）：

一些事件可以異步和同步處理，一些事件也可以返回數(shù)據(jù)。例如，onBeforeRequest
可以同時處理異步方式。它還可以返回指定請求應該做什么的數(shù)據(jù)。以下示例將阻止所有對UglySite的請求。它還指定一個過濾器，只提到對UglySite的請求，并且VeryUglySite應該發(fā)送到擴展插件。

該代碼，而如果我們改變上面將阻止在同步方式的要求blocking來asyncBlocking，我們可以做到這一點是異步的。在這種情況下，我們也可以指定一個回調(diào)函數(shù)。除了聽事件之外，我們還可以注冊回調(diào)來收聽從擴展名發(fā)送的自定義消息。例如，當用戶打開擴展彈出窗口時，我們需要獲取當前選項卡完成的所有請求。這可以這樣實現(xiàn)：

在上面的示例中，我們使用request.action屬性來收聽更多的消息。以下部分將顯示如何向此偵聽器發(fā)送消息。

在這個擴展插件中，還需處理以下事件：

chrome.tabs.onCreated：將當前選項卡的屬性添加到存儲請求和阻止的請求的對象中。
chrome.tabs.onRemoved：從存儲請求和阻止請求的對象中刪除當前選項卡的屬性。
chrome.webRequest.onBeforeRequest：攔截所有的請求，并在需要的時候阻止它們。
chrome.runtime.onMessage：收聽要求當前標簽的請求的消息。這將使用動作requests。
chrome.runtime.onMessage：收聽消息告知后臺進程阻止的URL列表已被用戶更新。這將使用動作resync。
為了保存或獲取數(shù)據(jù)，可以使用chrome.storage.local或chrome.storage.sync。兩者都提供類似的功能和事件處理程序。兩者之間的區(qū)別在于本地將僅存儲當前計算機上的數(shù)據(jù)。同步將在當前用戶登錄并啟用同步的所有瀏覽器之間同步數(shù)據(jù)。如果用戶沒有啟用它，同步也將作為本地使用。

對于這種情況，我們使用get和set函數(shù)來允許我們讀取和寫入數(shù)據(jù)到Chrome的存儲空間。請注意，該數(shù)據(jù)默認情況下未加密，因此不得存儲敏感信息。以下片段顯示保存和從存儲中檢索數(shù)據(jù)。

popup.js

此文件包含擴展彈出窗口所需的所有代碼。它執(zhí)行兩個主要任務：在加載時獲取標簽的請求，并在點擊保存按鈕時將用戶選擇保存到存儲。要獲取該選項卡的請求，它會將request消息發(fā)送到后臺進程。以下內(nèi)容用于發(fā)送消息：

在這里，為了獲取當前標簽的ID，使用了Chrome的API的以下功能：

：

將擴展添加到Chrome

從上面的鏈接下載并提取代碼。
在Chrome上，轉(zhuǎn)到chrome://extensions頁面并選中Developer mode復選框。
點擊Load unpacked extension并選擇包含代碼下載的文件夾。
擴展程序現(xiàn)在應該在工具欄中可見。刷新頁面以查看請求。
本文由甲爪日付廣告聯(lián)盟www.jiazhua.com整理編輯！