如何使用键盘快捷键 activate/deactivate chrome 扩展（开发）

Question

我正在尝试为 active/deactivate 我正在开发的 Chrome 扩展程序设置键盘快捷键。 Chrome 扩展仅包含在某些站点上运行的“content_script”。我希望它完全 activate/deactivate 扩展，就像我要通过 Chrome://extensions.

禁用它一样

在寻找答案时，我看到很多建议将“_execute_browser_action”添加到我的 manifest.json，但我认为此命令需要一个监听器，需要在 background.js（如果我错了请纠正我）。如果可能，我想避免使用 background.js，因为我想让这个扩展名简短而有趣。

这是我的 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"
  }
}

有了这个 manifest.json，快捷方式显示在 Chrome://extensions/shortcuts 中，但快捷方式什么都不做。当我按下组合键时，没有任何反应。即使我刷新页面、重新加载扩展、重新捆绑、重新启动 Chrome 等

我应该如何添加这个键盘快捷键？

此外，如果有帮助，我正在使用 Babel/Webpack。

Answer 1

我最终解决了自己的问题。在这里更新以防对其他人有帮助。

结果 background.js 正是我要找的。我的后台脚本设置了一个 chrome.storage API 字段，由 browserAction 触发，我的 content_script 然后摄取它以切换它 on/off。然后刷新页面更新页面html。（灵感来自 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（只有必要的字段）：

{
  "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（bundle.js 的条目）：

import ServiceHandler from './ServiceHandler.js'

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

如何使用键盘快捷键 activate/deactivate chrome 扩展（开发）

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

javascript

google-chrome

webpack

google-chrome-extension

babeljs