Is that possible calling content script method by context menu item in Chrome extension?

Question

I'm trying to use context menu item to invoke my method written in content script.
Is that possible?

As i have tried, context menu could only doing stuff in backend.
E.g.

// A generic onclick callback function.
function genericOnClick(info, tab) {
console.log("item " + info.menuItemId + " was clicked");
console.log("info: " + JSON.stringify(info));
console.log("tab: " + JSON.stringify(tab));
}

// Create one test item for each context type.
var contexts = ["page","selection","link","editable","image","video",
            "audio"];
for (var i = 0; i < contexts.length; i++) {
var context = contexts[i];
var title = "Test '" + context + "' menu item";
var id = chrome.contextMenus.create({"title": title, "contexts":[context],
                                   "onclick": genericOnClick});
console.log("'" + context + "' item:" + id);
}

This example could not log info on current page but on background page.

I have one content script to generate something on specified page:

var showInfo = function(){ var dialogBoxWrapper = document.createElement("div");
document.body.appendChild(dialogBoxWrapper);}

and i need invoke this function by context menu. What shall i do?

Answer 1

You can refer to following code as a reference, where upon click of a context menu a function in content script is invoked.

Sample Demonstration

manifest.json

{
    "name": "Content to Context menu",
    "description": "http://stackoverflow.com/questions/14452777/is-that-possible-calling-content-script-method-by-context-menu-item-in-chrome-ex",
    "version": "1",
    "manifest_version": 2,
    "background": {
        "scripts": [
            "background.js"
        ]
    },
    "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ],
            "js": [
                "myscript.js"
            ]
        }
    ],
    "permissions": [
        "contextMenus"
    ]
}

background.js

function genericOnClick(info, tab) {
    console.log("item " + info.menuItemId + " was clicked");
    console.log("info: " + JSON.stringify(info));
    console.log("tab: " + JSON.stringify(tab));

    //Add all you functional Logic here
    chrome.tabs.query({
        "active": true,
        "currentWindow": true
    }, function (tabs) {
        chrome.tabs.sendMessage(tabs[0].id, {
            "functiontoInvoke": "showInfo"
        });
    });
}

// Create one test item for each context type.
var contexts = ["page", "selection", "link", "editable", "image", "video",
    "audio"];
for (var i = 0; i < contexts.length; i++) {
    var context = contexts[i];
    var title = "Test '" + context + "' menu item";
    var id = chrome.contextMenus.create({
        "title": title,
        "contexts": [context],
        "onclick": genericOnClick
    });
    console.log("'" + context + "' item:" + id);
}

myscript.js

var showInfo = function () {
    console.log("Show Info is invoked");
}
var showAnotherInfo = function () {
    console.log("Show Another Info");
}
chrome.extension.onMessage.addListener(function (message, sender, callback) {
    if (message.functiontoInvoke == "showInfo") {
        showInfo();
    }
    if (message.functiontoInvoke == "showAnotherInfo") {
        showAnotherInfo();
    }
});

References

• Content Scripts
• Context Menu
• Extension API