第一个扩展教程

欢迎来到我们的教程系列，今天我们将介绍如何创建你的第一个扩展。扩展是增强浏览器功能和用户体验的强大工具。

安装扩展开发环境

首先，你需要安装一些开发工具。以下是一个简单的步骤列表：

创建你的第一个扩展

创建一个文件夹：在你的电脑上创建一个名为 my-first-extension 的文件夹。
创建一个HTML文件：在这个文件夹中创建一个名为 background.html 的文件，并添加以下内容：

<!DOCTYPE html>
<html>
<head>
  <title>我的第一个扩展</title>
</head>
<body>
  <h1>欢迎来到我的第一个扩展</h1>
  <p>这是一个简单的扩展，它会在浏览器的工具栏上显示一个按钮。</p>
</body>
</html>

创建一个背景脚本：在这个文件夹中创建一个名为 background.js 的文件，并添加以下内容：

chrome.browserAction.onClicked.addListener(function(tab) {
  alert('扩展按钮被点击了！');
});

创建一个manifest文件：在这个文件夹中创建一个名为 manifest.json 的文件，并添加以下内容：

{
  "manifest_version": 2,
  "name": "我的第一个扩展",
  "version": "1.0",
  "description": "这是一个简单的扩展示例。",
  "browser_action": {
    "default_popup": "background.html",
    "default_icon": "icon.png"
  }
}

添加一个图标：创建一个名为 icon.png 的图标文件，并将其放在 my-first-extension 文件夹中。

测试你的扩展

打开Chrome或Firefox的开发者模式。
点击工具栏上的扩展程序图标，然后选择“加载已解压的扩展程序”。
选择 my-first-extension 文件夹。

现在你应该能看到你的扩展已经安装并运行了！

下一步

现在你已经创建并测试了你的第一个扩展，你可以继续学习如何添加更多功能，比如：

继续探索，享受扩展开发的乐趣吧！😄