Webextension: cannot paste text from clipboard to input element - firefox-addon-webextensions

Question

I'm writing a WebExtension for Firefox. In it, I want to be able to copy arbitrary text between the webextension and the clipboard. As far as I could see from the documentation (https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Interact_with_the_clipboard), there is no way to transfer data between a javascript variable and the clipboard, it seems I need to take a detour through a DOM element.
For copying text into the clipboard, I've come up with a dummy method, which is very similar to what is described in this question: Firefox webextension not copying to clipboard
function copy(contentToCopy) {
var txtToCopy = document.createElement('input');
txtToCopy.style.left = '-300px';
txtToCopy.style.position = 'absolute';
txtToCopy.value = contentToCopy;
document.body.appendChild(txtToCopy);
txtToCopy.select();
console.log("Copying ", txtToCopy.value);
var res = document.execCommand('copy');
console.log("Copy result ", res);
txtToCopy.parentNode.removeChild(txtToCopy);
}
I can then call it with
copy('any arbitrary text');
and it works perfectly.
However, I also need to access the clipboard contents in the same way, and can't get it to work:
function paste() {
var txtToPaste = document.createElement('input');
txtToPaste.style.left = '-300px';
txtToPaste.style.position = 'absolute';
txtToPaste.value = 'dummy content for debugging';
document.body.appendChild(txtToPaste);
txtToPaste.focus();
txtToPaste.select();
var res = document.execCommand('paste');
var result = txtToPaste.value;
console.log("Paste result ", res);
console.log('Pasted text', result);
console.log('txtToPaste', txtToPaste);
txtToPaste.parentNode.removeChild(txtToPaste);
return result;
}
I have also requested the appropriate permission in my manifest.json file:
"permissions": ["clipboardRead" ]
I then try to call the method like this:
var dataFromClipboard = paste();
However, no matter what data I have in my clipboard when I call the method, the "Paste result" is always "true" and "result" is "dummy content for debugging" (i.e. unchanged from what I used to initialise the dummy field).
I'm testing this with Firefox 57.0.2 (64-bit) on Windows 7 (64-bit).
Am I missing something obvious? Why does this work in one direction but not the other?
The javascript console (neither in the tab in which the extension is being tested nor in the global browser console) is not showing any errors.

Answer 1

After another look at https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Interact_with_the_clipboard#Reading_from_the_clipboard I saw the section titled "Browser-specific considerations". I don't know why I missed it on my first read through, but it provides the solution:
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>.
So with this knowledge I have modified my function as follows:
function paste() {
var txtToPaste = document.createElement('textarea');
txtToPaste.id = "txtToPaste";
txtToPaste.style.left = '-300px';
txtToPaste.style.position = 'absolute';
txtToPaste.contentEditable = true;
txtToPaste.textContent = '';
document.body.appendChild(txtToPaste);
txtToPaste.focus();
txtToPaste.select();
var res = document.execCommand('paste');
var result = txtToPaste.textContent;
console.log("Copy result ", res);
console.log('Pasted text', result);
console.log('txtToPaste', txtToPaste);
txtToPaste.parentNode.removeChild(txtToPaste);
return result;
}
With these changes (changing input to textarea; setting contentEditable to true) the method works as I had hoped.