I'm writing a simple Chrome extension that intercepts media key events and interacts with a website.
I have it set up so that the extension can be toggled off and on by clicking it. While on, it monitors a tab and dispatches events to it when the media keys are pressed. When it's off, it still intercepts the media key presses, but doesn't do anything with them.
My problem is that I want to stop intercepting the media key presses when the extension is "off". I would like Chrome to utilize the media keys the way it normally would if my extension wasn't installed. I assume there is a way to stop intercepting the key presses, or to forward them to Chrome, but I can't figure out how.
Currently I'm using the manifest to intercept the key presses with this code:
{
.... a bunch of stuff ...
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"commands": {
"playPause": {
"suggested_key": {
"default": "MediaPlayPause"
},
"global": true,
"description": "Toggle play/pause"
},
"playNext": {
"suggested_key": {
"default": "MediaNextTrack"
},
"global": true,
"description": "Play next track"
},
"playPrev": {
"suggested_key": {
"default": "MediaPrevTrack"
},
"global": true,
"description": "Play previous track"
}
}
}
Then I'm catching the key presses with this:
function commandFired(command) {
chrome.storage.local.get('activeTabId', result => {
if (result.activeTabId == -1) {
//send to chrome normally here
return;
}
switch (command) {
case "playNext":
//Handling next
break;
case "playPrev":
//Handling prev
break;
case "playPause":
//Handling play
break;
}
});
}
chrome.commands.onCommand.addListener(commandFired);
Chrome doesn't have an API to disable hotkeys programmatically so you'll have to unregister the entire service worker and offer a button in the popup to re-register it.
manifest.json:
"action": {"default_popup": "popup.html"},
popup.html:
<label><input type=checkbox id=power>Enabled</label>
<script src=popup.js></script>
popup.js:
Object.assign(document.getElementById('power'), {
checked: !!navigator.serviceWorker.controller,
async onchange() {
if (this.checked) {
const bg = chrome.runtime.getManifest().background;
await navigator.serviceWorker.register(bg.service_worker, {type: bg.type});
} else {
(await navigator.serviceWorker.getRegistration())?.unregister();
}
},
});
In case you want to keep listening to other chrome events, register a different bg2.js file after unregistering the main one. The main bg.js can import bg2.js to deduplicate the code, more info.