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

Question

我绝对是 React 的新手，javascript 我的问题是模态 window 包含我的 React 应用程序，它是一个 chrome 扩展，被注入到DOM 每次点击扩展图标，都会出现奇怪的渲染问题。

（里面有我的模式 window 的 div，每次单击图标时都会添加到 DOM。

结果如下所示：

modal Window injected multiple times after clicking icon multiple times

我想更改它，使我的组件只添加一次到 DOM 并且在点击时应该只 hide/show.

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

我使用相同的manifest.json（你可以在githublink上的public文件夹中找到），相同的background.js（也在public 文件夹）和项目相同的 index.html （在 src 文件夹中找到），我只更改了我个人项目的 React 组件的内容。

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

此致

托比亚斯

Answer 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 一样工作了。

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

React chrome extension gets inserted into DOM every time the Icon of the Extension is clicked, should only be inserted once

javascript

google-chrome-extension

reactjs