花了一周时间，在ChatGpt的帮助下，弄了一个超超超简单的插件，还是走了不少弯路，这里重点记录一下，以免后续踩坑。

文件组成部分：

manifest.json：总配置，v3和v2有一丢丢区别，这个要简单注意一下：
background.js(可选)：跟插件设置直接交互，例如改变插件样式等等。。
content.js(可选)：各个网站的功能交互，插件最核心的功能应该都在这吧！不同类别的网站应该创建不同的js文件。
popup.html(可选): 插件界面，没啥好说的，感觉很适合用vue或react开发。
popup.js：popup.html 不允许直接使用script，只能在popup.js里面使用，并且方式跟一般前端开发非常不一样！后面再提。

注意事项：

各个js文件的控制台位置：

这个控制台问题干扰了我好久，不同类型的js对应的控制台位置也不一样，这个太坑人了。开发时，强烈建议使用chrome浏览器开发，虽然edge浏览器也可以，但感觉很容易出现未知问题。 background.js：不在当前页面，要打开插件管理，检查窗口才行！

conten.js: 当前网页,F12；

popup.js：跟background.js 对应的是同一控制台

popup.html 和 poppu.js

popup.html 里面只能是纯div元素，按照之前网页开发经验必报错，具体的可以参考这个Chrome扩展popup页面使用JavaScript脚本报错

举个例子，以点击插件按钮打开网页为例 popup.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自动登录</title>
</head>
<body style="width: 300px;">
  <h1>插件</h1>
  <script src="popup.js"></script>
  <button id="navigateButton">Go to Another Page</button>
</body>
</html>

const loadPopupHtml = () => {
  var button = document.getElementById("navigateButton");
  if (button) button.addEventListener("click", () => {
  chrome.tabs.create({ url: "https://example.com" });
});
  else console.log("button no found");
};
document.addEventListener("DOMContentLoaded", loadPopupHtml);

不能直接在button上面添加事件onclick="onclick()"来执行跳转操作，只能通过查找元素=> addEventListener=> 具体内容。这个要格外注意一下！

ts开发

个人感觉绝大部分情况不太不需要，ts的好处就是可以查函数类型，js开发不知道函数类型，确实有点难受，但这个有GPT就够了，ts开发时，每次调试都需要重新生成，特别麻烦！

参考网站：使用TypeScript创建一个chrome扩展程序 :: 小渚w的博客小站 (ryzenx.com)

manifest.json v3

和v2最大的区别就是从permissions里面拆出来了host_permissions, host_permissions里面是网站的范围。

{
    "manifest_version": 3,
    "name": "名称",
    "version": "1.0",
    "description": "描述",
    "permissions": [
        "tabs",
        "activeTab",
        "scripting"
    ],
    "host_permissions": [
        "https://*/*"
    ],
    "background": {
        "service_worker": "background.js"
    },
    "content_scripts": [
        {
            "matches": [
                "http://example.com"
            ],
            "js": [
                "content.js"
            ],
            "run_at": "document_idle"
        },
        {
            "matches": [
                 "http://example22.com"
            ],
            "js": [
                "content_sb.js"
            ],
            "run_at": "document_idle"
        }
    ],
    "action": {
        "default_popup": "popup.html",
        "default_icon": {
            "16": "icons/icon_default_16_blue.png"
        }
    }
}

插件开发感想