# Webextension: how can I copy to clipboard from a context menu option?

**URL:** <https://discourse.mozilla.org/t/webextension-how-can-i-copy-to-clipboard-from-a-context-menu-option/14142>\
**Category:** Development\
**Created:** [March 3, 2017, 5:32pm UTC](https://discourse.mozilla.org/t/webextension-how-can-i-copy-to-clipboard-from-a-context-menu-option/14142 "2017-03-03T17:32:00Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![j1simon](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/j1simon/32/30888_2.png) [@j1simon](https://discourse.mozilla.org/u/j1simon)\
**Post date:** [March 3, 2017, 5:32pm UTC](https://discourse.mozilla.org/t/webextension-how-can-i-copy-to-clipboard-from-a-context-menu-option/14142/1 "2017-03-03T17:32:00Z")

</div>

Firefox 51.0.1  
I’m trying to do a Firefox webextension to copy the page title/selection/link title to clipboard when I select a context menu option but it doesn’t work.  
I’ve seen these examples: [context-menu-demo](https://github.com/mdn/webextensions-examples/tree/master/context-menu-demo) and [selection-to-clipboard](https://github.com/mdn/webextensions-examples/tree/master/selection-to-clipboard).  
But:

1. If I create a contextmenu with a `background` script I can’t [copy to clipboard](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Interact_with_the_clipboard#Browser-specific_considerations).
2. And if I try to create a contextmenu with a `content_scripts` it doesn’t work: `TypeError: browser.contextMenus is undefined`.

---

<div class="post-metadata">

**Author:** ![sylvaing](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/sylvaing/32/19043_2.png) [@sylvaing](https://discourse.mozilla.org/u/sylvaing)\
**Post date:** [March 3, 2017, 5:46pm UTC](https://discourse.mozilla.org/t/webextension-how-can-i-copy-to-clipboard-from-a-context-menu-option/14142/2 "2017-03-03T17:46:26Z")

</div>

Are you testing with a version of Firefox \< 48 ?

[https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/contextMenus#Browser\_compatibility](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/contextMenus#Browser_compatibility)

---

<div class="post-metadata">

**Author:** ![j1simon](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/j1simon/32/30888_2.png) [@j1simon](https://discourse.mozilla.org/u/j1simon)\
**Post date:** [March 3, 2017, 5:57pm UTC](https://discourse.mozilla.org/t/webextension-how-can-i-copy-to-clipboard-from-a-context-menu-option/14142/3 "2017-03-03T17:57:49Z")

</div>

I have edited my first post. I use Firefox 51.0.1  
It seems that `chrome.contextMenus` or `browser.contextMenus` can only be used in a background script.

---

<div class="post-metadata">

**Author:** ![NilkasG](https://avatars.discourse-cdn.com/v4/letter/n/0ea827/32.png) [@NilkasG](https://discourse.mozilla.org/u/NilkasG)\
**Post date:** [March 4, 2017, 11:40am UTC](https://discourse.mozilla.org/t/webextension-how-can-i-copy-to-clipboard-from-a-context-menu-option/14142/4 "2017-03-04T11:40:35Z")

</div>

> [@j1simon](#):
>
> It seems that `chrome.contextMenus` or `browser.contextMenus` can only be used in a background script.

Rather, you can’t use it in content scripts. It should work in popups and other views of the extension.

* * *

I experimented a bit with `document.execCommand('copy')`. It seems to me that, in order to succesfully copy (outside a “short-lived event handler”), you need the `"clipboardWrite"` permission **and** the frame you call `execCommand` in _must be focused_ within it’s window. Which means it will fail if you call it from the devtools, but succeeds if you call it in a window in the background, but also not if the tab is not visible.  
If this is true, it also means that `execCommand` will never work in the background page.

Which currently leaves to possible ways to implement what you want:

1. Use the `browser.contextMenu` API in the background page. From the click handler open a window in the background, successfully call `execCommand('copy')` in the focused tab therein, then close the window. This is quite ugly and requires `"clipboardWrite"`.

2. From a content script, use this on the page itself: [\<menu\>: The Menu element - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contextmenu). This means you need to edit the page, and it won’t work in any non-gecko browser.

This is the function I used to do the copying:

> <https://github.com/NiklasGollenstede/es6lib/blob/master/dom.js#L181>

---

<div class="post-metadata">

**Author:** ![asamuzaK](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/asamuzak/32/18266_2.png) [@asamuzaK](https://discourse.mozilla.org/u/asamuzaK)\
**Post date:** [March 13, 2017, 3:04am UTC](https://discourse.mozilla.org/t/webextension-how-can-i-copy-to-clipboard-from-a-context-menu-option/14142/5 "2017-03-13T03:04:54Z")

</div>

Hi, I created WebExtensions add-on which exactly do this thing.  
[asamuzaK/url2clipboard (GitHub)](https://github.com/asamuzaK/url2clipboard "asamuzaK/url2clipboard: Copy document URL to Clipboard in HTML Anchor, Markdown, Text")

---

<div class="post-metadata">

**Author:** ![NilkasG](https://avatars.discourse-cdn.com/v4/letter/n/0ea827/32.png) [@NilkasG](https://discourse.mozilla.org/u/NilkasG)\
**Post date:** [March 13, 2017, 3:33am UTC](https://discourse.mozilla.org/t/webextension-how-can-i-copy-to-clipboard-from-a-context-menu-option/14142/6 "2017-03-13T03:33:33Z")

</div>

I’m pretty sure your extension does “Copy document URL to Clipboard _ **as** _ HTML Anchor, Markdown, Text” ^^

While your way of copying probably works for your use case, it has some problems:

- it only works if the current tab is scriptable, i.e. is matched by `<all_urls>` (which ironically isn’t true for _all urls_ -.-).
- any text selected on the page will end up in the clipbord, your actual data is appended to that. (\*)
- by calling `document.execCommand("copy")`, you are:
  - telling the page that you are copying (privacy)
  - giving the page the possibility to cancel it. (\*\*)

\*) I haven’t tested it, but that’s what the code reads like.  
\*\*) Again, not tested, but pretty sure.

This is not meant as criticism, only as clarification 🙂

---

<div class="post-metadata">

**Author:** ![asamuzaK](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/asamuzak/32/18266_2.png) [@asamuzaK](https://discourse.mozilla.org/u/asamuzaK)\
**Post date:** [March 13, 2017, 10:01am UTC](https://discourse.mozilla.org/t/webextension-how-can-i-copy-to-clipboard-from-a-context-menu-option/14142/7 "2017-03-13T10:01:24Z")

</div>

Ah, thanks.  
Fixed the first one (selected text remained).  
For the second one (privacy and cancellable), I’ll think about it more.

Actually, I developed it as my personal add-on.