您是否厭倦了網站上流行的要求您接受第三方 cookie 或結帳的橫幅？在這篇文章中，我解釋瞭如何製作（並發布）一個 Firefox 擴充功能以避免大多數網站出現這種情況

資訊

此擴充功能的程式碼發佈在 https://github.com/jagedn/removecookiewall-addon 您可以從 https://addons.mozilla.org/es/firefox/addon/removecookiewall/

在 Firefox 中（也可以在行動裝置上）安裝它

幾個月來，由於歐洲的要求（我認為），大多數網站在您第一次訪問它們時都會向您顯示一個橫幅，該橫幅不允許您繼續，直到您在以下兩者之間做出決定：

• 我將在您的瀏覽器中放置數千個第三方 cookie，以監控您瀏覽的內容

• 去結帳處付錢讓我不要這樣做

大多數這些程式庫會在頁面載入後立即執行 javascript 來讀取您的 cookie。如果他們發現您尚未簽出，他們會向您顯示一個 HTML 對話框，並透過將樣式變更為「封鎖」（或類似）來阻止正文

這個對話框不允許您閱讀下面的內容，但是...它仍然是HTML 的DOM 元素，因此，由於瀏覽器允許您打開開發控制台並檢查HTML，所以我想到了手動刪除對話框（您只需按一下“檢查”，查看定義它的HTML，然後按一下“刪除”）和chimpón，對話方塊就會消失。然後，我會尋找“body”聲明，並透過雙擊樣式屬性，刪除封鎖它的屬性，現在可以捲動。

小魔法。

然後發生了什麼事？好吧，javascript 程式碼只是一直等待用戶事件到達，告訴它您按下了哪個按鈕，但這些按鈕不再存在，因此它永遠不會到達，也不會安裝第三方 cookie。

好的，但是如果我刷新頁面怎麼辦？好吧，重新開始...所以這非常適合新的瀏覽器擴展為我做這件事。

刪除 CookieWall 擴展

Firefox 擴展，簡而言之，是一個保留的瀏覽器記憶體空間，其中執行可以與之對話的 javascript 程式碼。

它可以（如果用戶授予權限）將程式碼注入您訪問的頁面、打開選項卡、關閉選項卡、與遠端服務通訊…

RemoveCookieWall 是一個 Firefox 擴展，它「唯一」需要的是瀏覽器向用戶訪問的所有頁面注入一個小的 JavaScript 程式碼。

當頁面載入時，這個 javascript 將檢查是否有一個 DOM 元素與我調查過的他們正在使用的任何元素相符。如果偵測到它，它將使用標準 Javascript 函數將其刪除。

由於橫幅有時會在我們的程式碼執行後（毫秒）秒出現，因此腳本所做的就是重複搜尋幾秒鐘。此後，如果橫幅尚未出現，則擴充功能假定該頁面沒有 CookieeWall 並結束

這就是全部。剩下的就是打包程式碼，新增一個清單檔案來指示我們的擴充功能所需的權限，並將其發佈在 Firefox 中

程式碼

JS代碼基本上是：

var readyStateCheckInterval;
var counter = 0;

function sanitizeBody() {
    document.body.style.overflow = "unset"
    document.body.classList.remove('sxnlzit')
    document.body.classList.remove('didomi-popup-open')
    document.body.parentNode.classList.remove('sp-message-open')
}

function removeMe(element) {
    element.remove();
    sanitizeBody();
}

readyStateCheckInterval = setInterval(function() {
    if (document.readyState === "complete") {
        counter  ;
        const removeParent = ['div.pmConsentWall']; //elpais
        [...removeParent].forEach(s => {
            var divs = document.body.querySelectorAll(s);
            [...divs].forEach(element => {
                removeMe(element.parentNode);
            });
        });
        const removeThis = [
            'div[data-nosnippet="data-nosnippet"]',
            '#mrf-popup',
            '#didomi-popup',
            '[id^="sp_message_container_"]',
            '#cl-consent',
            'dialog.cookie-policy'
        ];
        [...removeThis].forEach(s => {
            var divs = document.body.querySelectorAll(s);
            [...divs].forEach(element => {
                removeMe(element);
            });
        });
        if (counter > 30) {
            clearInterval(readyStateCheckInterval);
        }
    }
}, 100);

代碼注入頁面後，每隔 100 毫秒開始一個間隔

腳本會查看 document.body.querySelectorAll 是否找到任何元素，例如 #mrf-popup、#didomi-popup 等。如果找到它，只需使用 element.remove()

經過幾次嘗試，最終刪除了間隔

每個擴充功能都必須有一個 Manifest 檔案。此擴充的內容很簡單：

{

    "description": "Remove CookieWall",
    "manifest_version": 2,
    "name": "RemoveCookieWall",
    "version": "0.11",
    "homepage_url": "https://github.com/jagedn/removecookiewall-addon",
    "icons": {
        "48": "icons/border-48.png"
    },
    "content_scripts": [{
        "matches": [
            "*://*/*"
        ],
        "js": ["removeCookieWall.js"]
    }],
    "browser_specific_settings": {
        "gecko": {
            "id": "[email protected]"
        }
    }
}

如你所見，content_scripts表示我們要將js注入到所有頁面中。其他擴充只能指示一個站點，其他擴充在背景執行 javascript，...

建置並發布

要在 Firefox 中發布，我們只需提供一個包含擴充功能所需的所有檔案的 zip 檔案。為了方便起見，我創建了一個 build.sh 來簡單地運行 zip:

zip -r -FS ../remove-cookiewall.zip * --排除 '.git' --排除 'build.sh'

在 Firefox 中發布擴充功能沒有任何複雜性，而且是免費的。您的擴充必須通過可能需要一天（或幾天）天的初步審核