We Keep Coding

Can i access all copied content via javascript from any tab? [duplicate]

I'm having a hard time finding any recent info on how to add a listener for "Ctrl+C", fetching clipboard data, and then writing back to clipboard all in a Chrome Extension. All of the old code that i found was for the older versions that are now deprecated.

Basically you can manipulate clipboard using document.execCommand('paste|copy|cut').
You'll need to specify "clipboardWrite" and/or "clipboardRead" permissions in manifest.
"clipboardRead" Required if the extension or app uses document.execCommand('paste').
"clipboardWrite" Indicates the extension or app uses document.execCommand('copy') or document.execCommand('cut'). This permission is required for hosted apps; it's recommended for extensions and packaged apps.
Create <input> element (or <textarea>)
Put focus to it
Call document.execCommand('paste')
Grab you string from <input> value attribute.
This worked for me to copy data to clipboard.

In order to read Clipboard text in a chrome extension, you have to:
request "clipboardRead" permission in your manifest
create a background script, since only the background script can access the clipboard
create an element in your background page to accept the clipboard paste action. If you make this a textarea, you will get plain-text, if you make it a div with contentEditable=true, you will get Formatted HTML
if you want to pass the clipboard data back to an in page script, you'll need to use the message-passing API
To see an example of this all working, see my BBCodePaste extension:
https://github.com/jeske/BBCodePaste
Here is one example of how to read the clipboard text in the background page:
bg = chrome.extension.getBackgroundPage(); // get the background page
bg.document.body.innerHTML= ""; // clear the background page
// add a DIV, contentEditable=true, to accept the paste action
var helperdiv = bg.document.createElement("div");
document.body.appendChild(helperdiv);
helperdiv.contentEditable = true;
// focus the helper div's content
var range = document.createRange();
range.selectNode(helperdiv);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
helperdiv.focus();
// trigger the paste action
bg.document.execCommand("Paste");
// read the clipboard contents from the helperdiv
var clipboardContents = helperdiv.innerHTML;

Here is a very simple solution. All it requires is for your permissions to include "clipboardRead" and "clipboardWrite". The copyTextToClipboard function is taken from here: https://stackoverflow.com/a/18455088/4204557
var t = document.createElement("input");
document.body.appendChild(t);
t.focus();
document.execCommand("paste");
var clipboardText = t.value; //this is your clipboard data
copyTextToClipboard("Hi" + clipboardText); //prepends "Hi" to the clipboard text
document.body.removeChild(t);
Note that document.execCommand("paste") is disabled in Chrome, and will only work in a Chrome extension, not in a web page.

Best workable examples I found are here
below example worked for me, sharing here so that someone can get help
function getClipboard() {
var result = null;
var textarea = document.getElementById('ta');
textarea.value = '';
textarea.select();
if (document.execCommand('paste')) {
result = textarea.value;
} else {
console.log('failed to get clipboard content');
}
textarea.value = '';
return result;
}

Browser extension - copying website source to a clipboard on click. I want to get source after javascript is executed

I can't find the solution to this.
Imagine scenario:
You are entering LinkedIn, doing some search and then running browser extension to copy to clipboard actual source of the website - the same code as you can see at a right mouse click and Inspect.
Is this possible?
Is there already any solution to that?

You can get the HTML of the entire document using
document.documentElement.outerHTML
and then copy that string to the clipboard:
const { outerHTML } = document.documentElement;
const textarea = document.body.appendChild(document.createElement('textarea'));
textarea.value = outerHTML;
textarea.focus();
textarea.select();
document.execCommand('copy');
textarea.remove();

Trying to programmically paste

I am having trouble with execCommand('paste');
My code:
var copy = document.createElement("BUTTON");
copy.innerText = "Copy";
Sections.contextmenu.appendChild(copy);
copy.addEventListener("click", function(e) {
document.execCommand("copy");
});
var paste = document.createElement("BUTTON");
Sections.contextmenu.appendChild(paste);
paste.innerText = "Paste";
paste.addEventListener("click", function(e) {
console.log("Paste");
if (document.execCommand("paste")) {
console.log("pasted");
}
});
Copy worked right out of the box. I cannot get paste to work. I see "Paste" in the console, but nothing is pasted. I've read some things that say that this functionality needs to be explicitly turned on in Firefox. Is there no way (other than using flash... This is talked about in the research I've done) to execute "paste" in a content-editable element programmatically?

The paste command is disabled in web content (it’s only available in a browser extension). It’s disabled presumably because it would allow any website to steal the clipboard’s content. From the MDN documentation on execCommand:
paste
Pastes the clipboard contents at the insertion point (replaces current selection). Disabled for web content.

try the following code
console.log(document.exeCommand('paste')
If false maybe you need a permission to use it or your navigator can't support it
You can also use the Clipboard API, which would obliterate the exeCommand

Copying Image Data to Clipboard?

I am working on a site where the client has a coupon code image on a product page and when the user clicks on the image he wants that code copied to the clipboard... is this possible?

With JavaScript clipboard access is pretty much disabled in all browsers unless a user enables it in their settings. The work around is using a Flash Copy to clipboard script, but Flash is getting more security restrictions set on that. Check out zeroclipboard.

If you want the image to be copied, you can use "createControlRange()" like so:
var imageTag = document.getElementById("couponCode");
if (document.body.createControlRange) //to check if browser is IE
{
var couponRange;
document.getElementById("couponCode").contentEditable = true;
couponRange = document.body.createControlRange();
couponRange.addElement(imageTag);
couponRange.execCommand('Copy');
document.getElementById("couponCode").contentEditable = false;
alert("Image copied");
}
else //for other browsers
{
alert("Your browser does not allow access to clipboard.\nPlease press Ctrl+C to copy");
var couponRange = document.createRange();
couponRange.selectNode(imageTag);
window.getSelection().removeAllRanges();
window.getSelection().addRange(couponRange);
}
Browsers other than IE do not allow Javascript to access the clipboard for security reasons. But you can invoke the browser functionality by asking the user to press Ctrl+C after selecting the range of the coupon image.
Hope this solves your problem.

access word doc from javascript?

I have tried to load (embed) the .doc file into the html page using object tag. And it doesn't show the word toolbar. My requirement is to allow the user to print the doc from print option in word.
Is there a possible way in javascript to enable the word toolbars??
And I have tried another approach using the ActiveXObject.. but this method opens the document in winword.exe.. is there a way to embed the .doc file through javascript..?
EDIT:
I was looking for other possibilities, but nothing works
Anybody got an idea about the list of params available for the Word ActiveX?
Maybe that could contain the property to enable toolbars on load..
I used the below code to load .doc content to ActiveX Word Document control
var objWord = new ActiveXObject("Word.Application");
objWord.Visible=false;
var Doc=new ActiveXObject("Word.Document");
Doc=objWord.Documents.Add("c:\\test.doc", true);
Is there a way to render the DOC element directly into HTML.. like putting this element in iframe or whatever??
I was assigning the iframe source property directly to the doc file, like this
<iframe id="sam" src="c:\\test.doc">
this loads the doc into browser, but this prompt to open a downloader window.
I'd really appreciate any hint that lead me to some direction.

<HTML>
<HEAD>
<TITLE>MSWORD App through JavaScript</TITLE>
</HEAD>
<BODY>
<script>
var w=new ActiveXObject('Word.Application');
var docText;
var obj;
if (w != null)
{
w.Visible = true; // you can change here visible or not
obj=w.Documents.Open("C:\\A.doc");
docText = obj.Content;
w.Selection.TypeText("Hello");
w.Documents.Save();
document.write(docText);//Print on webpage
/*The Above Code Opens existing Document
set w.Visible=false
*/
/*Below code will create doc file and add data to it and will close*/
w.Documents.Add();
w.Selection.TypeText("Writing This Message ....");
w.Documents.Save("c:\\doc_From_javaScript.doc");
w.Quit();
/*Don't forget
set w.Visible=false */
}

As far as I know there's no way to force this to be opened in a browser. Simply because the server will send the mime type of a word document, from that point on it is up to the client to decide what to do with it and a majority are set to download. There are however some registry tweaks that you can do on a client machine to force the client machine to view word documents inside of internet explorer.