The following shows where we register for events to read the clipboard changes in main.js: document.Posted 7:12 am by Jagan K & filed under General. The following shows where the clipboard content should appear in index.html: Current Clipboard Text:
Our example web app shows the current content of your clipboard when the page loads and updates every time the page becomes visible, for instance after switching to a different app or tab to copy some text and switching back to this test page. Here’s a Github Gist of the complete files. The web app loaded from a remote web host - index.html, main.js.The background page inside the extension - background.html, background.js.The manifest inside the extension - manifest.json.
There are three main parts to this extension: This will only handle text clipboard content, not images or other binary objects.A more fully-featured, real world app would almost certainly require more permissions and more complicated code. I’m going to show the bare minimum amount of code necessary to asynchronously read & write the system clipboard.I’m going to assume you’ve at least read the Chrome extension getting started tutorial and know the basic extension concepts like manifests, messaging, and background pages.I’m sure it’s possible in other browsers using their own proprietary APIs or extensions. I’m only tackling this problem in Chrome right now.
If not, you’ll need to resort to a browser extension.ĭocument.execCommand('paste') - which reads the user’s clipboard and puts it into the focused input element on the page - won’t work at all in Chrome unless it’s run from an extension. If you always want to involve the user in the copy process, you’re good to go. You can programmatically select arbitrary text in an invisible input element, but you still need the user’s implicit permission to copy that selection to their clipboard. Even with document.execCommand() this is difficult or impossible to do in an asynchronous manner because of browser security restrictions.ĭocument.execCommand('copy') - which writes the window’s current text selection to the user’s clipboard - only works inside a user click event. Say you want to make a web app that syncs the user’s clipboard amongst two or more machines with minimal user interaction. Making a Chrome Extension that Reads & Writes to the Clipboard
0 kommentar(er)
