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

帅比九日

已于 2024-05-16 17:53:49 修改

阅读量999

点赞数 10

分类专栏：踩过的坑浏览器插件开发教程文章标签：浏览器插件前端 javascript html5 css

于 2024-05-09 14:23:17 首次发布

本文链接：https://blog.csdn.net/qq_41883423/article/details/138612327

版权

踩过的坑同时被 2 个专栏收录

156 篇文章 7 订阅

订阅专栏

浏览器插件开发教程

6 篇文章 1 订阅

订阅专栏

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

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

首先，创建一个新文件夹作为插件的工作目录，比如命名为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",
    "scripting"
  ],
  "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用来执行对页面背景色的替换，以及对popup传来的事件进行监听。

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  if (request.action === "changeColor") {
    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";
}

第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中，我们在点击按钮时给background传递一个事件，触发改变背景色。

popup.js示例代码：

document.getElementById('changeColor').addEventListener('click', function() {
  chrome.runtime.sendMessage({action: "changeColor"});
});

第5步：加载并测试插件

要在Chrome中加载你的插件，请执行以下步骤：

打开Chrome浏览器，输入chrome://extensions/并回车。
右上角打开"开发者模式"。
选择"加载已解压的扩展程序"，然后导航到你的MyPlugin文件夹并选择它。

一旦加载完成，你应该能够看到插件图标出现在浏览器的扩展栏中。点击这个图标，然后点击弹出的按钮，你就会看到当前标签页的背景色变为粉色。

结论

创建一个简单的浏览器插件并不复杂，只需了解一些基础的JavaScript和对manifest.json文件的结构有所掌握。通过上述步骤，你可以开始尝试创建自己的浏览器插件，并逐步扩展其功能。实战操作会帮助你更深入地理解插件是如何工作的，以及如何利用插件与浏览器以及网页内容进行交互。

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

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

第2步：编写manifest.json

第3步：创建background.js

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

第5步：加载并测试插件

结论

第2步：编写`manifest.json`

第3步：创建`background.js`

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