浏览器扩展程序——我们的第一个扩展程序

现在我们已经了解了不同类型的扩展程序，让我们来看看如何创建我们的第一个浏览器扩展程序。

在本文中，我们将创建一个扩展程序，将每个页面的主体颜色更改为粉色。
因为粉色是一种很棒的颜色。

浏览器扩展程序线框图

浏览器扩展程序通过一个名为清单的文件运行。
清单文件是一个 JSON 文件，其中包含有关扩展程序的所有特定数据。

它列出了扩展程序的元数据以及它应该运行的实际内容。

我们来创建一个新文件夹并进入它。

mkdir pinkify-extension && cd pinkify-extension

下一步是创建一个manifest.json文件，它将成为此次操作的核心。

请在里面填写以下信息。

{
  "manifest_version": 2,
  "name": "Pinkify",
  "version": "1.0",
  "description": "Convert any page to a pinkish page 💖",
  "icons": {
    "48": "icons/pinkify-48.png"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["pinkify.js"]
    }
  ]
}

如您所见，它包含了关于该应用程序的大量数据。

• manifest_version应该使用哪种类型的清单文件？推荐使用三种，但 Firefox 目前还不支持，所以我使用两种。
• name您的扩展程序名称
• version此扩展的版本
• description简要描述其功能
• icons您可以为您的扩展程序添加多个图标文件。
• content_scripts这是实际要注入的函数。我们需要在所有URL中添加此pinkify.js脚本。

稍后我们将深入探讨 content_scripts 的更多细节。

您可以在根目录中放置一个 48x48 像素的示例图标。

然后您可以添加名为 的脚本文件，pinkify.js并在其中放入以下代码行。

document.body.style.setProperty('background', '#FDF2F7');

这将把主体背景颜色设置为浅粉色。

注意：我没有添加任何覆盖，因此如果页面已经设置了 body 颜色，则不会激活。

测试您的扩展程序

我们不想在没有测试扩展程序的情况下就将其发布到应用商店，所以让我们看看在本地测试需要哪些条件。

我更喜欢使用Chrome浏览器，因为它界面更简洁快捷。

在Chrome浏览器中，点击插件按钮并打开该页面。

接下来，开启开发者模式。你会看到另一个菜单，其中可以选择加载已解压的扩展程序。

点击已解压的加载项，然后导航到pinkify-extension文件夹。

加载完成后，您应该会看到类似这样的内容：

现在访问 google.com 或任何网页，您应该可以看到粉红色背景已激活。

太棒了，你居然做出了你的第一个浏览器扩展程序！正如你所见，这并没有想象中那么难。

在接下来的文章中，我们还将创建一些更高级的扩展程序。

您可以在以下GitHub 仓库中找到今天的代码。

感谢阅读，让我们保持联系！

感谢您阅读我的博客。欢迎订阅我的电子邮件简讯，也可以在Facebook或Twitter上关注我。