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

j1simon · March 3, 2017, 5:32pm

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 and selection-to-clipboard.
But:

If I create a contextmenu with a background script I can’t copy to clipboard.
And if I try to create a contextmenu with a content_scripts it doesn’t work: TypeError: browser.contextMenus is undefined.

sylvaing · March 3, 2017, 5:46pm

Are you testing with a version of Firefox < 48 ?

https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/contextMenus#Browser_compatibility

j1simon · March 3, 2017, 5:57pm

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.

NilkasG · March 4, 2017, 11:40am

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:

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".
From a content script, use this on the page itself: <menu>: The Menu element - HTML: HyperText Markup Language | MDN. 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:

github.com/NiklasGollenstede/es6lib

dom.js

master


      
          	} catch (error) { reject(error); } }
          	global.setTimeout(() => {
          		if (done) { return; } done = true;
          		document.removeEventListener('copy', onCopy);
          		reject(new Error('Timeout after '+ (time || 1000) +'ms'));
          	}, time || 1000);
          	document.addEventListener('copy', onCopy);
          	document.execCommand('copy', false, null);
          }); }
          
          /**
           * Attempts to read data from the users clipboard.
           * @param  {string|[string]|null}   types  An optional (Array of) mime types to read.
           * @param  {natural}                time   Optional. Maximum runtime of this asynchronous operation after which it will be canceled and rejected.
           * @return {Promise<string|object>}        Promise to the current clipboard data as string. If types was an array, it returns an object of { [mimeType]: data, } pairs.
           */
          exports.readFromClipboard = readFromClipboard; function readFromClipboard(types, time) { return new Promise(function(resolve, reject) {
          	const document = (this || global).window.document; let done = false;
          	function onPaste(event) { try {
          		if (done) { return; } done = true;
          		document.removeEventListener('paste', onPaste);

asamuzaK · March 13, 2017, 3:04am

Hi, I created WebExtensions add-on which exactly do this thing.
asamuzaK/url2clipboard (GitHub)

NilkasG · March 13, 2017, 3:33am

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

asamuzaK · March 13, 2017, 10:01am

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.