如何分配键盘快捷键以在 Chrome 扩展清单 v3 中运行功能答案

【问题标题】：How to assign Keyboard Shortcut to run a function in Chrome Extension Manifest v3如何分配键盘快捷键以在 Chrome 扩展清单 v3 中运行功能
【发布时间】：2021-07-04 16:39:10
【问题描述】：

我一直在尝试实现Action command，以便键盘快捷键将触发 background.js 中的功能。当前代码在按下键盘快捷键时没有任何反应。

理想情况下，键盘快捷键会触发 background.js 中的函数 reddenPage。

我假设一些代码需要放在 background.js 中，我只是不确定代码应该在哪里或应该是什么。非常感谢任何帮助！

Manifest.json

{
  "name": "Page Redder",
  "action": {},
  "manifest_version": 3,
  "version": "0.1",
  "description": "Turns the page red when you click the icon",
  "permissions": [
    "activeTab",
    "scripting"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "commands": {
    "_execute_action": {
      "suggested_key": {
        "default": "Ctrl+Shift+F",
        "mac": "MacCtrl+Shift+F"
      }
    }
  }
}

background.js

function reddenPage() {
  document.body.style.backgroundColor = 'red';
}

chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: reddenPage
  });
});

【问题讨论】：

标签： javascript google-chrome google-chrome-extension chrome-extension-manifest-v3

【解决方案1】：

command api 用于监听和操作键盘快捷键。

Manifest.json

{
  "name": "My extension",
  ...
  "commands": {
    "run-foo": {
      "suggested_key": {
        "default": "Ctrl+Shift+Y",
        "mac": "Command+Shift+Y"
      },
      "description": "Run \"foo\" on the current page."
    },
    "_execute_action": {
      "suggested_key": {
        "windows": "Ctrl+Shift+Y",
        "mac": "Command+Shift+Y",
        "chromeos": "Ctrl+Shift+U",
        "linux": "Ctrl+Shift+J"
      }
    }
  },
  ...
}

可以在background.js 中添加监听器来监听命令。

Background.js

chrome.commands.onCommand.addListener((command) => {
  console.log(`Command: ${command}`);
});

Full Documentation regarding keyboard shortcuts.

【讨论】：

感谢您抽出宝贵时间回复！我熟悉文档，但很难实现它，所以他们的键盘快捷键触发了“reddenPage”功能。关于如何做到这一点的任何想法？
我认为在你的情况下，你会在chrome.commands.onCommand.addListener 监听器下面使用chrome.scripting.executeScript()（带有正确的参数）。

【解决方案2】：

lejlun 的回答不正确！正如 Chrome 扩展文档所说：

_execute_action（Manifest V3）、_execute_browser_action（Manifest V2) 和 _execute_page_action (Manifest V2) 命令保留用于触发您的操作、浏览器操作或页面操作的操作分别。这些命令不调度 command.onCommand 事件像标准命令一样。

您正确地使用了action.onClicked 事件。

问题是在executeScript 的参数中你写了function 而不是func。根据documentation，函数调用应该是这样的：

chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    func: reddenPage
  });
});

此外，您尝试变红的页面可能将其背景颜色设置为!important。在这种情况下，您对背景颜色的更改将无效，因为它将被!important 样式覆盖。要确保应用背景颜色，您可以使用document.body.style.setProperty('background-color', 'red', 'important');

【讨论】：