How do I prompt user for clipboard read permission in the popup of the chrome extension?

Question

I am building out my first Google Chrome Extension and want to create something that can read and write to the system clipboard. I am currently putting all the js in a script imported by the popup.html for the extension.

I also have permissions declared in the manifest.json for clipboard-read and clipboard-write.

I was able to write data into the clipboard, but I am unable to read from it.

I have a button on the popup.html that has an id and in the js I am getting element by id and adding a eventlistener for click that fires a function called paste which in turn invokes navigator.clipboard.readText(). From my understanding, that is supposed to prompt for permission, but it is not doing anything.

Do you know if it's okay to invoke readText from the popup.html? If so, how would get the prompt to show up? Thanks in advance!

Answer 1

If you include JQuery as a background script you can use this (I use this all the time in my chrome extensions) to move text to the clipboard and then if you have a past method you can do that in the settimeout...

function copyUsingJquery(element_id) {
            $(element_id).attr("contenteditable", true)
              .select()
              .on("focus", function () {
                  document.execCommand('selectAll', false, null)
              })
              .focus();
            document.execCommand("Copy");
            $(element_id).removeAttr("contenteditable");

            setTimeout(function () {
                //deslect text on page after a few seconds
                //$(element_id).trigger("blur");
                window.getSelection().removeAllRanges();
            }, 5000);

        }

and then call the above function with the following where some_html is your element (could be a div/must be visible or positioned to not be visible...

copyUsingJquery("#some_html");

Hope this helps.