如何构建镀铬扩展-css教程-PHP中文网

首页

web前端

css教程

如何构建镀铬扩展

Joseph Gordon-Levitt

Apr 06, 2025 am 09:51 AM

How to Build a Chrome Extension

本周末我开发了一个 Chrome 扩展程序，因为我发现自己反复执行相同的任务，想要实现自动化。此外，我是一个宅在家里度过疫情的极客，所以我会把积攒的精力用在创造事物上。这些年来，我已经开发了一些 Chrome 扩展程序，希望这篇文章也能帮助你入门。让我们开始吧！

创建清单文件

第一步是创建一个名为 manifest.json 的文件，放在项目文件夹中。它的作用类似于 package.json，它为 Chrome 网上应用商店提供项目的重要信息，包括名称、版本、所需权限等等。以下是一个示例：

{
  "manifest_version": 2,
  "name": "示例名称",
  "version": "1.0.0",
  "description": "这是一个示例描述",
  "short_name": "示例名称缩写",
  "permissions": ["activeTab", "declarativeContent", "storage", "<all_urls>"],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "css": ["background.css"],
      "js": ["background.js"]
    }
  ],
  "browser_action": {
    "default_title": "执行操作时执行某操作",
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "32": "icons/icon32.png"
    }
  }
}</all_urls></all_urls>

你可能会注意到一些细节——首先：名称和描述可以随意填写。

权限取决于扩展程序需要执行的操作。在这个示例中，我们使用了 ["activeTab", "declarativeContent", "storage", "<all_urls>"]</all_urls>，因为这个特定的扩展程序需要有关活动标签的信息，需要更改页面内容，需要访问 localStorage，并且需要在所有网站上处于活动状态。如果它只需要在一个网站上处于活动状态，我们可以删除该数组的最后一个索引。

Chrome 的扩展程序文档中列出了所有权限及其含义。

"content_scripts": [
  {
    "matches": ["<all_urls>"],
    "css": ["background.css"],
    "js": ["background.js"]
  }
],</all_urls>

content_scripts 部分设置扩展程序应处于活动状态的网站。如果你想要一个单独的网站，例如 Twitter，你可以写成 ["https://twitter.com/*"]。CSS 和 JavaScript 文件是扩展程序所需的一切。例如，我高效的 Twitter 扩展程序使用这些文件来覆盖 Twitter 的默认外观。

"browser_action": {
  "default_title": "执行操作时执行某操作",
  "default_popup": "popup.html",
  "default_icon": {
    "16": "icons/icon16.png",
    "32": "icons/icon32.png"
  }
}

browser_action 中的一些内容也是可选的。例如，如果扩展程序不需要弹出窗口来实现其功能，则可以删除 default_title 和 default_popup。在这种情况下，只需要扩展程序的图标即可。如果扩展程序仅在某些网站上有效，则 Chrome 会在扩展程序处于非活动状态时将其图标灰显。

调试

清单文件、CSS 和 JavaScript 文件准备就绪后，请在浏览器的地址栏中访问 chrome://extensions/，然后启用开发者模式。这将激活“加载已解压”按钮，以添加扩展程序文件。还可以切换开发者版本的扩展程序是否处于活动状态。

我强烈建议此时开始一个 GitHub 仓库来进行版本控制。这是保存工作的好方法。

更新扩展程序时，需要从此界面重新加载它。屏幕上会显示一个小的刷新图标。此外，如果扩展程序在开发过程中出现任何错误，它也会在此处显示一个带有堆栈跟踪和更多信息的错误按钮。

弹出窗口功能

如果扩展程序需要使用从扩展程序图标弹出的弹出窗口，那么幸运的是，这非常简单。在清单文件中使用 browser_action 指定文件名后，可以使用你喜欢的任何 HTML 和 CSS 来构建页面，包括图像（我倾向于使用内联 SVG）。

我们可能需要为弹出窗口添加一些功能。这可能需要一些 JavaScript，因此请确保在清单文件中指定了 JavaScript 文件，并在你的弹出窗口文件中也链接了它，如下所示：

在该文件中，首先创建功能，我们将像这样访问弹出窗口 DOM：

document.addEventListener("DOMContentLoaded", () => {
  var button = document.getElementById("submit");

  button.addEventListener("click", (e) => {
    console.log(e);
  });
});

如果我们在 popup.html 文件中创建一个按钮，为其分配一个名为 submit 的 ID，然后返回一个控制台日志，你可能会注意到实际上控制台中没有任何内容被记录。这是因为我们处于不同的上下文，这意味着我们需要右键单击弹出窗口并打开一组不同的 DevTools。

现在我们可以访问日志和调试了！但是请记住，如果在 localStorage 中设置了任何内容，那么它只存在于扩展程序的 DevTools localStorage 中；而不是用户的浏览器 localStorage。（我第一次尝试时就遇到了这个问题！）

在扩展程序外部运行脚本

这一切都很好，但是假设我们想要运行一个可以访问当前选项卡信息的脚本呢？这里有几种方法可以做到这一点。我通常会在 DOMContentLoaded 事件监听器内部调用一个单独的函数：

示例 1：激活文件

function exampleFunction() {
  chrome.tabs.executeScript(() => {
    chrome.tabs.executeScript({ file: "content.js" });
  });
}

示例 2：只执行少量代码

如果只需要运行少量代码，这种方法非常棒。但是，由于它需要将所有内容作为字符串或模板字面量传递，因此很快就会变得难以处理。

function exampleFunction() {
  chrome.tabs.executeScript({
    code: `console.log('hi there');`
  });
}

示例 3：激活文件并传递参数

请记住，扩展程序和选项卡在不同的上下文中运行。这使得在它们之间传递参数并非易事。我们将在这里嵌套前两个示例，将一些代码传递到第二个文件中。我将所有需要的内容存储在一个选项中，但是为了使它正常工作，我们将必须对对象进行字符串化处理。

function exampleFunction(options) {
  chrome.tabs.executeScript(
    { code: "var options = "   JSON.stringify(options) },
    function() {
      chrome.tabs.executeScript({ file: "content.js" });
    }
  );
}