likes
comments
collection
share

手把手教你写 Chrome 插件

作者站长头像
站长
· 阅读数 39

第一步：创建项目文件夹

首先，你需要为你的插件创建一个项目文件夹。这个文件夹将包含你的插件的所有代码和资源。你可以将这个文件夹命名为你的插件名字。

第二步：创建清单文件

Chrome 插件需要一个清单文件来描述它的名称、版本、权限和其他重要信息。在你的项目文件夹中创建一个名为 manifest.json 的文件，并在其中添加以下内容：

{
  "manifest_version": 3,
  "name": "插件名称",
  "version": "1.0",
  "description": "插件描述",
  "permissions": [
    "activeTab",
    "scripting",
    "storage"
  ],
  "action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": ["*://*/*"],
      "js": ["content.js"]
    }
  ],
  "background": {
    "service_worker": "service-worker.js"
  }
}

这个清单文件指定了插件的名称、版本、描述和需要的权限。它还定义了插件的浏览器操作，包括默认图标和弹出窗口。此外，它还定义了一个 content script 和一个 service worker。

第三步：创建弹出窗口

现在，你需要创建一个弹出窗口，当用户单击插件图标时会显示。在你的项目文件夹中创建一个名为 popup.html 的文件，并在其中添加以下内容：

<!doctype html>
<html>
  <head>
    <title>插件名称</title>
    <script src="popup.js"></script>
  </head>
  <body>
    <h1>欢迎使用插件名称！</h1>
    <button id="checkPage">检查页面</button>
  </body>
</html>

这个 HTML 文件将被用作弹出窗口的内容。它包含一个标题、一个按钮和一个用于加载 JavaScript 文件的标记。

第四步：创建 JavaScript 文件

现在，你需要创建一个 JavaScript 文件来处理弹出窗口中的逻辑。在你的项目文件夹中创建一个名为 popup.js 的文件，并在其中添加以下内容：

chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: {tabId: tab.id},
    function: () => {
      chrome.runtime.sendMessage({ message: '检查页面' });
    }
  });
});

chrome.runtime.onMessage.addListener((message) => {
  if (message === '页面检查完成') {
    alert('检查完成！');
  }
});

第五步：创建 content script 文件

现在，你需要创建一个 JavaScript 文件来注入到匹配页面中。在你的项目文件夹中创建一个名为 content.js 的文件，并在其中添加以下内容：

chrome.runtime.onMessage.addListener((message) => {
  if (message === '检查页面') {
    // 检查页面逻辑
    chrome.runtime.sendMessage({ message: '页面检查完成' });
  }
});

这个 JavaScript 文件将在匹配的页面上运行，并监听来自 popup.js 的消息。它执行检查页面逻辑，并向 popup.js 发送消息以表示检查已完成。

第六步：创建 service worker 文件

现在，你需要创建一个 service worker 文件来处理后台逻辑。在你的项目文件夹中创建一个名为 service-worker.js 的文件，并在其中添加以下内容：

chrome.runtime.onInstalled.addListener(() => {
  chrome.storage.local.set({ status: 'idle' });
});

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message === '开始检查') {
    chrome.storage.local.set({ status: 'running' });

    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
      const tab = tabs[0];
      chrome.scripting.executeScript({
        target: { tabId: tab.id },
        function: () => {
          // 检查页面逻辑
          chrome.runtime.sendMessage({ message: '检查完成' });
        }
      });
    });
  }
});

chrome.runtime.onMessage.addListener((message) => {
  if (message === '检查完成') {
    chrome.storage.local.set({ status: 'idle' });
  }
});

这个 service worker 文件将在后台运行，并监听来自 popup.js 的消息。它启动页面检查逻辑，并向 popup.js 发送消息以表示检查已完成。它还使用 Chrome 存储 API 跟踪插件的状态。

第七步：打包和安装插件

现在，你已经编写了所有必要的代码，可以将插件打包并安装到浏览器中了。在 Chrome 浏览器中，转到扩展程序页面（chrome://extensions/），启用开发者模式，并单击“加载已解压的扩展程序”按钮。选择你的项目文件夹，并单击“选择文件夹”按钮。现在，你的插件已经安装并启用了。在浏览器中打开一个新标签页，并单击你的插件图标以显示弹出窗口。单击“检查页面”按钮，你应该会看到一个警告框，表示检查已完成。

转载自:https://juejin.cn/post/7225992011723538490
评论
请登录