每次单击扩展的图标时，React chrome 扩展都会插入到 DOM 中，应该只插入一次答案

【问题标题】：React chrome extension gets inserted into DOM every time the Icon of the Extension is clicked, should only be inserted once每次单击扩展的图标时，React chrome 扩展都会插入到 DOM 中，应该只插入一次
【发布时间】：2021-01-18 12:41:49
【问题描述】：

我对 react 和 javascript 完全陌生，我的问题是，每次单击扩展图标时，保存我的 react 应用程序的模态窗口（这是一个 chrome 扩展）都会注入到 DOM 中，从而导致奇怪的渲染问题。

（带有我的模态窗口的 div，每次单击图标时都会添加到 DOM）。

结果如下所示：

modal Window injected multiple times after clicking icon multiple times

我想改变它，让我的组件只添加到 DOM 一次，点击时应该只隐藏/显示。

我的项目基于以下github项目： https://github.com/upmostly/react-chrome-extension

我使用与项目相同的 manifest.json（您可以在 github 链接的 public 文件夹中找到）、相同的 background.js（也在 public 文件夹中）和相同的 index.html（在 src 文件夹中） , 我只是为我的个人项目更改了 React Components 的内容。

我很乐意在这里找到帮助。

最好的问候

托比亚斯

【问题讨论】：

在你的内容脚本中添加一个全局变量，只有当它不为真时才继续，然后将它设置为真。

标签： javascript reactjs google-chrome-extension

【解决方案1】：

感谢 wOxxOm，他给了我一个关于如何做到这一点的想法。我将content.js中main函数的调用改为：

var not_proceed = false;
var showing = true;
chrome.runtime.onMessage.addListener(function(request, sender, callback) {
  if (not_proceed){
    var elem = document.getElementById("modal-window")
    if(showing){
      elem.style.display = "none";
      showing = false;}
    else {
      elem.style.display = "block";
      showing = true;
    }
  }
  else {
    main();
    not_proceed = true
  }
});

现在它像 inteded 一样工作了。

【讨论】：