Calling content script for current tab

Add-ons Development
#1

I’m new to this add on development and followed some tutorials by firefox.

I want to call a content script when a page DOM has loaded. This script will log the URL (as test purpose)

I have browserAction map with index.html and script.js. This script.js has the code:let executing = browser.tabs.executeScript({ file: "../content-script.js" }); executing.then(onExecuted, onError);

Where I try to call the content-script.js. The functions of onExecuted and onError will log.

Also inside the content-script I will log : browser.webNavigation.onDOMContentLoaded.addListener(logOnDOMContentLoaded, filter);
In my manifest I have set the permissions for webNavigation and tabs.

The problem is, I don’t see any log at all. So I guess the script is not even executed.
Can somebody help me with calling the content script or point towards a tutorial that works?

#2

You are making things too complicated. No need to use webNavigation API at all, also I’m not even sure it’s available from content script (there is a limited subset of API available in content scripts).

First of all, browser.tabs.executeScript takes second parameter where you can specify that you want your script to be executed after the DOM loaded. See the docs:


Second thing - even if would like to react to DOM loaded event, it can be done without webNavigation, simply by using something like this:

const isDomReadyFn = () => document.readyState === 'complete' || document.readyState === 'interactive';
const DOMContentLoadedPromise = new Promise((resolve => isDomReadyFn() ? resolve() : document.addEventListener('DOMContentLoaded', resolve)));
// now you can use promise "DOMContentLoadedPromise" to execute code when DOM gets loaded

Third thing - you need permission for the host, not tabs. Tabs permission only gives you access to some special tab properties (like URL or favicon). So to inject code into page with google.com page loaded you need host permission for "*://google.com/*".

#3

Thanks for your help. I added a runAt: "document_end" in the browser.tabs.executeScript

I changed the host permissions in the manifest to "*://*/.*", it now asks for permission that data on every domain can be accessed.

But still I don’t see any console.log in my developer inspecter. I even added a button in my add-on that would launch a function to log a thing, which isn’t even working.

So it seems I’m doing something wrong. I don’t want users to interact with the add on in this way. It should automaticly run the script each time the user navigates to a new page. That’s why I used the browser.webNavigation.onDOMContentLoaded.

#4

Few more things to note:

  • if you want script to be executed every time they visit some page, use content_script: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts
    You can again define to execute it after DOM is loaded

  • you can’t execute scripts on some specific pages, like browser build in pages - including New tab page, about:addons, other extension pages and many Firefox domains. No matter what permission you use.

  • the host permission for all domains is "<all_urls>", but it’s very powerful permission so use it only when you really need to execute it on all pages

  • Firefox has issues with logging errors in content scripts - so try to look into Browser Console (not just Web Console) to see if there are any errors