建立 Chrome 擴充功能：快速概述-js教程-PHP中文網

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

王林

發布： 2024-08-29 11:03:11

原創

708 人瀏覽過

Building Chrome Extensions : A Quick Overview

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

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

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

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

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

登入後複製

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

分解清單：

「清單版本」：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));
    });
}

登入後複製