How to activate/deactivate chrome extension with keyboard shortcut (development)-CodePudding

I'm trying to set a keyboard shortcut to active/deactivate my Chrome extension that I'm developing. The Chrome extension just consists of a "content_script" that runs on certain sites. I want it to fully activate/deactivate the extension, like if I were to disable it via Chrome://extensions.

In my search for answers, I saw a lot of suggestions to add "_execute_browser_action" to my manifest.json, but I think this command requires a listener that needs to be set up in background.js (correct me if I'm wrong). I want to avoid a background.js if possible, as I want to keep this extension short and sweet.

Here is my manifest.json:

{
  "manifest_version": 2,
  "name": "foo",
  "description": "foo",
  "version": "0.1.0",
  "commands": {
    "_execute_browser_action": {
      "suggested_key": {
        "default": "Ctrl Shift 8"
      }
    }
  },
  "content_scripts": [{
    "js": ["./dist/bundle.js"],
    "matches": [ ...certain sites... ]
  }],
  "icons": {
    "16": "/icons/logo16.png",
    "32": "/icons/logo32.png",
    "48": "/icons/logo48.png",
    "128": "/icons/logo128.png"
  }
}

With this manifest.json, the shortcut shows up in Chrome://extensions/shortcuts, but the shortcut does nothing. When I press the combination, nothing happens. Even when I refresh the page, reload extension, re-bundle, restart Chrome, etc.

How should I go about adding this keyboard shortcut?

Also, I'm using Babel/Webpack, if that helps.

CodePudding user response：

I ended up solving my own issue. Updating here in case it helps anyone else.

It turns out a background.js was exactly what I was looking for. My background script sets a chrome.storage API field, triggered by browserAction, which my content_script then ingests to toggle it on/off. Then the page is refreshed to update the page html. (Inspiration taken from here)

background.js:

var x = true

enableBrowserAction()

function disableBrowserAction() {
  chrome.storage.local.set({enabled: false})
}

function enableBrowserAction() {
  chrome.storage.local.set({enabled: true})
}

function updateState() {
  if (x == false) {
    x = true
    enableBrowserAction()
  } else {
    x = false
    disableBrowserAction()
  }
  chrome.tabs.reload()
}

chrome.browserAction.onClicked.addListener(updateState)

manifest.json (with only the necessary fields):

{
  "manifest_version": 2,
  "browser_action": {},
  "commands": {
    "_execute_browser_action": {
      "suggested_key": {
        "default": "Ctrl Shift 8"
      }
    }
  },
  "permissions": [
    "storage"
  ],
  "background": {
    "scripts": ["background.js"]
  },
  "content_scripts": [{
    "js": ["./dist/bundle.js"],
    "matches": [ ...certain sites... ]
  }]
}

content_script (entry for bundle.js):

import ServiceHandler from './ServiceHandler.js'

chrome.storage.local.get('enabled', data => {
  if (data.enabled) {
    const sh = new ServiceHandler()
    sh.execute()
  }
})