返回

开发您的第一个Chrome插件（附操作步骤）

前端

想要开发一个实用的Chrome插件，并不困难。通过学习本教程，您将掌握基本步骤：

  • 准备工作：确保您拥有正确的工具和软件环境，包括Chrome浏览器、文本编辑器和打包工具。
  • 创建manifest.json文件：这是一个必需的文件，用于声明插件的名称、版本、权限和功能。
  • 添加功能代码：编写JavaScript代码以实现插件的功能，例如网页内容注入、消息传递、图标更新等。
  • 打包和安装：使用合适的打包工具（如Webpack或Rollup）将插件代码打包成一个crx文件，然后将其安装到Chrome浏览器。

准备工作

  • 安装Chrome浏览器： 请确保您已经安装了最新版本的Chrome浏览器。
  • 安装文本编辑器： 您可以使用任何您喜欢的文本编辑器来编写代码，推荐使用Visual Studio Code或Atom。
  • 安装打包工具： 推荐使用Webpack或Rollup来打包插件代码。

创建manifest.json文件

manifest.json文件是插件的配置文件，用于声明插件的名称、版本、权限和功能。创建一个名为manifest.json的文件，并添加以下代码：

{
  "name": "My First Chrome Plugin",
  "version": "1.0",
  "manifest_version": 3,
  "description": "This is my first Chrome plugin.",
  "permissions": [],
  "background": {
    "scripts": ["background.js"]
  },
  "action": {
    "default_popup": "popup.html"
  }
}
  • name： 插件的名称，显示在Chrome扩展程序管理器中。
  • version： 插件的版本号，用于区分不同版本的插件。
  • manifest_version： 声明插件清单文件所遵循的版本号。
  • description： 插件的，显示在Chrome扩展程序管理器中。
  • permissions： 插件所需的权限，例如访问标签页、访问存储等。
  • background： 指定后台脚本的名称，用于在后台运行插件的功能。
  • action： 指定弹出页面的名称，用于显示插件的用户界面。

添加功能代码

在background.js和popup.html文件中添加代码以实现插件的功能。

// background.js
chrome.runtime.onInstalled.addListener(() => {
  console.log('Plugin installed!');
});

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === 'get_url') {
    sendResponse({url: window.location.href});
  }
});

<!-- popup.html -->
<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>My First Chrome Plugin</h1>
  <button id="get_url">Get URL</button>
</body>
</html>
  • get_url： 是一个消息，当用户点击按钮时发送给background.js。
  • window.location.href： 获取当前网页的URL。

打包和安装

使用Webpack或Rollup将插件代码打包成一个crx文件。然后，打开Chrome浏览器，转到扩展程序页面，点击“加载已解压的扩展程序”，选择打包后的crx文件，即可安装插件。

结语

现在，您已经成功开发并安装了自己的第一个Chrome插件。本教程只是入门指南，您可以继续探索更高级的功能，如内容脚本、消息传递和存储API等，以创建更强大的插件。