How to assign Keyboard Shortcut to run a function in Chrome Extension Manifest v3

user_266435 0
Viewed 832

I'm stuck trying to implement the Action command so that a keyboard shortcut will trigger the function inside background.js. The current code results in nothing happening when the keyboard shortcut is pressed.

Ideally the keyboard shortcut would trigger the function reddenPage inside background.js.

I assume some code needs to be placed in background.js, I'm just not sure where or what the code should be. Any help is much appreciated!

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
  });
});
chrome-extension-manifest-v3 google-chrome-extension google-chrome javascript
2 Answers

The command api is used to listen and act on keyboard shortcuts.

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

A listener can be added to the background.js to listen for the command.

Background.js

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

Full Documentation regarding keyboard shortcuts.

user_148617370

lejlun's answer is not correct! As the Chrome extension documentation says:

The _execute_action (Manifest V3), _execute_browser_action (Manifest V2), and _execute_page_action (Manifest V2) commands are reserved for the action of trigger your action, browser action, or page action respectively. These commands do not dispatch command.onCommand events like standard commands.

You are correctly using the action.onClicked event.

The problem is that in the parameter to executeScript you wrote function instead of func. According to the documentation, the function call should look like this:

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

Also, the page you are trying to redden might have its background color set as !important. In this case, your change of the background color will have no effect as it will be overwritten by the !important style. To make sure the background color is applied, you can use document.body.style.setProperty('background-color', 'red', 'important');

user_76493080
Related