I want to removeEventListener when I stop my google extension

Question

I want to removeEventListener after I stop my google extension.

When I click on my extension, it allows me to open my CSS file, call createDiv to create a stop extension button, and I make the call to loadScript to create a click event on the document.

However, I also want to remove the event listener when I click again on the extension or on the div I created.

When I click on my extension, it allows me to open my CSS file, call createDiv to create a stop extension button, and I make the call to loadScript to create a click event on the document.

However, I also want to remove the event listener when I click again on the extension or on the div I created. I tried something like: The console.log('fermer'); message does trigger, but it seems like it's not detecting the correct event, even though it remains unchanged.

So, I'd like to know if there's another method. Thank you very much for your patience.

I tried something like :

var scriptLoaded = false;

chrome.runtime.onInstalled.addListener(() =>
{
  chrome.action.setBadgeText({
    text: ''
  });
  scriptLoaded = false;
});

chrome.action.onClicked.addListener(async (tab) =>
{
    const prevState = await chrome.action.getBadgeText({ tabId: tab.id });
    const nextState = prevState === 'ON' ? '' : 'ON';

    await chrome.action.setBadgeText({
      tabId: tab.id,
      text: nextState
    });

    await chrome.scripting.executeScript({
      function: createDiv,
      args: [nextState],
      target: { tabId: tab.id }
    });

    if (nextState === 'ON')
    {
      if(!scriptLoaded)
      {
        await chrome.scripting.executeScript({
          function: loadScript,
          args: [true],
          target: { tabId: tab.id }
        });
        scriptLoaded = true;
      }
      await chrome.scripting.insertCSS({
        files: ['focus-mode.css'],
        target: { tabId: tab.id }
      });
    }
    else if (nextState === '')
    {
      await chrome.scripting.removeCSS({
        files: ['focus-mode.css'],
        target: { tabId: tab.id }
      });

      await chrome.scripting.executeScript({
        function: loadScript,
        args: [false],
        target: { tabId: tab.id }
      });
    }
});

chrome.runtime.onMessage.addListener(async function(message, sender, sendResponse)
{
  if (message.action === 'updateBadge')
  {
    await chrome.scripting.executeScript({
      function: createDiv,
      args: [message.text],
      target: { tabId: sender.tab.id }
    });

    await chrome.scripting.removeCSS({
      files: ['focus-mode.css'],
      target: { tabId: sender.tab.id }
    });

    await chrome.action.setBadgeText({
      tabId: sender.tab.id,
      text: message.text
    });

    await chrome.scripting.executeScript({
      function: loadScript,
      args: [false],
      target: { tabId: sender.tab.id }
    });
  }
});


function createDiv(boolCreate)
{
  if(boolCreate === 'ON')
  {
    var exitDiv = document.createElement('div');
    exitDiv.textContent = "Exit Extension";
    exitDiv.classList.add('exit-button');

    document.body.appendChild(exitDiv);

    exitDiv.addEventListener('click', function()
    {
      chrome.runtime.sendMessage({ action: 'updateBadge', text: ''});
    });
  }
  else if(boolCreate === '')
  {
    var exitDiv = document.querySelector('.exit-button');
    exitDiv.parentNode.removeChild(exitDiv);
  }
}

function loadScript(activeOrNot)
{
  if(activeOrNot)
    document.addEventListener("click", sayColor);
  else
  {
    document.removeEventListener("click", sayColor);
    console.log('fermer');
  }

  function sayColor(event)
  {
    const target = event.target;
    const backgroundColor = getComputedStyle(target).backgroundColor;
    const textColor = getComputedStyle(target).color;

    const colorInfo =
    {
      backgroundColor: rgbToHex(backgroundColor),
      textColor: rgbToHex(textColor),
    };

    console.log("Background-color : " + colorInfo.backgroundColor + ", color: " + colorInfo.textColor);
  }


  function rgbToHex(rgb)
  {
    const match = rgb.match(/(\d+),\s*(\d+),\s*(\d+)/);
    if (!match) return "";
    const r = parseInt(match[1]).toString(16).padStart(2, "0");
    const g = parseInt(match[2]).toString(16).padStart(2, "0");
    const b = parseInt(match[3]).toString(16).padStart(2, "0");
    return `#${r}${g}${b}`;
  }
}