创建一个简单的 Chrome 扩展步骤 1：准备工作确保你的电脑上已经安装了 Google Chrome 浏览器。步

步骤 1：准备工作

确保你的电脑上已经安装了 Google Chrome 浏览器。

步骤 2：创建扩展文件夹

在选择的工作目录中创建一个新文件夹，命名为 ExtensionDemo。

步骤 3：创建扩展清单文件

在 ExtensionDemo 文件夹下创建一个名为 manifest.json 的文件，这是 Chrome 扩展的清单文件。

// manifest.json

{
  "manifest_version": 2,
  "name": "Extension Demo",
  "version": "1.0",
  "description": "一个简单的 Chrome 扩展示例",
  "browser_action": {
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    },
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab"
  ]
}

上述清单文件指定了扩展的基本信息，包括名称、版本、描述、图标等。它还定义了浏览器操作（browser action）以及扩展需要的权限。

步骤 4：创建图标

在 ExtensionDemo 文件夹中创建一个名为 images 的文件夹，并在其中添加图标文件 icon16.png、icon48.png 和 icon128.png。这些图标将用于扩展按钮。

步骤 5：创建弹出页面

在 ExtensionDemo 文件夹中创建一个名为 popup.html 的文件，用于定义浏览器操作的弹出页面。

<!-- popup.html -->

<!DOCTYPE html>
<html>
<head>
  <title>Extension Demo</title>
  <style>
    body {
      width: 200px;
      padding: 10px;
    }
  </style>
</head>
<body>
  <h2>Hello, this is Extension Demo!</h2>
  <button id="clickMe">Click Me!</button>
  <script src="popup.js"></script>
</body>
</html>

步骤 6：创建弹出页面的脚本

在 ExtensionDemo 文件夹中创建一个名为 popup.js 的文件，用于定义浏览器操作弹出页面的行为。

// popup.js

document.addEventListener('DOMContentLoaded', function() {
  var clickMeButton = document.getElementById('clickMe');
  clickMeButton.addEventListener('click', function() {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      var activeTab = tabs[0];
      chrome.tabs.sendMessage(activeTab.id, {'message': 'clicked_browser_action'});
    });
  });
});

步骤 7：创建背景脚本

在 ExtensionDemo 文件夹中创建一个名为 background.js 的文件，用于定义后台脚本，处理扩展的一些逻辑。

javascript

// background.js

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if(request.message === 'clicked_browser_action') {
      chrome.tabs.executeScript({
        file: 'content.js'
      });
    }
  }
);

步骤 8：创建内容脚本

在 ExtensionDemo 文件夹中创建一个名为 content.js 的文件，用于定义扩展在页面上注入的内容脚本。

// content.js

alert('Hello from Extension Demo!');

步骤 9：加载扩展

打开 Chrome 浏览器，访问 chrome://extensions/。
在页面上启用“开发者模式”。
单击“加载已解压的扩展”，选择 ExtensionDemo 文件夹。

步骤 10：测试扩展

在 Chrome 中打开任何网页。
单击地址栏右侧的扩展图标。
单击浏览器操作弹出页面中的“Click Me!”按钮。

你应该看到一个弹窗显示 "Hello from Extension Demo!"。

PS：如果有需要补充的内容，请在评论区留言

转载时请注明“来自掘金 - EvenZhu”