Chrome Selection.addRange () does not select (example using execCommand ('copy'))

Writing a tiny browser extension in Chrome to copy certain text from certain web pages to the clipboard. HTML format so that people can embed it in office programs such as word, appearance, etc.

document.execCommand('copy')- this is the command I use, it is launched by the key combination document.onkeydown(Alt + 1), and it works fine - but only for the first time. If you try to press the key combination again, it will do nothing.

I found the reason for this, document.queryCommandEnabled("copy")returning true for the first time and false for any additional attempt. If I reload the page, it returns true again. In addition, if I clicked outside the browser window after loading the page, and then clicked in the browser and used a key combination, false is returned immediately, even for the first time.

function copy(text) {
  var sel = document.createElement("div"); // Creating temporary holder for text to copy

  sel.style.opacity = 0;             sel.style.position = "absolute";  // These are not really required,
  sel.style.pointerEvents = "none";  sel.style.zIndex = -1;            // at least for Chrome

  sel.innerHTML = text; // Put the text to copy into the temporary holder

  document.body.appendChild(sel); // Add the temporary holder to the page

  var range = document.createRange();     // All this is required to select the text,
  range.selectNode(sel);                  // since the holder is not an editable text
  window.getSelection().addRange(range);  // field and must be treated differently.

  // document.designMode = 'on'; (Tried this, no effect)

  /* Debugging */ alert("Enabled = " + document.queryCommandEnabled("copy") + " Design mode = " + document.designMode);

  try {
    document.execCommand('copy'); // Copy to clipbopard
  }
  catch (err) {
    alert('Unable to copy');
    console.log('Unable to copy'); // Copy failed?!
  }

  // document.designMode = 'off'; (Tried this, no effect)

  document.body.removeChild(sel); // Clean up removing the temporary holder
}

document.onkeydown=function(e){
  if(e.altKey && e.which == 49) { // Alt+1
    copy(link_variable);
    return false;
  }
}

Any ideas?

Adding a manifest file:

{
  "manifest_version": 2,
  "name": "Usage text",
  "version": "0.2",
  "description": "Whatever",
  "content_scripts": [
    {
      "matches": [
        "*://some.specific.site.com/*"
      ],
      "js": ["content.js"]
    }
  ],
  "background": {
    "scripts": ["background.js"]
  },
  "browser_action": {
      "name": "Whatever",
      "default_icon": "icon.png"
  },
  "permissions": [
    "tabs",
    "clipboardWrite"
  ]
}

Update:

Transfer the operation from the script content to the background script unchanged.

+4
source share
1 answer

When trying the code from the question, Chromium 59 wrote this warning:

[] , Selection.addRange() , . . https://www.chromestatus.com/features/6680566019653632.

  • Chrome

    , Selection.addRange(), Blink , , . , Blink Range. Edge.

  • W3C,

  • W3C.

addRange() , :

  1. rangeCount 0, .

, , . window. getSelection().rangeCount . , , , .

removeAllRanges() addRange() :

var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
+4

Source: https://habr.com/ru/post/1681393/


All Articles