Interact With The Clipboard - Mozilla - MDN Web Docs

• Skip to main content
• Skip to search

Interact with the clipboard

Working with the clipboard in extensions is transitioning from the Web API document.execCommand method (which is deprecated) to the navigator.clipboard method.

Note: The navigator.clipboard API is a recent addition to the specification and may not be fully implemented in all browsers. This article describes some limitations, but be sure to review the compatibility tables for each method before using them to ensure that the API supports your needs.

The difference between the two APIs is that document.execCommand this is analogous to the keyboard copy, cut, and paste actions – exchanging data between a webpage and clipboard – whereas navigator.clipboard writes and reads arbitrary data to and from the clipboard.

navigator.clipboard provide separate methods to read or write:

• text content, using navigator.clipboard.readText() and navigator.clipboard.writeText().
• images, rich text, HTML, and other rich content, using navigator.clipboard.read() and navigator.clipboard.write().

However, while navigator.clipboard.readText() and navigator.clipboard.writeText() work on all browsers, navigator.clipboard.read() and navigator.clipboard.write() do not. For example, on Firefox at the time of writing, navigator.clipboard.read() and navigator.clipboard.write() are not fully implemented, such that to:

• work with images use browser.clipboard.setImageData() to write images to the clipboard and document.execCommand("paste") to paste images to a webpage.
• write rich content (such as, HTML, rich text including images, etc.) to the clipboard, use document.execCommand("copy") or document.execCommand("cut"). Then, either navigator.clipboard.read() (recommended) or document.execCommand("paste") to read the content from the clipboard.

In this article

• Writing to the clipboard
• Reading from the clipboard
• Browser compatibility
• See also

Writing to the clipboard

This section describes the options for writing data to the clipboard.

Using the Clipboard API

The Clipboard API writes arbitrary data to the clipboard from your extension. Using the API requires the permission "clipboardRead" or "clipboardWrite" in your manifest.json file. As the API is only available to Secure Contexts, it cannot be used from a content script running on http:-pages, only https:-pages.

For page scripts, the "clipboard-write" permission needs to be requested using the Web API navigator.permissions. You can check for that permission using navigator.permissions.query():

jsnavigator.permissions.query({ name: "clipboard-write" }).then((result) => { if (result.state === "granted" || result.state === "prompt") { /* write to the clipboard now */ } });

Note: The clipboard-write permission name is not supported in Firefox, only Chromium browsers.

This function takes a string and writes it to the clipboard:

jsfunction updateClipboard(newClip) { navigator.clipboard.writeText(newClip).then( () => { /* clipboard successfully set */ }, () => { /* clipboard write failed */ }, ); }

Using execCommand()

The "cut" and "copy" commands of the document.execCommand() method are used to replace the clipboard's content with the selected material. These commands can be used without any special permission in short-lived event handlers for a user action (for example, a click handler).

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

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

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

jsfunction copy() { let 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.

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

jsfunction copy() { let 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.

Note: document.execCommand() does not work on input fields of type="hidden", with the HTML5 attribute "hidden", or any matching CSS rule using "display: none;". So, to add a "copy to clipboard" button to a span, div, or p tag, you need to use a workaround, such as setting the input's position to absolute and moving it out of the viewport.

Browser-specific considerations

The clipboard and other APIs involved here are evolving rapidly, so there are variations among browsers in how they work.

In Chrome:

• You don't need "clipboardWrite", even to write to the clipboard outside a user-generated event handler.

In Firefox:

• navigator.clipboard.write() is not supported.

See the browser compatibility tables for more information.

Reading from the clipboard

This section describes the options for reading or pasting data from the clipboard.

Using the Clipboard API

The Clipboard API's navigator.clipboard.readText() and navigator.clipboard.read() methods let you read arbitrary text or binary data from the clipboard in secure contexts. This lets you access the data in the clipboard without pasting it into an editable element.

Once you have the "clipboard-read" permission from the Permissions API, you can read from the clipboard easily. For example, this snippet of code fetches the text from the clipboard and replaces the contents of the element with the ID "outbox" with that text.

jsnavigator.clipboard .readText() .then((clipText) => (document.getElementById("outbox").innerText = clipText));

Using execCommand()

To use document.execCommand("paste") your extension needs the "clipboardRead" permission. This is the case even if you're using the "paste" command from within a user-generated event handler, such as click or keypress.

Consider HTML that includes something like this:

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

To set the content of the <textarea> element with the ID "output" from the clipboard when the user clicks the "paste" <button>, you can use code like this:

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

Browser-specific considerations

Firefox supports the "clipboardRead" permission from version 54 but only supports pasting into elements 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.

Browser compatibility

api.Clipboard

webextensions.api.clipboard

See also

• Clipboard API
• Permissions API
• Make content editable

Help improve MDN

Was this page helpful to you? Yes No Learn how to contribute

This page was last modified on ⁨Nov 30, 2025⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content Filter sidebar

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
   6. What next?
3. Concepts
   1. JavaScript APIs
   2. Content scripts
   3. Background scripts
   4. Match patterns
   5. Work with files
   6. Internationalization
   7. Content Security Policy
   8. Native messaging
   9. Native manifests
   10. User actions
   11. Differences between API implementations
   12. Chrome incompatibilities
4. User interface
   1. Toolbar button
   2. Address bar button
   3. Sidebars
   4. Context menu items
   5. Options page
   6. Extension pages
   7. Notifications
   8. Address bar suggestions
   9. devtools panels
   10. Browser styles
   11. Popups
5. How to
   1. Intercept HTTP requests
   2. Modify a web page
   3. Insert external content
   4. Share objects with page scripts
   5. Add a button to the toolbar
   6. Implement a settings page
   7. Work with the Tabs API
   8. Work with the Bookmarks API
   9. Work with the Cookies API
   10. Work with contextual identities
   11. Interact with the clipboard
   12. Extend the developer tools
   13. Build a cross-browser extension
6. JavaScript APIs
   1. Browser support for JavaScript APIs
   2. action
   3. alarms
   4. bookmarks
   5. browserAction
   6. browserSettings
   7. browsingData
   8. captivePortal
   9. clipboard
   10. commands
   11. contentScripts
   12. contextualIdentities
   13. cookies
   14. declarativeNetRequest
   15. devtools
   16. dns
   17. dom
   18. downloads
   19. events
   20. extension
   21. extensionTypes
   22. find
   23. history
   24. i18n
   25. identity
   26. idle
   27. management
   28. menus
   29. notifications
   30. omnibox
   31. pageAction
   32. permissions
   33. pkcs11
   34. privacy
   35. proxy
   36. runtime
   37. scripting
   38. search
   39. sessions
   40. sidebarAction
   41. storage
   42. tabGroups
   43. tabs
   44. theme
   45. topSites
   46. types
   47. userScripts
   48. userScripts (Legacy)
   49. webNavigation
   50. webRequest
   51. windows
7. Manifest keys
   1. action
   2. author
   3. background
   4. browser_action
   5. browser_specific_settings
   6. chrome_settings_overrides
   7. chrome_url_overrides
   8. commands
   9. content_scripts
   10. content_security_policy
   11. declarative_net_request
   12. default_locale
   13. description
   14. developer
   15. devtools_page
   16. dictionaries
   17. externally_connectable
   18. homepage_url
   19. host_permissions
   20. icons
   21. incognito
   22. manifest_version
   23. name
   24. offline_enabled Deprecated
   25. omnibox
   26. optional_host_permissions
   27. optional_permissions
   28. options_page
   29. options_ui
   30. page_action
   31. permissions
   32. protocol_handlers
   33. short_name
   34. sidebar_action
   35. storage
   36. theme
   37. theme_experiment
   38. user_scripts
   39. version
   40. version_name
   41. web_accessible_resources
8. Extension Workshop
   1. Develop
   2. Publish
   3. Manage
   4. Enterprise
9. Contact us
10. Channels
    1. Add-ons blog
    2. Add-ons forum
    3. Add-ons chat