Trying to Read Contents of Clipboard

Add-ons Development
1

I am trying to read clipboard contents upon a context menu click, and I have a bare bones menu system to do this, but it does not read any information

Here is the menu item:

browser.contextMenus.create({
            id: "clipboard",
            title: " Check Clipboard",
            contexts: ["all"]
        }, onCreated);

It calls a switch:

browser.contextMenus.onClicked.addListener((info, tab) => {
    switch (info.menuItemId) {
    case "clipboard":
        checkclip();
    break;
    }
});

This calls a function, which should pull the contents of the clipboard, but it doesn’t:

function checkclip(){
bg = browser.extension.getBackgroundPage();        // get the background page
bg.document.body.innerHTML= "";                   // clear the background page

// add a DIV, contentEditable=true, to accept the paste action
var helperdiv = bg.document.createElement("div");
document.body.appendChild(helperdiv);
helperdiv.contentEditable = true;

// focus the helper div's content
var range = document.createRange();
range.selectNode(helperdiv);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
helperdiv.focus();

Unfortunately, this is what I get on the console:

focus on: #document id: undefined       content_script.js:18:7
focus on: TEXTAREA id: message          content_script.js:18:7
Check read clipboard:                   context_menu.js:36:1

So, the function runs, but does not get the contents of the clipboard.

This is a crucial functionality of the addon that I am trying to recreate with Webextensions.

2

This doesn’t look very good, also note that:

  1. you should not use innerHTML at all (you will get warning for each use when you will try to release your addon on AMO).
  2. getBackgroundPage won’t work in Private Browsing mode

Regarding clipboard access - if you target your add-on to 63+ version, you can use the brand new API, see the Extensions in Firefox 63 blog: Extensions in Firefox 63 - Mozilla Add-ons Community Blog

Clipboard AP for Firefox 63:

Else there is this good article about using clipboard:

3

Yes, I’m trying to make sure that this pre 63 release firefox compatible, so using that API is decidedly non-optimal.

There are apps out there that do access the clipboard contents now, but I have been unable to tease out how they do it when I look at the (never documented) code, as I am a newbie on Javascript.

4

The thing is that I know of some people, myself included, who are using FF 56 because the extensions are still missing.

I found the solution here. I’ve incorporated the fix to the minor fix he was looking for:

function readClipboard () {
field = document.activeElement;
let area = document.createElement("textarea");
//document.body.appendChild 1(area);
field.parentNode.append(area);
area.contentEditable = true;
area.textContent = '';
area.select();
console.log('Pre-paste: ' + area.value);
console.log(document.execCommand("paste"));
console.log('Post-paste: ' + area.value);
area.setAttribute("style","display:none;");
return area.value;
}

It returns the contents of the clipboard when running from a CONTENT script.

I should note that I do not understand the above script, I’m a novice Javascript jockey, but I have been able to get the selection and the clipboard contents, which means that I can replace the clipboard and selection tokens with the value of using regexp:

argstring = argstring.replace(/{{clipboard}}/g,clipcont)
argstring = argstring.replace(/{{selection}}/g,selcont)

(I’ve not checked the code yet)

Now onto specifying a popup.

5

I’m not sure it’s a good idea to target anything before 60 unless you are 100% sure your core users are there. For my add-on there is less than 2% of users running < 60 version. Also Firefox 60 ESR is currently the latest version supported by Firefox. So running anything lower is a BIG security risk.

Also supporting old versions will make your life only harder as there may be missing features (such as easy access to Clipboard using new API). If you are creating new add-on, I would totally target the latest release (unless you want to support ESR 60 users).

Regarding the code - the most important part is document.execCommand("paste") - no need to wap it in console.log.
If you are novice to JavaScirpt, make sure to read as much MDN as possible. It’s full of good examples.

6

I have the console logging because I use that to verify functionality. It’s not intended to be a part of the final program.

As I noted, I am still using 56 on phpBB bulletin boards because I find bbCodeXtra essential.

7

Are you certain that works?

Document: execCommand() method - Web APIs | MDN

Note : Only returns true if part of a user interaction. Don’t try using the return value to verify browser support before calling a command.

IMHO, it might be better to work up your code starting with the examples here:

8

Yes, I tested it out, and it worked quite well.

1 Like
9

OK, it’s not working as well as I thought.

First, it does not preserve new lines, and second, it does not paste stuff that has been copied from as html or MS Word.