We Keep Coding

Browser Extension "browser.tabs.onUpdated.addListener" works on Chrome but not on Firefox if tab auto reloads

I sucessfully inject a content script to a site for the first time. If I filled out some input fields the site hard reloads (to show some additional informations) and kills also my content script.
In my Chrome Extension I have a workaround for this:
browser.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
const tabURL = 'my-site.com';
if (tab.url.includes(tabURL) && changeInfo.title && changeInfo.title.includes(tabURL)) {
browser.tabs.executeScript(tabId, {
code: `
window.addEventListener("DOMContentLoaded", () => {
new MyApp();
});`
});
}
});
The problem is, it does not work in Firefox as a Firefox extension.
I use the Firefox webextension-polyfill
Is there another "workaround" which works for Firefox?
OR
How can I detect if a page / tab reloads in firefox (e.g. from background script)? (And also reload my content script again)

It could be the answer, because it works :)
// CHROME Version
if (tab.url.includes(tabURL) && changeInfo.title && changeInfo.title.includes(tabURL)
// FIREFOX VERSION
|| tab.url.includes(tabURL) && changeInfo.status === 'complete')

Reload Chrome DevTools Extension Sidebar on Page Change

This may be a dupe of the question at Google Chrome DevTools Extension - Detect Page Change, but it's been sitting for over a year without a real answer, and maybe my question will provide some new insight into the problem.
I've written a Chrome Extension which inserts a sidebar panel into DevTools. The side panel lists the dataLayer events, a user can click on the desired event and then use the element picker to select another element on the page, and the plugin displays the path between the elements in dot notation.
Here's the link to the Github project: https://github.com/gruebleenagency/gtm-data-layer-sifter
It works as I'd like it to normally, but if you navigate to another page, the sidebar is not initialized again, so it displays the info from the previous page.
You can see that I have this in my background.js file:
chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
if (changeInfo.status == 'complete') {
reloadExtension();
}
});
function reloadExtension() {
// ???
}
I'm wondering if there's any way to make the sidebar reload at this point? Or am I going about this in the wrong way? I've spent a lot of time messing around with this trying to get it to work, but nothing seems to do the trick.
Thanks for any and all help.

Here's my solution. It's very possible that this isn't the way it should be done, but I don't have the time to rewrite the whole plugin at the moment, so it'll have to do for now. Any suggestions for how I should have done it would be greatly appreciated. And maybe it will be helpful to someone in a different situation.
Essentially, listen to the tabs.onUpdated event waiting for the 'complete' status, which indicates we've navigated to a new page. Then send message to Devtools.js to refresh the side panel, by setting its page to 'panel.html' again.
In background.js:
chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
if (changeInfo.status == 'complete') {
reloadExtension(port);
}
});
function reloadExtension(port) {
var message = {action: "reloadExtension"};
port.postMessage(message);
}
In Devtools.js:
var sb;
createSidebar();
function createSidebar() {
chrome.devtools.panels.elements.createSidebarPane("GTM dataLayer Sifter", function(sidebar) {
sb = sidebar;
sb.setPage("panel.html");
});
}
var port = chrome.extension.connect({
name: "Devtools.js Communication"
});
// Listen to messages from the background page
port.onMessage.addListener(function(message) {
if(message.action == "reloadExtension"){
sb.setPage("panel.html");
}
});

You can do it by listen onNavigated event:
In Devtools.js
chrome.devtools.network.onNavigated.addListener(() => {
console.log('Inspected page reloaded');
});

chrome.tabs.onUpdated.addListener - reports changeInfo.status == 'complete' immediately

My extension is for Facebook. It logs tab state changes correctly on the first load, but if I navigate to another page through a link on the current page, then it reports changeinfo.status == 'complete' immediately on the click.
I can not find anything to suggest I've made a mistake
chrome.tabs.onUpdated.addListener(check);
function check(tab_id, changeinfo, tab){
console.log("tab change: " + changeinfo.status);
// make sure the page is done loading
if ( !(tab.url !== undefined && changeinfo.status == "complete")) {
return;
}
if(tab.url.match(/facebook.com\/[^\/]*$/)){ //if the url of the tab matches a certain website
chrome.pageAction.show(tab_id); //show the icon (by default it is not shown).
console.log("accepted state: " + changeinfo.status);
}
}

you can try with webNavigation API if it fit your needs
manifest
"permissions": ["webNavigation"]
background script
chrome.webNavigation.onCompleted.addListener(function(details) {
if (details.url.startsWith('https://www.facebook.com/')) {
chrome.pageAction.show(details.tabId);
}
});

You haven't made a mistake, facebook loads it's content dynamically. They change the URL without reloading using history.pushState from the History API.
I don't think you can get the information you need using tabs.onUpdated since the status 'complete' is actually correct from it's perspective. You might have to deal with this in your content script.

Message Passing from Content Scripts to Background Page in Chrome Extensions

Google Chrome Extensions Message Passing Problem :
In this Chrome Extension
My Popup Page:
chrome.browserAction.onClicked.addListener(getMessage);
getMessage();
function getMessage()
{
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.sendRequest(tab.id, {greeting: "hello"}, function(response) {
console.log(response.farewell);
});//getting response from content script
});
}
My Script Page :
chrome.extension.onRequest.addListener(
function(request, sender, sendResponse) {
if (request.greeting == "hello")
sendResponse({farewell: "goodbye"});
else
sendResponse({});
});
I am not getting any response from the content script.
Edits:
As per #serg , i have moved the code to the background page. But still, it is not working

You can't have chrome.browserAction.onClicked listener if you have popup page attached to the browser action button, it won't fire.
Remove popup, leave only button
Move everything into background page.
Replace tab.id with null.
Remove createFile(); call at the beginning as it won't do anything in this case (content script isn't ready to listen yet).
Don't use alerts for debugging extension, use console.log().

Google Chrome Extension Running in the background

I am trying to make a google extension that basically checks the current tab URL to see if the URL is our prefix, so far I have this in my background.html (I have tab and background permissions set in my manifest):
<script type="text/javascript">
chrome.tabs.getSelected(null, function(tab) {
alert(tab.url);
if(tab.url == "http://www.google.com") {
alert("YOU'RE AT GOOGLE");
}
//changeTabURL(tab.url, tab);
});
</script>
So this seems to run only when I first load the extension, it tells me "chrome://extensions" and then it disappears. How do I get it to check each time the user goes to a new URL? Is this possible?
Thanks!

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
if(changeInfo.status == "loading"){
//do url check
}
});

use the following:
chrome.tabs.onUpdated.addListener(function(Tab tab) {...});
See the documentation here.