从头开始实现 Chrome 扩展的终极指南

前端

2023-11-29 02:02:33

导言

Chrome 扩展是功能强大的工具，可让您自定义和增强浏览体验。它们可以完成各种任务，例如阻止广告、更改网站外观以及添加新功能。

在本教程中，我们将从头开始指导您完成创建 Chrome 扩展的过程。我们将介绍创建扩展所需的所有基本知识，包括编写清单文件、打包扩展和将其上传到 Chrome 网上应用店。

准备工作

在开始创建 Chrome 扩展之前，您需要具备以下内容：

Chrome 浏览器
文本编辑器或集成开发环境 (IDE)
对 JavaScript、HTML 和 CSS 的基本了解

如果您没有 JavaScript、HTML 和 CSS 方面的经验，我强烈建议您在继续之前先学习一些基础知识。有许多在线资源和教程可以帮助您入门。

创建清单文件

Chrome 扩展的清单文件是一个 JSON 文件，其中包含有关扩展的基本信息，例如其名称、和版本号。清单文件还用于声明扩展的权限和所使用的 API。

要创建清单文件，请创建一个名为 manifest.json 的新文件并将其添加到扩展的根目录。以下是一个示例清单文件：

{
  "manifest_version": 3,
  "name": "My Chrome Extension",
  "description": "This is my first Chrome extension.",
  "version": "1.0.0",
  "permissions": [],
  "background": {
    "scripts": ["background.js"]
  }
}

清单文件中包含以下字段：

manifest_version：清单文件的版本号。
name：扩展的名称。
description：扩展的。
version：扩展的版本号。
permissions：扩展所需的权限列表。
background：有关扩展后台脚本的信息。

编写后台脚本

后台脚本是扩展的事件处理程序；它包含对扩展很重要的浏览器事件的监听器。它处于休眠状态，直到触发一个事件，然后执行指示的逻辑。有效的后台脚本只在需要时加载，在空闲时卸载。

要创建后台脚本，请创建一个名为 background.js 的新文件并将其添加到扩展的根目录。以下是一个示例后台脚本：

chrome.runtime.onInstalled.addListener(() => {
  console.log('Extension installed.');
});

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  console.log('Received message:', request);
  sendResponse('Hello from the background script!');
});

此后台脚本包含两个事件监听器：

onInstalled：在安装扩展时触发。
onMessage：在接收到来自内容脚本或弹出窗口的消息时触发。

创建内容脚本

内容脚本是在浏览器中执行的 JavaScript 代码，可让扩展与网页交互。它们用于注入 HTML 和 CSS、修改 DOM 以及发送消息到后台脚本。

要创建内容脚本，请创建一个名为 content.js 的新文件并将其添加到扩展的根目录。以下是一个示例内容脚本：

console.log('Hello from the content script!');

document.body.style.backgroundColor = 'red';

此内容脚本会在将其注入到网页时执行以下操作：

在控制台中打印一条消息。
将文档正文的背景色更改为红色。

创建弹出窗口

弹出窗口是出现在浏览器中的小窗口，可用于显示信息或收集用户输入。

要创建弹出窗口，请创建一个名为 popup.html 的新文件并将其添加到扩展的根目录。以下是一个示例弹出窗口 HTML 文件：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>Hello from the popup!</h1>
  <button id="my-button">Click me</button>

  <script>
    document.getElementById('my-button').addEventListener('click', () => {
      chrome.runtime.sendMessage({greeting: 'Hello from the popup!'});
    });
  </script>
</body>
</html>

此弹出窗口 HTML 文件包含一个标题、一个按钮和一些 JavaScript。以下是如何为弹出窗口创建相应的 CSS 和 JS 文件：

/* popup.css */

body {
  font-family: Arial, sans-serif;
  font-size: 14px;
}

h1 {
  margin-bottom: 10px;
}

button {
  padding: 5px 10px;
  background-color: #008000;
  color: #fff;
  border: none;
  border-radius: 5px;
}

/* popup.js */

document.getElementById('my-button').addEventListener('click', () => {
  chrome.runtime.sendMessage({greeting: 'Hello from the popup!'});
});

创建选项页面

选项页面是用户可以配置扩展设置的页面。

要创建选项页面，请创建一个名为 options.html 的新文件并将其添加到扩展的根目录。以下是一个示例选项页面 HTML 文件：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>My Extension Options</h1>

  <form>
    <label for="my-option">My Option:</label>
    <input type="text" id="my-option" value="">

    <button type="submit">Save</button>
  </form>

  <script>
    document.getElementById('my-option').addEventListener('change', () => {
      chrome.storage.sync.set({myOption: document.getElementById('my-option').value});
    });
  </script>
</body>
</html>

此选项页面 HTML 文件包含一个标题、一个表单和一些 JavaScript。以下是相应的 CSS 和 JS 文件：

/* options.css */

body {
  font-family: Arial, sans-serif;
  font-size: 14px;
}

h1 {
  margin-bottom: 10px;
}

form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

label {
  margin-right: 5px;
}

input {
  width: 200px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button {
  padding: 5px 10px;
  background-color: #008000;
  color: #fff;
  border: none;
  border-radius: 5px;
}

/* options.js */

document.getElementById('my-option').addEventListener('change', () => {
  chrome.storage.sync.set({myOption: document.getElementById('my-option').value});
});