Copy to Clipboard in HTML/JavaScript and Chrome Extension

When you develop a Google Chrome Extension you probably faces the problem of missing the clipboard interaction API available in Chrome browser. That's true, as of September 2010 and Chrome version
6.0 there is no Clipboard API in Google Chrome browser.

Google is experimenting on that in Development builds of Chrome browser and the Experimental Clipboard API is available to test only in these builds. It makes it impossible to use in production.

But the answer comes from the remembering that Chrome Extension is a plain HTML and JavaScript where the regular DOM and BOM structures are available.

Copying text to Clipboard in HTML/JavaScript requires three simple steps:

1. Put text to the input element
2. Focus on that element and select all text you need to copy
3. Execute DOM's "Copy" command that gets the current selection and puts to the clipboard automatically

In JavaScript such function could look like this:

// Copy text to the Clipboard function
// uses 'url' input element to select text
// parameters: text - text to be copied to the clipboard
function copyToClipboard( text )
{
  var input = document.getElementById( 'url' );
  input.value = text;
  input.focus();
  input.select();
  document.execCommand( 'Copy' );
}