构建 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中文网其他相关文章！