We Keep Coding

Chrome extension service workers stops listening to events after opening popup

I'm developing a chrome extension with MV3.
I've encountered an issue in which when I open the popup when clicking on the extension's icon the service worker background script stops receiving the chrome.tabs.onUpdated events, even after I close the popup. The only way I can make it work again is by reloading the extension.
I will mention that the popup that I'm rendering is a react app, not sure if it has to do with the issue, but when I swap the popup content to a normal HTML with just a button or something it is working as expected
Basically what I'm trying to do in the extension is listen to chrome.tabs.onUpdated event to detect URL changes in the background script, and send a message to a content script in order to save some data to the chrome local storage.
This is the manifest.json -
{
"name": "My Extension",
"description": "Extension POC",
"version": "0.0.0.1",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"permissions": ["tabs", "storage", "activeTab"],
"action": {
"default_popup": "build\\index.html",
"default_title": "Open Pane",
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"]
}
]
}
And this is the background.js -
chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
if (!isPageDoneLoading(changeInfo)) {
return;
}
const url = tab.url;
const ticketId = url.substring(url.lastIndexOf("/") + 1);
if (isTargetURL(url) && !isNaN(ticketId)) {
// Update the ID only if it doesn't equal to the previous one or if null
if (!CURRENT_TICKET_ID || CURRENT_TICKET_ID !== ticketId) {
CURRENT_TICKET_ID = ticketId;
const props = getProperties(ticketId);
chrome.tabs.sendMessage(tabId, { action: {ticketId, props: props} });
}
}
})
Any idea what may be the root cause or how can I resolve the issue?

What React version are you using? In the older React version, part of the create-react-app script creates a file called serviceWorker.js. and a call to it in index.js. When I created a new project with a newer React version, 18.X.X it didn't create this file. I suppose there is some conflict with the service worker of the chrome extension and the one react app created.

How to use background.html in manifest v3 in chrome extension

I'm trying to use the library of ffmpeg.wasm to download m3u8 videos in the background.js but it shows the error
ffmpeg.js:1 Uncaught (in promise) ReferenceError: document is not defined
at ffmpeg.js:1
at ffmpeg.js:1
at f (ffmpeg.js:1)
at Generator._invoke (ffmpeg.js:1)
at Generator.next (ffmpeg.js:1)
at n (ffmpeg.js:1)
at c (ffmpeg.js:1)
at ffmpeg.js:1
at new Promise (<anonymous>)
at ffmpeg.js:1
After I checked the document, it suggested me to use jsdom or create a new tab or window.
Service workers do not have access to windows or the DOM. If your
extension needs that, you can use libraries like jsdom or use
chrome.windows.create and chrome.tabs.create. It depends on your usage
and what fits your needs.
This is also needed if your background scripts record audio or video,
as that is not possible in service workers.
However, the document did not actually teach me how to do. I tried to use chrome.windows.create and chrome.tabs.create but it is not what I want because it actually create a new window or tab explicitly.
Then, I tried to use jsdom. I installed it with NPM. After I imported the library, it showed the error
service worker registration failed
Here is my manifest.json:
{
"name": "vDonwloader",
"description": "Download HLS videos.",
"version": "1.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"action": {
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["contentScript.js"],
"run_at": "document_start"
}
],
"permissions": [
"webRequest",
"tabs"
],
"host_permissions":[
"<all_urls>"
]
}
Here is my background.js:
importScripts('ffmpeg.js');
const { createFFmpeg, fetchFile } = FFmpeg;
const downloadHlsListener = async (msg, sender, sendResponse) => {
if(msg.action === 'DOWNLOAD_HLS'){
//...Do something
}
}
chrome.runtime.onMessage.addListener(downloadHlsListener);
How can I solve this problem? I want to make a chrome extension to download .m3u8 videos with ffempeg library.

Can't send data out of executeScript in chrome-extension

I am developing one chrome extension which can extract all the meta tags of the current tab. I am using ReactJs as the main development environment and I have placed my chrome related code in its componentWillMount() method.
componentWillMount() {
const code =
"let metas = document.getElementsByTagName('meta');" +
"let newMetas = []" +
"for (let meta of metas) {" +
" newMetas.push({name: meta.name, content: meta.content});" +
"}" +
"newMetas;";
chrome.tabs.executeScript(null, {
code: code
}, function (results) {
console.log(results); // <=== Here I get 'null' value
if (!results) {
return;
}
})}
this is my manifest.json file
{
"manifest_version": 2,
"name": "Northwind",
"description": "Just a simple all with all northwind employees",
"version": "1.0",
"browser_action": {
"default_icon": "./img/ic-logo.png",
"default_popup": "./index.html"
},
"permissions": [
"http://www.amazon.com/",
"tabs"
],
"web_accessible_resources": ["script.js"],
"content_scripts": [{
"matches": ["http://www.amazon.com/*"],
"js": ["app.js"]
}
]
}
app.js is the build file generated by the react.
I have been reading and searching for this but did not get any clues of why it's not working.
Another issue is that when I put console.log('done') in my script, it's not displayed as well so I guess there is some problem with the config as well.
Thanks so much for your help.

When you are using chrome.tabs.executeScript you have to specify host in the permissions field of the manifest.
It is called programmatic injection:
To insert code into a page, your extension must have cross-origin permissions for the page. It also must be able to use the chrome.tabs module. You can get both kinds of permission using the manifest file's permissions field.

Notifications not working in web extension (Firefox) [duplicate]

This question already has answers here:
TypeError: [API] is undefined in content script or Why can't I do this in a content script?
(2 answers)
Closed 5 years ago.
I am using the Developer Version of Firefox (Version 54.0a2, but also tried the normal Firefox with Version 51) and I want to include notifications in my web extension.
browser["notifications"] does not exist though.
Since it was not working in my extension and I thought maybe something was conflicting I created this very basic web-extension.
the manifest.json:
{
"manifest_version": 2,
"name": "Extension",
"version": "1.0",
"description": "...",
"icons": {
"48": "icons/icon-48.png"
},
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"js": ["test.js"]
}
],
"permissions": ["notifications", "storage"]
}
test.js (storage works just fine btw.)
if (browser["notifications"]) {
console.log('Notifications exist!');
browser.notifications.create({
"type": "basic",
"iconUrl": browser.extension.getURL("icons/icon-48.png"),
"title": "test",
"message": "test"
});
}
else {
//it always executes this part :/
console.log('notifications do not exist');
console.log(browser);
}
Debugging the add-on doesn´t show any errors either.

Many of the apis exclusive for extensions can only be run inside background script. The usual technique if you need to run it from a content script is to send a message from content script to background script, handle the message in background script and run from there the command you wanted.
In your case, there are a few examples at the end of Notification Api, one of them being notify-link-clicks-i18n where you can view how they do the message passing to create the notification from the background script.

Chrome Extension native messaging not opening port

I need to create a Chrome Extension that, among other things, needs to call a native windows app to get some data, particularly IP Address, and a Citrix User ID(it's obviously on Citrix). Currently, I am unable to open the port in the extension, and I am just doing this all locally, on Windows 10, no Citrix.
My manifest file for the listener is:
{
"name": "com.q.userid",
"description": "My Application",
"path": "C:\\Temp\\NativeMessageHost.exe",
"type": "stdio",
"allowed_origins": [
"chrome-extension://mbodcbioidcfdfhjgekeppinibhhnnmh/"
]
}
For the sake of simplicity/testing, my extension uses a browser action, that has a pop up with a text box, and I call my native app in the onKeyUp. My JS for this is as follows:
$(function() {
$('#name').keyup(function(){
var port;
port = chrome.runtime.connectNative('userid');
console.log(port);
port.onMessage.addListener(function(msg) {
console.log('Received: ' + msg);
});
port.onDisconnect.addListener(function() {
console.log("Disconnected");
});
port.postMessage({text: "hello"});
});
});
My Manifest File for the extension is:
{
"manifest_version": 2,
"name": "Hello World",
"description": "Hello World",
"version": "1.1",
"browser_action": {
"default_icon": "icon.png",
"default_title": "Hello World",
"default_popup": "popup.html"
},
"permissions": [
"nativeMessaging"
]
}
When I trigger the code, I get an output of
Port {}
Disconnected
"Disconnected" is immediate.
From the windows task manager, I do not see the exe launching.
In the console of the extension I past in the line
port = chrome.runtime.connectNative('userid');
Then I paste in
port.postMessage({text: "hello"});
That yields an uncaught error: attemting to use a disconnected port.
I added the registry key:
HKEY_CURRENT_USER->SOFTWARE->Google->Chrome->NativeMessagingHosts->com.q.userid
default : c:\temp\manifest.json
I also tried it as
default : c:\temp\manifest.json
the chrome log stated it was unable to find the manifest file for userid
Any thoughts or suggestions?
Thanks in advance.