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.

`alert` not showing in ManifestV3 background service worker

I am trying to make a chrome extension that alerts you in the tab that you are currently moving or highlighting. I have tried reading the chrome migrating to V.3 documentation and have come up with the following code, however, the alerts never appear. Does anybody know what I need to change or add?
// manifest.json
{
"manifest_version": 3,
"name": "Alert",
"version": "0.1",
"description": "alerts you when doing tab functions",
"permissions": ["tabs", "activeTab"],
"host_permissions": ["<all_urls>"],
"background": {
"service_worker": "background.js"
}
}
//background.js
chrome.tabs.onMoved.addListener(function () {
alert("You moved this tab");
});
chrome.tabs.onHighlighted.addListener(function () {
alert("You highlighted this tab");
});
Working directory:
.
├── background.js
├── manifest.json

alert() method cannot be used outside of the browser environment, you can use console.warn() or console.error() instead. But is not a good solution if you want to show an error message to the extension user, as they would never open the console.
If you would like a more user friendly approach use the following:
chrome.notifications.create({
type: 'basic',
iconUrl: '/images/image_if_any.png',
title: `Notification title`,
message: "Your message",
priority: 1
});
Also add "notifications" to "permissions" in your manifest.json file:
"permissions": [..., "notifications"]

alert is not defined in a service worker per specification so we'll have to use console.log
Also, I was looking in the wrong place for the alert messages. I needed to look at the service worker link in my unpacked extension page.

How do I use Discord-RPC with Chrome Extension?

I want to make a chrome extension which parses youtube/soundcloud/... pages and gets current song's name. Then it should update user's rich presence status in discord. Like a did it in python there.
I have that one so far. Title already parsed, there's no problem. I have a problem with that code works. Because it doesn't work.
const clientId = '605777168739598338';
const scopes = ['rpc', 'rpc.api'];
const client = new RPC.Client({ transport: 'websocket' });
client.connect();
function updatePresence(title, time, icon) {
title = title.replace(/["]/g, "\\\"");
client.setActivity({
details: title,
startTimestamp: time,
largeImageKey: icon
}, 9999)
}
I also tried raw websocket connection but I'm stupid..
UPD:
The code above is in content.js.
browser.js is a file copied from root of module discord-rpc which i downloaded via npm.
manifest.json
{
"manifest_version": 2,
"name": "Tomori Player",
"version": "0.1.0",
"browser_action": {
"default_icon": "icon.png"
},
"background": {
"scripts": ["browser.js"]
},
"permissions": [
"ws://localhost:6463/*",
"tabs",
"webRequest",
"webRequestBlocking"
],
"content_scripts": [
{
"matches": [
"https://www.youtube.com/watch*",
"https://youtube.com/watch*"
],
"js": ["content.js"]
}
]
}
P.S. I'm so sorry. I'm new in JS.

There's a solution I found:
Chrome Extension parses page and sends sockets to another app
Another app on your PC gets these sockets and then sends RPC to Discord
Timeraa#7947 (PreMiD dev): Discord will disconnect almost immediately if you connect with a browser, trust me i tried. You will need to have an application running in the background
So, you can use PreMiD and push up PreMiD's presences list or make your own app to do it.

Script not running in firefox addon build with KangoFramework

Ok so i am actually interested in building an extension for google chrome and firefox and my friend recommended me KangoFramework since it is cross platform.
So I downloaded ver 1.7.9 of the framework can't actually download ver 1.8.0 due to 404 error on their web or something. So I got to coding my first page with is the login page and I wrote some scripts for it to run and it work! Great !!
And so i wrote another page and I wrote another script and it works on google chrome but in firefox it seems like it didnt load my script at all as the debugger doesn't even show that I have the script file.
so i am confuse by this as how can this happen
here's my extension_info.json
{
"content_scripts": [
"assets/Javascript/LoginPage.js"
],
"description": "Extension description",
"creator": "Annonymous",
"background_scripts": [
"main.js"
],
"homepage_url": "http://kangoextensions.com/",
"version": "0.9.0",
"browser_button": {
"caption": "some Extension",
"icon": "icons/Logo.png",
"tooltipText": "add on"
},
"name": "someExtension"
}
And here's my main.js File
function MyExtension() {
var self = this;
kango.ui.browserButton.addEventListener(kango.ui.browserButton.event.COMMAND, function() {
kango.ui.browserButton.setPopup({url:'Index.html', width: 500, height:500});
});
}
MyExtension.prototype = {
_onCommand: function() {
kango.browser.tabs.create({url: 'http://kangoextensions.com/'});
}
};
var extension = new MyExtension();
and here's my html: http://pastebin.com/REdbhRqu
and here's my HamburgerMenu.js : http://pastebin.com/SvnRkH9Y
and lastly here the PhotoSwipe.js : http://pastebin.com/ykMW13YN
PhotoSipe.js is just to start the plugin

Chrome Commands API Global Attribute

I know about both common problems that people are having:
If you change the command keys in the manifest file you need to
remove and reinstall it for the changes to take effect.
Even if you do this, you may also need to scroll down on the
extensions page, click the keyboard shortcuts link, and set the
commands manually.
About six months ago, I successfully implemented global keyboard commands with a Chrome Extension on the Chrome OS platform, it seems as though one of their updates has broken this feature... perhaps someone knows of a workaround? With the code below, if you load as an unpacked extension, then scroll down the chrome://extensions page to manually click the "Keyboard Shortcuts" and assign the command, you will see that you have the option to set it to run in either Chrome or Global... Chrome works, but if you assign Global, nothing happens (both inside Chrome and outside when using the file system or apps)... any ideas?
background.js
chrome.commands.onCommand.addListener(function(command) {
if (command == "toggleHighContrast") {
chrome.accessibilityFeatures.highContrast.get({},function (callback){
var value = true;
if (callback.value) value = false;
chrome.accessibilityFeatures.highContrast.set({value:value});
});
}//Ctrl+Shift+A
});
manifest.json
{
"manifest_version": 2,
"name": "High Contrast",
"short_name": "contrast",
"description": "",
"version": "0.0.1",
"minimum_chrome_version": "38",
"offline_enabled": true,
"commands": {
"toggleHighContrast": {
"global":true,
"description": "Toggle High Contrast Mode"
}
},
"background": {
"scripts": ["background.js"],
"persistent": true
},
"permissions": [
"accessibilityFeatures.read",
"accessibilityFeatures.modify"
]
}