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

Question

I'm absolutly new to react and javascript and my problem is that the modal window which holds my react app, which is a chrome extension, gets injected to the DOM every time I click the extension-icon, resulting in strange rendering issues.

(The div with my modal window inside, gets added each time to the DOM when I click the icon).

Result looks like this:

modal Window injected multiple times after clicking icon multiple times

I would like to change it in a way that my component only gets added once to the DOM and on click should only hide/show.

My project is based on the following github project: https://github.com/upmostly/react-chrome-extension

I use the same manifest.json (you can find in public folder on the github link), the same background.js (also in public folder) and the same index.html (found in the src folder) as the project, I only changed the content of the React Components for my personal project.

I would be very happy to find some help here.

Best regards

Tobias

Answer 1

thank you to wOxxOm, who gave me an idea on how to do it. I changed the call of the main function in content.js to:

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
  }
});

and now it works like inteded.