CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-extension
Shubham Jain
Shubham Jain

Reputation: 1984

Open Chrome Extension popup with a keyboard shortcut?

I know we cannot open chrome extension popup directly from background javascript. But is there a way that the popup opens when a user presses some key combination ?

Upvotes: 16

Views: 7439

Answers (2)

Shadab
Shadab

Reputation: 403

If you are using manifest_version of 3 then something like below your manifest.json should look like to open the popup using a keyboard shortcut.

So what is actually happening here is the keyboard shortcut gets mapped to the _execute_action and this _execute_action invokes the action which is by default opening the popup.

{
    "manifest_version": 3,
    "name": "Search Hindi Website",
    "version": "1.0",
    "description": "Search a Hindi website using English text",
    "icons": {
        "16": "icon16.png",
        "32": "icon32.png",
        "48": "icon48.png",
        "128": "icon128.png"
    },
    "permissions": ["scripting", "activeTab"],
    "action": {
        "default_popup": "popup.html",
        "default_icon": {
            "16": "icon16.png",
            "32": "icon32.png",
            "48": "icon48.png",
            "128": "icon128.png"
        }
    },
    "background": {
        "service_worker": "background.js"
    },
    "content_scripts": [
        {
            "matches": ["https://*/*"],
            "css": ["mark.css"]
        }
    ],
    "commands": {
        "_execute_action": {
            "suggested_key": {
                "default": "Alt+Shift+P",
                "mac": "MacCtrl+Command+P"
            }
        }
    }
}

The same thing for manifest_version 2 will look something like below

{
    "manifest_version": 3,
    "name": "Search Hindi Website",
    "version": "1.0",
    "description": "Search a Hindi website using English text",
    "icons": {
        "16": "icon16.png",
        "32": "icon32.png",
        "48": "icon48.png",
        "128": "icon128.png"
    },
    "permissions": ["scripting", "activeTab"],
    "browser_action": {
        "default_popup": "popup.html",
        "default_icon": {
            "16": "icon16.png",
            "32": "icon32.png",
            "48": "icon48.png",
            "128": "icon128.png"
        }
    },
    "background": {
        "service_worker": "background.js"
    },
    "content_scripts": [
        {
            "matches": ["https://*/*"],
            "css": ["mark.css"]
        }
    ],
    "commands": {
         "_execute_browser_action": {
            "suggested_key": {
                "default": "Alt+Shift+E",
                "mac": "MacCtrl+Command+E"
            }
        },
    }
}

Upvotes: 3

Divyesh Kanzariya
Divyesh Kanzariya

Reputation: 3789

The chrome.commands api enables the user to bind hotkeys that will trigger commands such as opening the browser action.

Example : https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/_archive/mv2/api/commands (Press Ctrl+Shift+F (Command+Shift+F on a Mac) to open the browser action popup, press Ctrl+Shift+Y to send an event (Command+Shift+Y on a Mac))

Upvotes: 16

Related Questions