CODEWITHSUNDEEP
google-chrome-extension
aproximation
aproximation

Reputation: 501

Can't seem to get chrome.contextMenus.onClicked to fire in Chrome extension

I'm trying to write my first browser extension and I can't seem to get the click-handler to fire with a context menu item is clicked. The console.log calls don't seem to spit anything out to the console, and I tried using alert() just in case the "background" scripts (not sure what the difference between background and content scripts is exactly yet), but that didn't seem to do anything either.

When I select some text in an input in my test page, right-click and select either Encrypt or Decrypt, nothing happens; not in the console or in the network tabs in developer tools. What am I doing wrong?

manefest.json:

{
    "manifest_version": 2,

    "name": "my name",
    "description": "my description",
    "version": "1.0",

    "background": {
        "scripts": ["jquery-3.2.1.min.js", "background.js"],
        "persistent": false
    },
    "content_scripts": [
        {
            "matches": ["http://*/*", "https://*/*"],
            "js": ["content_script.js"]
        }
    ],
    "permissions": [
        "activeTab",
        "contextMenus",
        "http://my.hostname.com/"
    ]
}

background.js:

/**
 * A handler which will run the analysis of the DOM element's selected text
 */
function clickHandler(info, tab) {
    "use strict";
    console.log(info);
    console.log(tab);
    // get selected text as encrypt/decrypt
    chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
        chrome.tabs.sendMessage(tabs[0].id, "get selection", null, function(selection) {
            var data = {
                "action": action,
                "selection": selection
            };
            var max_length = 4095;
            if (data.selection.length > max_length) {
                data.selection = data.selection.substring(0, max_length);
            }
            var url = "http://my.hostname.com/";
            jQuery.post(url, data, function (response) {
                chrome.tabs.sendMessage(tabs[0].id, response);
            }, "json");
        });
    });
}

/**
 * Create a context menu items to allow encode/decode
 */
chrome.runtime.onInstalled.addListener(function() {
    chrome.contextMenus.create({
        "id": "encrypt",
        "title": "Encrypt",
        "type": "normal",
        "contexts": ["editable"]
    });

    chrome.contextMenus.create({
        "id": "decrypt",
        "title": "Decrypt",
        "type": "normal",
        "contexts": ["selection"]
    });

    chrome.contextMenus.onClicked.addListener(clickHandler);
});

Upvotes: 7

Views: 8239

Answers (1)

Daniel Herr
Daniel Herr

Reputation: 20438

You need to move contextMenus.onClicked outside onInstalled.

chrome.runtime.onInstalled.addListener(function() {
 //create context menus
})
chrome.contextMenus.onClicked.addListener(function() {
 //handle context menu actions
})

"Register to receive any events your extension is interested in each time the event page is loaded. The event page will be loaded once for each new version of your extension. After that it will only be loaded to deliver events you have registered for. This generally means that your event listeners should be added at the top level scope of the event page, otherwise they may not be available when the event page reloads. If you need to do some initialization when your extension is installed or upgraded, listen to the runtime.onInstalled event. This is a good place to register for declarativeWebRequest rules, contextMenu entries, and other such one-time initialization."

https://developer.chrome.com/extensions/event_pages#best-practices

Upvotes: 12

Related Questions