建立 Chrome 擴充功能：快速概述

模組——修改？ 如果您喜歡遊戲，您就會知道沒有什麼比玩模組遊戲更好的了。這是您最喜歡的遊戲，但具有額外的功能、功能和樂趣。現在，想像一下為您的網路瀏覽體驗帶來同樣的興奮。這正是瀏覽器擴充功能的作用 - 它們就像瀏覽器的模組，以您從未想過的方式增強瀏覽器的功能。

使用 Chrome 擴充功能，您可以調整瀏覽器以完美滿足您的需求 - 無論是阻止特定 URL、添加新功能，還是賦予瀏覽器全新的外觀。最好的部分是什麼？您可以自己建立這些擴充功能。在本指南中，我將引導您逐步完成建立自己的 Chrome 擴充功能的過程。

---

開始使用 Web 擴充功能比您想像的還要容易！ 如果您了解 JavaScript，那就輕而易舉了 - 只需學習一個新的 API 即可。畢竟，它的核心仍然是 JavaScript。

本文是以下內容的補充：《Chrome 擴充手冊：記憶體繁重到生產就緒》

---

目錄

• 網路擴充 101
• 分解清單：
• 建立一個簡單的映像下載器
• 下載功能：
• 我們已準備好測試我們的擴充
• 載入擴充
• 結論

網路擴充 101

Web 擴充功能就像 mod，但適用於瀏覽器。您可以完全自訂瀏覽器的行為方式（例如 AdBlock）或瀏覽器的外觀，例如 Mozilla 主題。

首先，建立一個新資料夾！

您所需要的只是一個manifest.json。這是主要功能，但用於網路擴展。這是瀏覽器查找的第一個檔案！

{
    "manifest_version": 3,
    "name": "img-downl",
    "version": "1.0",
    "description": "image ac?",
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["content.js"]
        }
    ],
    "permissions": [
        "activeTab"
    ]
}
</all_urls>

清單包含您的擴充功能的所有元資料。這就是瀏覽器如何理解您的擴充功能及其功能的方式。

---

分解清單：

• 「清單版本」：3， 這會告訴瀏覽器您將使用的 API 版本。版本 2 是先前的版本，版本 3 (V3) 是最新的 API。它更加安全、效能更高，大多數瀏覽器（包括 Chrome）已僅遷移至版本 3。

一個關鍵區別是從持久後台腳本轉移到服務工作者。 V2 中的後台腳本在擴充功能的整個生命週期內運行（當使用者瀏覽時），因此具有「持久」方面。在 V3 中，它們僅在必要時運行！

• 內容腳本： 內容腳本被注入到網頁本身。在我們的小擴充中，content.js 將被注入到任何符合「matches」的 URL：[“”]。因此，當您瀏覽到任何 URL 或開啟新分頁時，content.js 將被注入到頁面中並運行。

內容腳本與後台腳本不同，可以存取 DOM。

這是一個簡單插件的基本剖析。當您建立更多擴充項目時，您將了解權限和附加功能。作為介紹，這個簡單的分解就足夠了。

---

建立一個簡單的圖片下載器

準備好了嗎？

這個擴充的靈感來自於我不久前參加的電腦視覺課程。我們需要實作一個從 Google 搜尋下載圖像的工具。

注意：我不建議始終運行此擴展程序，除非您每次瀏覽時都想下載圖像。

在與manifest.json相同的資料夾中，建立content.js並貼上以下內容：

async function processAllImages() {
    const images = document.querySelectorAll('img');
    let count = 0;
    for (const img of images) {
        const url = img.src;
        const filename = `image${count++}.png`; // Generate a filename for each image
        try {
            await downloadImage(url, filename);
            console.log(`Downloaded ${filename}`);
        } catch (error) {
            console.error(`Error downloading image from ${url}:`, error);
        }
    }
}
// Run the function to process and download images
processAllImages();

請記住，內容腳本被注入到網頁中。例如，當您導覽至 example.com 時，processAllImages 將會運行。

它所做的就是抓取所有圖像元素並將它們傳遞給下載函數：

const images = document.querySelectorAll('img');

---

下載功能：

async function downloadImage(url, filename) {
    return new Promise((resolve, reject) => {
        fetch(url)
            .then(response => {
                if (!response.ok) throw new Error('Network response was not ok.');
                return response.blob();
            })
            .then(blob => {
                const a = document.createElement('a');
                a.href = URL.createObjectURL(blob);
                a.download = filename;
                a.style.display = 'none';
                document.body.appendChild(a);
                a.click();
                URL.revokeObjectURL(a.href); // Clean up the object URL
                document.body.removeChild(a);
                resolve();
            })
            .catch(error => reject(error));
    });
}

注意：這僅適用於靜態影像。動態和延遲加載的圖像可能會損壞 - 這是您可以在未來迭代中處理的事情。

---

我們準備好測試我們的擴展

我使用的是 Brave，它是基於 Chrome，但跨瀏覽器的過程類似。

要進行測試，您需要在所選瀏覽器中啟用開發者模式。

---

載入擴充

此擴充功能未更改，也應該可以在 Mozilla 中運行，因為我們不依賴 Chrome 命名空間。

          勇敢：        

              在網址列輸入brave://extensions/。        

              啟用開發者模式。      

              透過選擇資料夾載入擴充功能。
             

   Chrome 和 Edge：遵循與 Brave 類似的步驟。

         （chrome://extensions/ 或 edge://extensions/）

     

---

結論

模組－修改很有趣！此擴充功能可能很簡單，但它展示了幫助您入門的基礎知識。 Mozilla 的 MDN 擁有完美的資源，可協助您加深對 Web 擴充功能的了解（包括一般 Web 擴充功能和特定瀏覽器的擴充功能）。

記住：完成後關閉擴充功能或將其卸載，以避免不必要的下載。

或更好......

挑戰：找出一種接收輸入的方法（提示：單擊、圖標和後台腳本）並僅在用戶單擊按鈕時運行過程圖像函數。

以上是建立 Chrome 擴充功能：快速概述的詳細內容。更多資訊請關注PHP中文網其他相關文章！