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?
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/*"
.
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
.