Copy to Clipboard in Chrome Extension

Copy to Clipboard in Chrome Extension

You can copy to clipboard using Experimental Clipboard API, but it is available only in the dev branch of a browser and not enabled by default (more info)..

Copy to clipboard in chrome extension V3

I'll follow the excellent suggestion wOxxOm gave you, elaborating it in a concrete example. What you want to do is have a ContentScript.js that runs on any active tab with a web page, since you can't access the DOM from the backGround.js, and then send a message to this script, from where you would copy to the clipboard.

manifest.json

    "background" :{
        "service_worker" :"eventPage.js"
    },
    "permissions" : [
        "contextMenus",
        "clipboardWrite"      
    ],
   "content_scripts": [ // this is what you need to add
      {
         "matches": [
            "<all_urls>"
         ],
         "js": ["content.js"]
      }
   ],

From the background.js, you would send a message, that will be handled in the ContentScript.js

background.js

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.tabs.sendMessage(tabs[0].id, 
        {
            message: "copyText",
            textToCopy: "some text" 
        }, function(response) {})
})

In the contentScript.js, you would catch the message and copy it to the clipboard.

content.js

chrome.runtime.onMessage.addListener( // this is the message listener
    function(request, sender, sendResponse) {
        if (request.message === "copyText")
            copyToTheClipboard(request.textToCopy);
    }
);

async function copyToTheClipboard(textToCopy){
    const el = document.createElement('textarea');
    el.value = textToCopy;
    el.setAttribute('readonly', '');
    el.style.position = 'absolute';
    el.style.left = '-9999px';
    document.body.appendChild(el);
    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);
}

Copy text to clipboard when a Chrome extension’s browser action is clicked

The textarea element should be added to the live DOM first e.g. to document.body and focused because execCommand operates on document.activeElement. You can hide the textarea so it doesn't flicker.

function copy(text) {
  const ta = document.createElement('textarea');
  ta.style.cssText = 'opacity:0; position:fixed; width:1px; height:1px; top:0; left:0;';
  ta.value = text;
  document.body.appendChild(ta);
  ta.focus();
  ta.select();
  document.execCommand('copy');
  ta.remove();
}

Might wanna set a few more CSS props to none or 0 like border/padding/margin just in case.

Copy to clipboard in chrome extensions

Copy works strangely. You should register an event listener for the copy, then this will be called when you do the document.execCommand('copy').

This is a working example of the event handler:

document.addEventListener('copy', function(e) {
  var textToPutOnClipboard = "some text which should appear in clipboard";
  e.clipboardData.setData('text/plain', textToPutOnClipboard);
  e.preventDefault();
});

How to copy to clipboard in chrome extension with a link?

It doesn't work because you use inline JS: <a onclick="...">.
According to Chrome's Content Security Police:

Inline JavaScript will not be executed. This restriction bans both inline blocks and inline event handlers (e.g. ).

The solution will be to put your code into a separate .js file and include it as a usual JS-script.

Clipboard Copy / Paste on Content script (Chrome Extension)

Content scripts cannot use the clipboard at the moment. In the future, once crbug.com/395376 is resolved, then the code as shown in the question will work as intended.

Until that bug is fixed, you have to send the data to the background page and copy the text from there:

// content script
chrome.runtime.sendMessage({
    type: 'copy',
    text: 'some text to copy'
});

Script on background page or event page:

chrome.runtime.onMessage.addListener(function(message) {
    if (message && message.type == 'copy') {
        var input = document.createElement('textarea');
        document.body.appendChild(input);
        input.value = message.text;
        input.focus();
        input.select();
        document.execCommand('Copy');
        input.remove();
    }
});

Copying text to clipboard in Chrome extension

Here's some working (Coffeescript) code that does copy / paste: https://github.com/philc/vimium/blob/master/lib/clipboard.coffee

Note that the code above runs in the background page; there was a bug a while back which broke execCommand in content scripts, and I'm not sure if that was ever fixed.

---

Related Topics