Chrome 代码末尾的扩展弹出窗口刷新

Question

我编写了一个运行良好的 chrome 扩展程序（获取特定页面上的 cookie 信息，获取数据并在弹出窗口的文本区域中打印）。但是在添加其他检查后，我的弹出窗口停止打印我的数据。

我尝试搜索原因，发现我的弹出窗口在我的代码结束后立即刷新。为了测试，我只是编写了以下简单文件，但问题仍然存在。

刚刚安装后，当我打开弹出窗口时，我可以在控制台日志中正确看到“背景”文本。说得好。

但是当我点击按钮时，我很快在控制台日志中看到文本“测试”，但弹出窗口立即刷新，然后控制台重置信息，我的按钮再次返回而不是保持不可见。

我不知道为什么以前没有刷新弹出窗口。你有想法吗？有什么不明白的吗？

感谢您的帮助。

Manifest.json

{
  "manifest_version": 3,
  "name": "Test extention",
  "description": "Test extension",
  "version": "1.0",
  "icons": {
    "16": "./img/icon_16.png",
    "32": "./img/icon_32.png",
    "48": "./img/icon_48.png",
    "64": "./img/icon_64.png",
    "128": "./img/icon_128.png"
  },
  "background": {
    "service_worker": "./background.js"
  },
  "action": {
    "default_popup": "./popup.html",
    "default_title": "Test Extention",
    "default_icon": {
      "16": "img/icon_16.png",
      "32": "img/icon_32.png",
      "48": "./img/icon_48.png",
      "64": "img/icon_64.png",
      "128": "img/icon_128.png"
    }
  },
  "permissions": [
    "declarativeContent",
    "storage",
    "cookies",
    "tabs",
    "activeTab",
    "scripting"
  ]
}

background.js

console.log("background");

popup.js

const startOfScript = () => {
  optionsForm.startlabel.style.display = "none";
  console.log("test");
};
optionsForm.startlabel.addEventListener("click", startOfScript);

popup.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <p class="title">Fred's AI Marketing extention</p>
      <form id="optionsForm">
        <button id="startlabel">Récupérer les données</button>
      </form>
      <script src="./popup.js"></script>
    </div>
  </body>
</html>

Answer 1

回答（谢谢@wOxxOm）

只需删除 popup.html

中的

该节点会同时自动刷新表单和弹窗。

Chrome 代码末尾的扩展弹出窗口刷新

Chrome extension popup refresh at the end of code

javascript

google-chrome-extension