• Skip to main content
  • Select language
  • Skip to search
MDN Web Docs
  • Technologies
    • HTML
    • CSS
    • JavaScript
    • Graphics
    • HTTP
    • APIs / DOM
    • WebExtensions
    • MathML
  • References & Guides
    • Learn web development
    • Tutorials
    • References
    • Developer Guides
    • Accessibility
    • Game development
    • ...more docs
Add-ons
  1. MDN
  2. Mozilla
  3. Add-ons
  4. Browser extensions
  5. Interact with the clipboard

Interact with the clipboard

In This Article
  1. Writing to the clipboard
    1. Browser-specific considerations
  2. Reading from the clipboard
    1. Browser-specific considerations

Extensions built using WebExtension APIs can interact with the system clipboard using document.execCommand():

  • document.execCommand("copy")
  • document.execCommand("cut")
  • document.execCommand("paste")

Writing to the clipboard

You can use the "cut" and "copy" commands without any special permission if you are using them in a short-lived event handler for a user action (for example, a click handler).

For example, suppose you've got a popup that includes the following HTML:

<input id="input" type="text"/>
<button id="copy">Copy</button>

To make the "copy" button copy the contents of "input", you can use code like this:

function copy() {
  var copyText = document.querySelector("#input");
  copyText.select();
  document.execCommand("Copy");
}
document.querySelector("#copy").addEventListener("click", copy);

Because the execCommand() call is inside a click event handler, you don't need any special permissions here.

However, let's say that instead, you trigger the copy from an alarm:

function copy() {
  var copyText = document.querySelector("#input");
  copyText.select();
  document.execCommand("Copy");
}
browser.alarms.create({
  delayInMinutes: 0.1
});
browser.alarms.onAlarm.addListener(copy);

Depending on the browser, this may not work. On Firefox, it will not work, and you'll see a message like this in your console:

"document.execCommand(‘cut’/‘copy’) was denied because it was not called from inside a short running user-generated event handler."

To enable this use case, you need to ask for the "clipboardWrite" permission. So: "clipboardWrite" enables you to write to the clipboard outside a short-lived event handler for a user action.

Browser-specific considerations

In Chrome:

  • you can write to the clipboard like this in all execution contexts - background pages, content scripts, options pages, and popups.
  • you don't actually need "clipboardWrite", even to write to the clipboard outside a user-generated event handler.

In Firefox:

  • you can write to the clipboard like this in all execution contexts except background pages. In Firefox you can't select text or focus an input field in background pages, so you can't write to the clipboard from a background page.
  • the "clipboardWrite" permission is only supported from version 51 onwards.

Reading from the clipboard

To use the "paste" command, you must have the "clipboardRead" permission. For example, suppose your HTML includes something like this:

<textarea id="output"></textarea>
<button id="paste">Paste</button>

To set the content of "output" from the clipboard when the user clicks "paste", you can use code like this:

function paste() {
  var pasteText = document.querySelector("#output");
  pasteText.focus();
  document.execCommand("Paste");
  console.log(pasteText.textContent);
}
document.querySelector("#paste").addEventListener("click", paste);

This will require "clipboardRead", even though it's in a user-generated event handler.

Browser-specific considerations

Firefox supports the "clipboardRead" permission from version 54, but does require an element in content editable mode, which for content scripts only works with a <textarea>. For background scripts, any element can be set to content editable mode.

Document Tags and Contributors

Tags: 
  • WebExtensions
 Contributors to this page: andrewtruongmoz, wbamberg, vy3012, zombie, smile4ever, Rob W
 Last updated by: andrewtruongmoz, Jul 10, 2017, 1:56:29 PM
See also
  1. Browser extensions
  2. Getting started
    1. What are extensions?
    2. Your first extension
    3. Your second extension
    4. Anatomy of an extension
    5. Example extensions
  3. How to
    1. Intercept HTTP requests
    2. Modify a web page
    3. Add a button to the toolbar
    4. Implement a settings page
  4. User interface
    1. Introduction
    2. Toolbar button
    3. Address bar button
    4. Sidebar
    5. Context menu items
    6. Options page
    7. Bundled web pages
    8. Notifications
    9. Address bar suggestions
    10. Developer tools panels
  5. Concepts
    1. Using the JavaScript APIs
    2. Content scripts
    3. Match patterns
    4. Internationalization
    5. Content Security Policy
    6. Native messaging
  6. Porting
    1. Porting a Google Chrome extension
    2. Porting a legacy Firefox extension
    3. Embedded WebExtensions
    4. Comparison with the Add-on SDK
    5. Comparison with XUL/XPCOM extensions
    6. Chrome incompatibilities
    7. Differences between desktop and Android
  7. Firefox workflow
    1. Temporary Installation in Firefox
    2. Debugging
    3. Developing for Firefox for Android
    4. Getting started with web-ext
    5. web-ext command reference
    6. Extensions and the Add-on ID
    7. Publishing your extension
  8. JavaScript APIs
    1. Browser support for JavaScript APIs
    2. alarms
    3. bookmarks
    4. browserAction
    5. browsingData
    6. commands
    7. contextMenus
    8. contextualIdentities
    9. cookies
    10. devtools.inspectedWindow
    11. devtools.network
    12. devtools.panels
    13. downloads
    14. events
    15. extension
    16. extensionTypes
    17. history
    18. i18n
    19. identity
    20. idle
    21. management
    22. notifications
    23. omnibox
    24. pageAction
    25. permissions
    26. privacy
    27. proxy
    28. runtime
    29. sessions
    30. sidebarAction
    31. storage
    32. tabs
    33. topSites
    34. types
    35. webNavigation
    36. webRequest
    37. windows
  9. Manifest keys
    1. applications
    2. author
    3. background
    4. browser_action
    5. chrome_settings_overrides
    6. chrome_url_overrides
    7. commands
    8. content_scripts
    9. content_security_policy
    10. default_locale
    11. description
    12. developer
    13. devtools_page
    14. homepage_url
    15. icons
    16. incognito
    17. manifest_version
    18. name
    19. omnibox
    20. optional_permissions
    21. options_ui
    22. page_action
    23. permissions
    24. protocol_handlers
    25. short_name
    26. sidebar_action
    27. version
    28. web_accessible_resources
  10. Themes
  11. Publishing add-ons
  12. Guides
    1. Signing and distribution overview
    2. Submit an add-on
    3. Creating an appealing listing
    4. Review policies
    5. Developer agreement
    6. Featured add-ons
    7. Contact addons.mozilla.org
  13. Community and support
  14. Channels
    1. Add-ons blog
    2. Add-on forums
    3. Stack Overflow
    4. Development newsgroup
    5. IRC Channel
  15. Legacy add-ons
  16. Legacy technologies
    1. Add-on SDK
    2. Legacy Firefox for Android
    3. Bootstrapped extensions
    4. Overlay extensions