Chrome 扩展程序命令切换

Question

我正在编写一个简单的 Chrome 扩展程序，用于拦截媒体键事件并与网站交互。

我已将其设置为可以通过单击扩展来关闭和打开它。打开时，它会监视选项卡并在按下媒体键时向其分派事件。当它关闭时，它仍然会拦截媒体按键，但不会对其执行任何操作。

我的问题是，当扩展程序“关闭”时，我想停止拦截媒体按键。如果我的扩展程序未安装，我希望 Chrome 能够像平常一样使用媒体键。我认为有一种方法可以停止拦截按键，或者将它们转发到 Chrome，但我不知道如何实现。

目前，我正在使用清单通过以下代码拦截按键：

{
    .... 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"
        }
    }
}

然后我用以下代码捕获按键：

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);

Answer 1

Chrome 没有以编程方式禁用热键的 API，因此您必须取消注册整个 Service Worker，并在弹出窗口中提供一个按钮来重新注册它。

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();
    }
  },
});

如果您想继续侦听其他 chrome 事件，请在取消注册主文件后注册另一个 bg2.js 文件。主bg.js可以导入bg2.js来删除重复代码，更多信息。