i’ve been working on a firefox extension in which i created a devtools panel where i show some DOM data.
I want to refresh the data in my extension panel every time the url of the current tab changes.
I tried creating a background script which looks at tabupdates and then triggers an event that my panel script should be able to listen to, but it seems like the background script isnt being loaded in.
background.js
I’ve tested this by putting some console logs in and outside of the function but nothing ever gets triggered.
browser.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
// Check if the URL has changed
if (changeInfo.url) {
// Send a message to the devtools panel to trigger a refresh
browser.tabs.sendMessage(tabId, { action: "refresh" });
}
});
manifest.json
{
"description": "xxxx",
"manifest_version": 3,
"name": "xxxx",
"version": "xxxx",
"author": "xxxx",
"icons": {
"48": "icons/star.png"
},
"background": {
"scripts": ["/background.js"],
"persistent": false
},
"permissions": ["<all_urls>"],
"devtools_page": "devtools/devtools-page.html"
}
panel.js listener snippet
browser.runtime.onMessage.addListener((message) => {
if (message.action === "refresh") {
browser.devtools.inspectedWindow.eval(`console.log('test');`);
}
});