【教程向】从零开始创建浏览器插件（一）

news2024/10/6 18:25:55

第一步：创建一个自己的浏览器插件

在这篇博客中，我们将学习如何创建一个简单的浏览器插件。对于本教程，我们将以创建一个在浏览器中运行的基本插件为例，该插件能够通过点击插件图标来改变当前网页背景色。我们将使用Chrome扩展程序作为实践平台，因为它具有良好的文档支持，并且创建过程比较简单，但所学知识同样适用于其他浏览器的插件开发。
在这里插入图片描述

第1步：设置项目结构

首先，创建一个新文件夹作为插件的工作目录，比如命名为MyPlugin。在这个文件夹中，我们需要创建以下几个文件：

manifest.json —— 描述插件的元数据，如版本、名称和所需权限等。
background.js —— 插件的后台脚本文件。
popup.html —— 点击插件图标时显示的HTML页面。
popup.js —— popup.html的JavaScript脚本文件。

MyPlugin/
├── manifest.json
├── background.js
├── popup.html
└── popup.js

第2步：编写`manifest.json`

manifest.json文件包含了插件的基本信息。在这个文件里，你需要定义插件的名称、版本、图标、权限以及其他必要的声明。示例代码如下：

{
  "manifest_version": 3,
  "name": "Background Changer",
  "version": "1.0",
  "description": "A simple plugin to change the background color of a webpage.",
  "permissions": ["activeTab"],
  "icons": {
    "48": "icon.png"
  },
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icon.png",
      "48": "icon.png",
      "128": "icon.png"
    }
  }
}

第3步：创建`background.js`

在这个示例中，background.js文件将保持空白，因为此插件的核心功能不需要后台脚本的持续运行。不过，这个文件是必需的，因为我们在manifest.json中声明了它。

第4步：编写`popup.html`和`popup.js`

当用户点击扩展图标时，popup.html将显示一个简单的用户界面，允许用户更改页面的背景色。

popup.html示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>Change Background Color</title>
</head>
<body>
  <button id="changeColor">Change Color</button>
  <script src="popup.js"></script>
</body>
</html>

在popup.js中，我们编写了触发改变背景色行为的JavaScript代码。

popup.js示例代码：

document.getElementById('changeColor').addEventListener('click', function() {
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.scripting.executeScript({
      target: {tabId: tabs[0].id},
      function: changeBackgroundColor
    });
  });
});

function changeBackgroundColor() {
  document.body.style.backgroundColor = 'pink';
}