Copy Data from webpage Firefox extension

Question

I have a very strange situation. I have an extension which copies stuff from the webpage based on the user's selection. But, when ever there are multiple frames its fails. For example on Gmail. If I select anything from Gmail and try to find the selection it will end up with an error:

Error: window.getSelection(...) is null

Here is my code (This is a working example. I didn't include the icon.):

manifest.json

{
    "description": "Adds a solid red border to all webpages matching mozilla.org. See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples#borderify",
    "manifest_version": 2,
    "name": "Borderify",
    "version": "1.0",
    "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/borderify",
    "icons": {
        "48": "icons/border-48.png"
    },
    "background": {
        "scripts": ["myaddone.js"]
    },
    "browser_action": {
        "default_icon": "icons/trash.svg",
        "default_title": "Forget it!"
    },
    "content_scripts": [{
        "matches": ["<all_urls>"],
        "js": ["callHere.js"],
        "all_frames": true
    }]
}

callHere.js

function logger(msg) {
    console.log("=============");
    console.log(msg);
    console.log("=============");
}
var getSelectedDataFromPage = function () {
    logger("fooo");
    selec = window.getSelection().toString().trim();
    return selec;
}
browser.runtime.onMessage.addListener(request => {
    var messageToCopy = request.greeting;
    if (messageToCopy == "findCopy") {
        var selectedText = getSelectedDataFromPage();
        return Promise.resolve({
            response: selectedText
        });
    }
    logger(messageToCopy);
    return Promise.resolve({
        response: "Fail"
    });
});

myaddone.js

function logger(msg) {
    console.log(msg);
}

function onError(error) {
    console.error(`Error: ${error}`);
}

function findSelectionTExt(tabs) {
    for (let tab of tabs) {
        browser.tabs.sendMessage(tab.id, {
            greeting: "findCopy"
        }).then(response => {
            logger(response.response);
        }).catch(onError);
    }
}
browser.browserAction.onClicked.addListener(() => {
    browser.tabs.query({
        currentWindow: true,
        active: true
    }).then(findSelectionTExt).catch(onError);
});

It is using a message system to content script to copy stuff from selection. It works perfectly fine with Stack Overflow and other sites, but not sites which use more frames etc., like Gmail.

Loop Image, as you can see it able to grab the text first time and then its keep sending the message I think.

What I am really missing?

Answer 1

I did solved my issue using context menu item and it works very well with every where like iframes. I got a example from firefox repo. https://github.com/mdn/webextensions-examples/tree/master/context-menu-demo .