How can I make it work stably and insert as chrome extension?

Question

This code performs saving and sorting innerHTMLtext of body by count of times you pressed combination of keys. It works, but at some point of time script stops working at all and it need to be changed or file that contain it has to be renamed to continue working. Besides I tryed add it as Chrome extension and in debug mode I see that script connected (it output conlose.log after DOMContentLoaded event handler), but it skips some blocks of code and after every fix different one. You can see this phenomenon in both "local server" and "browser extension" program modes. I tried somehow work out this problem, looked through a lot of forums and solutions and still don t have a solution. So it's sad that I can t have a solution. So it's sad that I can t end up my first mini project on native js(. Sincerely wish for your guidence.

popup.js

document.addEventListener("DOMContentLoaded", function() {
  let inputEl = document.body;
  inputEl.addEventListener("keydown", copy_paste);
});

console.log('It connected');

let storage = {};

function copy_paste(e) {
  if (e.ctrlKey && e.key == "q") {
    let inputValue = window.getSelection();
    navigator.clipboard.writeText(inputValue).then(
      navigator.clipboard.readText().then((text) => {
        if (!storage.hasOwnProperty(text)) storage[text] = 1;
        else storage[text] += 1;
        mySort(storage);
      })
    );
  }
}

function show(arrStorage) {
  let parent = document.getElementById("insert");
  parent.innerHTML = "";
  for (let i = 0; i < arrStorage.length; i++) {
    let para = document.createElement("h4");
    para.innerText = arrStorage[i][0] + " : " + arrStorage[i][1];
    parent.appendChild(para);
  }
}

function mySort(storage) {
  let arrStorage = [];
  for (let key in storage) {
    arrStorage.push([key, storage[key]]);
  }
  arrStorage.sort(function (a, b) {
    return b[1] - a[1];
  });
  show(arrStorage);
}

Answer 1

navigator.clipboard.readText() requires clipboard-read permission of Permission API.
https://developer.mozilla.org/en-US/docs/Web/API/Clipboard

The default value of clipboard-read is "prompt" (in my case) that means calling .readText() cause popup message to request permission of clipboard reading.

When your popup.html is opened in active tab (by defining popup.html as options page in manifest.json , for example), the popup message appears at keydown of cntl-q. After clicking OK in the popup, the permission information is stored in Chrome. You can see it in:
chrome://settings/content or chrome://settings/content/all .

Unfortunately, when popup.html is opened as popup of browser action, the permission popup seems to be blocked, and your extension seems to stop. I dont know why, but gess it is by security reason.

I think there is no way to permit clipboard-read in program without user interevension.