Geek Answers Handbook

Writing text to the clipboard

I want to write a text variable to the clipboard through the Chrome extension, this will happen when the user presses a short-term key. I did all the parts except writing to the clipboard.

I searched the entire StackOverflow using the following keywords: "[google-chrome-extension] Clipboard"

So, I want to say that I saw everything related to:

  • Add clipboardRead and clipboardWrite permission (already done)
  • Add text to <textarea> , call document.execCommand('Copy'); or document.execCommand("Copy", false, null);

Even I tried the extension on StackOverflow textarea , and I entered my text into the wmd input part of StackOverflow textarea , then selected it and then called up a copy. Nothing, nothing, nothing ...

Everyone tried it. Please advise ... What am I missing?

+8
source share
4 answers

You can try the following code, it writes text to the clipboard

As an example, I wrote Sample to the clipboard

Exit

enter image description here

manifest.json

the manifest file is the key for all chrome extensions, it is guaranteed that it has all permissions

  { "name": "Copy to ClipBoard Demo", "description" : "This is used for demonstrating Copy to Clip Board Functionality", "version": "1", "browser_action": { "default_popup": "popup.html" }, "permissions":["clipboardWrite"], "manifest_version": 2 }

popup.html

Trivial action of a browser HTML file with input field and button

 <html> <head> <script src="popup.js"></script> </head> <body> <input type="text" id="text" placeHolder="Enter Text To Copy"></input> <button id="copy">Copy</button> </body> </html>

popup.js

It copies the contents of the <input> to the clipboard

 function copy() { //Get Input Element var copyDiv = document.getElementById('text'); //Give the text element focus copyDiv.focus(); //Select all content document.execCommand('SelectAll'); //Copy Content document.execCommand("Copy", false, null); } //Add Event Listeners to Button Click document.addEventListener("DOMContentLoaded", function () { document.getElementById("copy").onclick = copy; });

OR

 function copy(){ //Get Input Element document.getElementById("text").select(); //Copy Content document.execCommand("Copy", false, null); } //Add Event Listeners to Button Click document.addEventListener("DOMContentLoaded", function () { document.getElementById("copy").onclick = copy; });
+5
source

Based on https://stackoverflow.com/a/312960/

 function directCopy(str){ //based on /questions/173053/copy-to-clipboard-in-chrome-extension/977595#977595 document.oncopy = function(event) { event.clipboardData.setData("Text", str); event.preventDefault(); }; document.execCommand("Copy"); document.oncopy = undefined; }
+9
source

Swonds, for example, you're trying to copy the contents of a script. The output of joelpt and Jeff Gran answers this answer , here's how to copy any piece of text from the contents of a script:

 "permissions": [ "clipboardWrite",...

In your main.js or any background script:

 chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){ var copyFrom = document.createElement("textarea"); copyFrom.textContent = request.text; var body = document.getElementsByTagName('body')[0]; body.appendChild(copyFrom); copyFrom.select(); document.execCommand('copy'); body.removeChild(copyFrom); })

From your content script:

 chrome.runtime.sendMessage({text:textToCopy});
+1
source

Usage example:

copyStringToClipboard ("abv123");

  function copyStringToClipboard (str) { // Create new element var el = document.createElement('textarea'); // Set value (string to be copied) el.value = str; // Set non-editable to avoid focus and move outside of view el.setAttribute('readonly', ''); el.style = {position: 'absolute', left: '-9999px'}; document.body.appendChild(el); // Select text inside element el.select(); // Copy text to clipboard document.execCommand('copy'); // Remove temporary element document.body.removeChild(el); }
0
source

More articles:


All Articles