execute firefox extension after the whole page is loaded

I am using Bookmark Highlighter. The problem with it is that, it sometimes does not work when the extension is loaded before the page is loaded.

For Example: If you bookmark https://www.pluralsight.com/courses/protocol-deep-dive-icmp , then go to https://www.pluralsight.com/search?q=Protocol%20Deep%20Dive , it does not highlight the bookmark.

In the extension review page it says

It looks like some links on your example site are being added after the extension has a chance to execute.

I have modified the manifest.json to:

{
    "manifest_version": 2,
    "name": "Bookmark Highlighter",
    "version": "2.1",
    "description": "Highlights links to any URLs that are bookmarked",
    "icons": {
        "48": "icons/highlighter-48.png",
        "96": "icons/highlighter-96.png"
    },
    "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ],
            "js": [
                "contentScript.js"
            ],
            "run_at": "document_idle"
        }
    ],
    "background": {
        "scripts": [
            "backgroundScript.js"
        ]
    },
    "permissions": [
        "bookmarks",
        "storage"
    ],
    "options_ui": {
        "page": "options.html"
    },
    "applications": {
        "gecko": {
            "id": "jid0-CNA8w9TYZz7H2Wrq5ZfmSO5yB0I@jetpack"
        }
    }
}

I have also replaced "document_idle" with "document_end" . Not working. What can I do?

In case anyone is interested, the contentScript.js is:

// Default settings

var linkBackground = "rgba(0, 153, 255, 0.2)";
var imgBorder = "1px dashed blue";
var cssForText = "";
var cssForImage = "";

// Load settings from config

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

function onGot(item) {
    if (item.backgroundColor) {
        linkBackground = "rgba(" + item.backgroundColor.join(",") + ")";
        //console.log("Background color: " + linkBackground);
    }

    if (item.cssForText) {
        cssForText = item.cssForText;
        //console.log("Custom CSS for text: " + cssForText);
    }

    if (item.cssForImage) {
        cssForImage = item.cssForImage;
        //console.log("Custom CSS for image: " + cssForImage);
    }
}

var getting = browser.storage.local.get(["backgroundColor", "cssForText", "cssForImage"]);
getting.then(onGot, onError);

// Set up communication port

var port = browser.runtime.connect({name:"bookmark-highlighter"});

// Listen for response from background script

port.onMessage.addListener(function(m) {
    // Highlight bookmarked links

    if (m.bookmarks) {
        for (var i = 0; i < document.links.length; i++) {
            var link = document.links[i];

            if (!m.bookmarks[link.href]) {
                continue;
            }

            if (linkBackground != null && linkBackground.trim().length > 0) {
                link.style.background = linkBackground;
            }

            link.className += " bmh-bookmarked-link";

            // Add custom CSS if defined

            if (cssForText) {
                link.style.cssText += ';' + cssForText;
            }

            var child = link.firstChild;

            if (child && child.tagName == "IMG") {
                if (imgBorder != null && imgBorder.trim().length > 0) {
                    child.style.border = imgBorder;
                }

                child.className += " bmh-bookmarked-image";

                // Add custom CSS if defined

                if (cssForImage) {
                    child.style.cssText += ';' + cssForImage;
                }
            }
        }
    }
});

// Collect list of links

var hrefs = [];

for (var i = 0; i < document.links.length; i++) {
    var item = document.links[i];
    hrefs.push(item.href);
}

// Ask background script to check for bookmarks

port.postMessage({hrefs: hrefs});

The backgroundScript.js is:

var port;

function connected(p) {
    port = p;

    port.onMessage.addListener(function(m) {
        var searches = [];

        if (m.hrefs) {
            // Content script is asking if links have been bookmarked
            // Kick off a bunch of searches

            for (var i = 0; i < m.hrefs.length; i++) {
                var href = m.hrefs[i];
                searches.push(browser.bookmarks.search({url: href}));
            }
        }

        // Wait for all searches to finish before continuing

        Promise.all(searches).then(function (results) {
            var bookmarks = {};
            var foundBookmarks = false;

            // Collect results into a single object

            for (var i = 0; i < results.length; i++) {
                var result = results[i];

                if (result.length > 0) {
                    bookmarks[result[0].url] = true;
                    foundBookmarks = true;
                }
            }

            // Pass the good news back to content script

            if (foundBookmarks) {
                var msg = { bookmarks: bookmarks };
                port.postMessage(msg);
            }
        });
    });
}

browser.runtime.onConnect.addListener(connected);

Can you tell where it is breaking down? Is the problem that the code following “Collect list of links” runs too soon?

It’s possible to respond to changes in the page using a MutationObserver, and in fact this would be needed for any page that updates itself as you scroll (such as Facebook, Tumblr, Twitter).

I am not actually sure where it breaks down. I bookmarked https://www.pluralsight.com/courses/protocol-deep-dive-icmp. When I go to https://www.pluralsight.com/search?q=Protocol%20Deep%20Dive, the link is there but it is not highlighted.

As long as you are editing/debugging the script, you could console.log the documents.links array and the hrefs array in the content script to see whether the URL is in there. If it’s not there, then the problem is on the content side. If it is there, the problem may be in the background or when the results are returned. You would need to check those as well.

1 Like