RemoveCookieWall，Firefox 擴充-js教程-PHP中文網

首頁

web前端

js教程

RemoveCookieWall，Firefox 擴充

Sep 12, 2024 am 10:31 AM

RemoveCookieWall, una extension de Firefox

您是否厭倦了網站上流行的橫幅，以便您接受第三方 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 =&gt; {
            var divs = document.body.querySelectorAll(s);
            [...divs].forEach(element =&gt; {
                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 =&gt; {
            var divs = document.body.querySelectorAll(s);
            [...divs].forEach(element =&gt; {
                removeMe(element);
            });
        });
        if (counter &gt; 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": "remove-cookiewall@aguilera.soy"
        }
    }
}

登入後複製

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