如何构建您的第一个 Chrome 扩展程序

2025-05-24

如何构建您的第一个 Chrome 扩展程序

改变网络，一次改变一张小狗图片

莱利

我们来聊聊浏览器扩展，或者更确切地说，如何构建你的第一个 Chrome 扩展。几周前我去上了一堂课，大家用几行代码创建了一个非常简单的扩展，玩得很开心。我想把它分享出来，让大家可以尝试一下，甚至可以进一步扩展它。

什么是浏览器扩展

在开始之前，我们先来回顾一下什么是浏览器扩展程序。浏览器扩展程序实际上只是一些简短的代码片段，可以为浏览器提供一些额外的功能。您现在可能正在使用一些扩展程序，例如广告拦截器或密码管理器。Google 拥有大量由用户构建的实用且有趣的 Chrome 扩展程序，旨在提升网页浏览体验。

https://chrome.google.com/webstore/category/extensions

今天，我们将创建一个扩展程序，针对网页上的所有图像，并用小狗的图片替换它们！

文件夹结构

开始：

在本地克隆以下 repo 以获取启动文件：https://github.com/himashi99/chrome-extension

文件结构

  1. 您的文件夹结构应与上述类似。

  2. 3. 我已在图​​像文件夹中为您添加了“便便”表情符号，但您可以随意使用任何您喜欢的图像图标。

  3. 清单文件是一个 JSON 文件，用于描述我们的 Chrome 扩展程序。我们在这里指定扩展程序的重要信息，例如所需的权限或使用的图标。

  4. 在您的“manifest.json”文件中包含以下代码。

{   
    "name": "Yay Chrome!", 
    "version": "1.2", 
    "description": "First project to build a fresh chrome  extension", 
    "manifest_version": 2,
"permissions": ["activeTab", "declarativeContent"],
"icons": {
      "16": "images/poop_16.png",
      "32": "images/poop_32.png",
      "48": "images/poop_48.png",
      "128": "images/poop_128.png"
    },
"page_action": { 
      "default_icon": {
        "16": "images/poop_16.png",
        "32": "images/poop_32.png",
        "48": "images/poop_48.png",
        "128": "images/poop_128.png"
      }
    },
"background": {
      "scripts": ["scripts.js"],
      "persistent": false
    }
}
Enter fullscreen mode Exit fullscreen mode

让我们分解一下上面的代码：

我们需要为我们的扩展提供一个名称、版本号和简短的描述。

当前 manifest_versions 为 2，因此保持原样。

“activeTab”权限允许访问用户当前所在的选项卡。“declarativeContent”权限允许扩展程序感知选项卡的切换或新网页的访问。

我们导入不同大小的图像图标，以便我们的扩展能够响应不同的屏幕尺寸。

“pageAction” 将图标放置在 Chrome 工具栏中，并表示可以在当前网页上采取的操作，即按钮可点击。

在最后一个代码块中，后台脚本会在需要时加载，并监听和管理事件。Persistent 设置为“false”，以便后台脚本在完成操作后卸载。

在这种情况下，Manifest 文件指示应加载“scripts.js”文件。我们稍后会回到“scripts.js”和“main.js”文件。

Chrome 设置

打开 Chrome 并进入扩展管理器

扩展管理器

我们需要让 Chrome 知道我们是厉害的开发者，所以打开右上角的“开发者模式”。这样我们就可以加载自己的扩展程序了。

开发者模式

单击“加载解压后的”并选择“chrome-extension”文件夹。

负载延伸

好了！我们现在已经加载了扩展程序。您应该会在扩展管理器中看到该扩展程序，并在 Google Chrome 工具栏中看到它的图标。图标会显示为灰色且处于非活动状态。

扩展图标

如果此时您对 JSON 文件进行了任何更改，您可以点击扩展程序上的刷新按钮。

刷新

scripts.js 文件

现在是时候激活图标了，为了做到这一点，我们需要将按钮链接到我们的“scripts.js”文件。

  1. 在您的“scripts.js”文件中包含以下代码块。
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
   chrome.declarativeContent.onPageChanged.addRules([{
     conditions: [new chrome.declarativeContent.PageStateMatcher({
       pageUrl: {schemes: ['https', 'http']},
     })
     ],
         actions: [new chrome.declarativeContent.ShowPageAction()]
   }]);
 });


chrome.pageAction.onClicked.addListener(function() {
   chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
     chrome.tabs.executeScript(
       tabs[0].id, 
       {file: 'main.js'}
     );
   });
 });
Enter fullscreen mode Exit fullscreen mode

让我们分解一下上面的代码：

第一个代码块：

回到清单文件，还记得我们指定了 activeTab 和 declarativeContent 的权限吗？这样我们就可以使用 Chrome API（“chrome.declarativeContent”），从而允许我们的扩展程序根据网页内容执行操作，而无需请求主机权限来读取网页内容。

我们还在清单文件中将“pageAction”定义为 Chrome 工具栏中的扩展图标。

声明性 API 进一步允许在“onPageChanged”事件上设置规则，然后在满足“PageStateMatcher”下的条件时采取行动。

“PageStateMatcher” 仅在满足列出的条件时才匹配网页。在这种情况下，规则将显示任何 http 或 https 网页的页面操作。

调用“removeRules”来清除安装扩展时添加的所有先前定义的规则，因此可以定义一组新规则（“addRules”）。

第二个代码块：

当点击我们在 Manifest 文件中创建的扩展图标 pageAction 时，我们会添加一个监听器，即暂时不运行脚本。

下一行指的是我们在清单文件中声明的“活动标签页”权限。Chrome 会查询当前打开的窗口，并确定活动标签页。确定活动标签页后，它会运行一个带有参数“tabs”的函数。

最后一段代码告诉 Chrome 转到我们在上一行中隔离的活动选项卡，并执行脚本，在本例中为“main.js”文件。

  1. 保存您的文件并刷新您的扩展。

  2. 打开一个新标签，您应该会看到您的图标现在处于活动状态并且不再显示为灰色。

活动图标

我们终于完成了所有的设置工作，可以进入有趣的部分了！

图像占位符服务

我们需要为我们的扩展程序找一些替换图片。有几个网站提供这方面的服务，而且图片大小各异。我打算用小狗那张，https://placedog.net/，不过还有很多其他的，所以你可以选择你喜欢的！

https://placekitten.com/

https://placebear.com/

main.js 文件

我们现在要编写脚本，以便当我们点击扩展程序时，我们可以用可爱的小狗照片替换图像。

  1. 在您的 main.js 文件中包含以下代码
var allImages = document.getElementsByTagName('img');

for (var i = 0; i < allImages.length; i++) {
  allImages[i].addEventListener('mouseover', function() {

    var thisImageHeight = this.clientHeight;
    var thisImageWidth = this.clientWidth;

  this.setAttribute('src', 'https://placedog.net/' + thisImageHeight + '/' + thisImageWidth)
  })
}
Enter fullscreen mode Exit fullscreen mode

让我们分解一下上面的代码：

我们希望获取指定网页上的所有图片。由于这些图片元素都带有“img”标签，因此我们使用 document.getElements byTagName('img') 来获取它们，并将其赋值给变量“allImages”。

现在，我们可以使用“for 循环”来遍历每个图像并添加事件监听器。在本例中，我们等待用户将鼠标悬停在图像上。

新图像的宽度和高度应该与被替换图像的宽度相等。我们将原始图像的高度和宽度分别赋值给 thisImageHeight 和 thisImageWidth 两个变量。

现在，我们可以使用 setAttribute 函数来更改 src 元素的属性。记住，“this”指的是鼠标悬停的图像。我们还将使用上一行中的变量来设置图像的高度和宽度。

你做到了！

好的，保存文件并刷新扩展程序。打开一个包含大量图片的网页，试试你新开发的有趣 Chrome 扩展程序吧！

文章来源：https://dev.to/himashi99/how-to-build-your-first-chrome-extension-19lb
Devto 翻译
PREV
为什么我决定在 2025 年停止使用 React.js
NEXT
每个开发人员都应该知道和使用的工具