EditWeb：初学者 Chrome 插件开发

2023-10-18 02:23:09

在空闲时间里，我探索了 Chrome 插件开发，并开发了一些简单的小工具。今天，我将向您介绍第一个 Chrome 插件——EditWeb。它是一款非常简单的插件，非常适合初学者首次尝试。它有一个非常单一的功能，那就是让您快速编辑网页内容。

开发 EditWeb

EditWeb 的开发过程非常简单，它由以下几个主要部分组成：

1. 清单文件（manifest.json）

清单文件定义了插件的基本信息，例如名称、版本、权限和内容脚本。

{
  "name": "EditWeb",
  "version": "1.0",
  "manifest_version": 2,
  "permissions": ["<all_urls>"],
  "content_scripts": [
    {
      "matches": ["https://*/*", "http://*/*"],
      "js": ["content.js"]
    }
  ]
}

2. 内容脚本（content.js）

内容脚本在网页上下文中运行，它负责编辑网页内容。

document.addEventListener("dblclick", function(e) {
  if (e.target.tagName === "P") {
    e.target.contentEditable = true;
    e.target.focus();
  }
});

3. 弹出窗口（popup.html/popup.js）

弹出窗口是一个可选的部分，它提供了用户界面以控制插件的行为。

<button id="save-button">保存</button>

<script>
  document.getElementById("save-button").addEventListener("click", function() {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      chrome.tabs.sendMessage(tabs[0].id, {action: "save"});
    });
  });
</script>