代码末尾的 Chrome 扩展弹出刷新答案

【问题标题】：Chrome extension popup refresh at the end of code代码末尾的 Chrome 扩展弹出刷新
【发布时间】：2021-07-04 09:20:08
【问题描述】：

我编写了一个运行良好的 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>

【问题讨论】：

删除<form>
你知道为什么吗？
因为它的目的是将用户数据发送到服务器。扩展是本地的，它们没有服务器，所以页面只是重新加载。

标签： javascript google-chrome-extension

【解决方案1】：

回答（谢谢@wOxxOm）

只需删除 popup.html 中的

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

【讨论】：