So far, all the answers are concentrated in capturing the events inside the webpage. But, is it possible to retrieve the last 'text' data in the clipboard using javascript?
What I want to do is that when the user click a textarea, it automatically changes its value to the last copied element from the system clipboard (from any page or other application).
Sadly, there is no simple way to do this. You can use flash hacks (I don't know them personally) to get access to the clipboard whenever you want, but otherwise, you're limited to accessing the user's clipboard (in your case, to read what is on it) during system clipboard events (triggered by keyboard shortcuts or from the browser's menus).
In IE, you can access the clipboard whenever you want using the following code:
window.clipboardData.getData('Text');
But if it isn't during a system clipboard event, the user will be prompted as to whether or not they want to grant you access.
You can get a workaround in Chrome by using a chrome extension that grants your site/app clipboard permissions. From there you can just force a paste event using the following code.
window.execCommand('paste');
This should cause whatever is on the clipboard to be pasted (since your text area is selected, it should paste into your text area).
That's probably as far as you'll be able to get, though, unless you figure out a way to get flash to do it for you (ZeroClipboard seems like a promising option).
If you're interested in some more details, I wrote a technical blog post on this subject after doing extensive work on this at Lucidchart (where I work).
Related
I wanted to create very small extension for website that will automatically copy some value to the clipboard.
The problem is that I want it to copy the value even if browser is not focused e.g.:
I open the website, my extension listens to the change on the page
I open different application
If something changes on the page then the extension should copy some value
Main application that I'm working with is still focused but I can CTRL+V paste value copied from the website without alt+tab
I tried to use Clipboard API:
navigator.clipboard.writeText(...)
but I don't think it will work because browser have to be focused(I think).
When page is focused then copying works fine. If I try to switch to different application I get an exception when my extension tries to copy the value:
DOMException: Document is not focused.
Is there any way to do this?
This is not possible for security reasons.. It's hard to imagine anyone wanting this behavior...
This document has a lot of good info..
In Chrome, you can request clipboard-write permissions to write to clipboard outside of a small user generated event, although it does not appear as though Chrome limits you to when you can write to clipboard.. According to the article below, you can write to the clipboard in Chrome from the background, etc.. See the note at the bottom of this section for more info.
If Chrome does allow you to write to clipboard from the background or if the window is not selected, you could possibly use the Page Visiblity API to kick off the copy event when "that" specific window is not visible.
You could possibly even use the window.addEventListener('blur', function(){...}) handler to test, etc...
All in all, this MAY be possible in Chrome, but it is definitely not supported in Firefox.
You can check out the differences between browsers and how they handle clipboard related events/permissions/etc, here..
Subject:
I'm in the process of creating a chrome extension and, for certain features, I would like to copy some text to the clipboard and automatically paste it into whatever element has the focus for the user.
Getting my text into the clipboard is no problem. I can simply create a textarea in my background page, set its value accordingly and then select it's contents. Then, I can use document.execCommand("copy");
Problem:
The problem comes when I try to use document.execCommand('paste') in my content script. It works fine on simple text areas (like the one I'm typing in now). However, on many sites, it tends not to work. This typically happens when the editable element is inside an Iframe, or is actually a custom <div> rather than a vanilla <textarea>/<input>
Even though my trivial attempt fails to work in these cases, the built-in paste option that is provided by Google, works every time without fail.
Is it possible for a chrome extension to mimic this functionality in a customized context menu option? If so, how can this functionality be achieved?
Additional Info:
This operation is invoked when a context menu option is clicked. Said context menu option is only visible when the element currently in focus is categorized as editable by the chrome.contextMenus API
Similar Questions:
None of these provided me with a satisfactory answer
the proper use of execcommand("paste") in a chrome extension
clipBoard using chrome api execCommand
So we have a program that the user can use by copying text from a webpage they visit, alt+tabbing to the program, then pasting it as input. It would be more convenient for users to be able to do it directly in the site.
We were thinking of a panel that would be small and expandable, following them to each site they visit. Is this possible? Either a snippet of code that is auto pasted, or a JavaScript command called that would dynamically paste the code (is Scratchpad any help here, at least in FireFox).
We've never made a FF add-on, but it seems like if the dynamic panel idea falls through, an add-on would be the next best thing.
Basically, users should ideally be able to copy text, either enter a key combo or click a button, see the interface and paste in the text. Would either of these methods work?
A browser add-on or a userscript could certainly do this.
You can also write a userscript and use a user script compiler (such as this one) to convert it to a "true" Addon.
Alternatively your application could act as a HTTP proxy and inject it dynamically, but I'd guess that this would probably be more complicated than the other two approaches.
This site Polyvore used to do something similar, although in the 2 mins hunting around I could not find it, but I have used it and I think the technique was used by Google and Digg for a while. From what I recal it involved iframes and a bookmark in your browser.
Basically you could download a small piece of code that would sit in your bookmarks bar and this would allow you to navigate to a fashion website click on the bookmark copy a picture and insert it back into Polyvore.
Via a Chrome extension, is it possible to change text in the Omnibox (address bar), for example after the chrome.omnibox.onInputEntered event is fired? I'm writing an extension that does certain conversions of values and one method of input is via the omnibox's extension keyword mode. I would love to be able to display the converted value right inside the omnibox itself after they hit Enter, instead of having to display some type of dialog/pop-up window, since their focus is already on the omnibox.
You cannot alter the contents in the omnibox via Extensions, but, you can use the HTML5 History API to do that (not URL text).
I don't know if it will work for your case, but doesn't hurt to try out.
https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
You can use the pushState to change the URL something like this:
history.pushState(null, "New Title", "newpage.html");
There is a good possibility it wont work because it is dependent on the url for the DOM.
I have text in JS variable and I want that to be copied in clipboard on a button's click.
I need this in Javascript and code must not be browser-specific.
ZeroClipboard works fully within the browser's security restrictions. It uses Flash to copy to the clipboard, accessing a Flash movie from JavaScript. To work around Flash's own security limitation, it must be overlaid on top of some element of your page (e.g. a button) that the user will have to click. Read its instructions page for more details.