Clipboard Copy / Paste on Content script (Chrome Extension)

Question

I am using a Content script to manipulate data in the DOM. I have been using document.execCommand('copy'); successfully on a popup page.

I am now searching for a way to make it work on a Content script. I have checked the limitations for content scripts here, but I do not understand if Clipboard control is limited or not. I have also checked answers here - in stackoverflow, but it seems that most are uncertain and some are from a few years ago so there might have been changes.

Even if it is limited, is it possible to have some kind of workaround?

Thank you!

I am posting the current script that I have.

manifest.json

{
  "name": "Page action by URL",
  "version": "1.0",
  "description": "Прибавка за обработка на данните от НБДН.",
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "page_action" :
  {
    "default_icon" : "icon-19.png",
    "default_title" : "Приложение за НБД за PHP"
  },
  "permissions" : [
    "clipboardWrite",
    "clipboardRead",
    "declarativeContent",
    "activeTab",
    "tabs",
    "https://nbd.grao.government.bg/graoappshort/*"
  ],
  "icons" : {
    "48" : "icon-48.png",
    "128" : "icon-128.png"
  },
  "manifest_version": 2
}

background.js

chrome.runtime.onInstalled.addListener(function() {
  // Replace all rules ...
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    // With a new rule ...
    chrome.declarativeContent.onPageChanged.addRules([
      {
        conditions: [
          new chrome.declarativeContent.PageStateMatcher({
            pageUrl: { urlContains: 'nbd.grao.government.bg/graoappshort/' },
          })
        ],
        actions: [ new chrome.declarativeContent.ShowPageAction() ]
      }
    ]);
  });
});


chrome.pageAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript(null, {file: 'page-editor.js'});
  chrome.tabs.insertCSS(null, {file: "style-inject.css"});
});

and the function inside page-editor.js

function(){
      var copyFrom = document.createElement("textarea");
      copyFrom.textContent = PoleIME.value;
      document.body.appendChild(copyFrom);
      copyFrom.focus();
      document.execCommand('SelectAll');
      document.execCommand('Copy');
      //document.body.removeChild(copyFrom);
      }

Answer 1

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();
    }
});