why document.execCommand("copy") doesn't work in content script of my chrome extension? [duplicate]

Question

I want to write some data in to clipborad from a chrome extension which I'm creating. In the manifest file i gave permissions to both clipboardRead and clipboardWrite.

i use this function which i found here

but it doesn't work. seems that "document.execCommand('copy');" can not work.

i write all of these codes in content script.

thx manifest:

{
    "manifest_version":2,

    "name":"easyCopy",
    "description":"just a small toll",
    "version":"1.0.0",

    "permissions":[
        "clipboardWrite", "http://*/*", "clipboardRead"
    ],

    "content_scripts":[
        {
            "matches":["http://*/*"],
            "js":["jquery-1.9.1.min.js", "main_feature.js"]
        }
    ],

    "background":{
        "persistent":false,
        "page":"background.html"
    }
}

main_feature.js:

copyOrderId();
function copyOrderId() {
    $(".order-num").click(function () {
        var curOrderNum = $(this).text();
        copyTextToClipboard(curOrderNum);
//        chrome.extension.sendMessage({method:"copy", content:curOrderNum}, function (response) {
//            clog(response);
//        });
    });


}

function copyTextToClipboard(text) {
    var copyFrom = $('<textarea/>');
    copyFrom.text(text);
    $('body').append(copyFrom);
    copyFrom.select();
    document.execCommand('copy', true);
    copyFrom.remove();

}
function clog(message) {
    console.log(message);
}

the background.html is just a blank page with basic html body.

Answer 1

Thanks everyone, I ended up using this:

document.execCommand can not work in content script. Instead, I send data to background page and then run the "copyTextToClipboard" function.

Notice that you must put your JavaScript into single .js file instead of mixing it with background.html.

Additionally, the textarea must have an id or class property.