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.
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..
The gist: What's the best way to escape a Flash object's focus on a webpage?
Context:
I have a hotkey listener (an AutoHotKey script) running in my tray. If the script detects the command Alt+Shift+F6 while I am clicked into a Flash object on a webpage, it activates and sends key combinations to Flash to pull certain data logs. After this process completes, I want to call up a JavaScript file on that same browser tab that requests additional information from the user - basically, a tiny UI with additional text fields available in a third-party bug tracker. To do this, I want to send a javascript: command to the address bar using Ctrl+L and having AutoHotKey paste in the full call to the JS file.
A visualization of a possible environment:
The problem:
I need the user to be clicked INTO Flash in order to pull the data logs. However, I need the user to be clicked OUT of Flash for Ctrl+L to actually work - Flash appears to eat all keystrokes at the browser-level when one of its objects has focus.
A possible solution: The easiest way to go about this would be to simulate clicking on the stage, which borders my Flash object on every side. This should work, but I must assume the stupidest possible user. Such a user would somehow limit their current browser window to only be as big as the Flash object (if not smaller), click into it, and attempt to use the hotkey. In this case...I have no idea where I should click, because it could be outside the browser. Further, I don't believe I can assume that all browser address bars are similar amounts of pixels south from the top of the window.
Additional complicating factors:
I want this to work for the user's default browser. (IE, Chrome, Firefox, Safari are my big targets.)
AHK does not provide any native DOM or COM hooks to anything except IE.
Ctrl+Tab and Alt+Tab shenanigans do not appear to work. That can get me to other tabs/windows, but returning to the tab/window with the Flash object still causes Flash to 'eat' further keyboard input.
While I'd be open to using another scripting language than AHK if it could overcome this Flash focus hurdle, I do not know how to create a keylistener that sits in the users tray until activated by a hotkey.
I have no access to the Flash object's code, and it contains no logic to interpret a key combination as a way to break focus or launch a script.
Would it be possible to use WinMaximize to maximize the size of the window? If you do that it should be easier to set up the script to avoid clicking outside the browser.
Perhaps look at ControlFocus and/or ControlSend (using the "edit1" control in IE and FF -- unfortunately, Chrome doesn't expose the "address bar" as a "control" this way but if you test for Chrome first, you can implement your "click outside the Flash box" method for that case).
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).
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.
I was wondering if there was anyway I could make another browser within my webpage. Basically I want this browser to be an interactive area on my webpage (about half the page).
The main page should be able to detect where every click was made within the mini browser.
Is there some apis that would help me out? Or would my best bet be to stream a remote desktop?
Programming your own browser engine in Javascript will take you years, and it will inevitably be slow, cumbersome, and prone to errors. Furthermore, your Javascript cannot really have direct access to other website's HTML code, it will have to go through your own server anyway.
You can use an
<iframe>
tag. To detect clicks and mouseovers, you could transform the HTML on your server first, potentially adding "onclick" events. This would let you have XSS access too, and cookie control.
You can embed another page within yours using an <iframe>. Once you do, however, you can't control much of what happens within it, or detect where clicks are made, unless the page within the iframe is from the same domain, for security reasons.
You could try the <iframe> tag.
No, it really can't work that way. My suggestion would be to embed an iframe and then control it using JavaScript. However, you won't be able to control it very well (like, for example, limiting where the user can browse with it).