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

發佈於2024-11-08

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": [""],
            "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));
    });
}