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?

You can invoke methods of content scripts indirectly from background page through context menu using message communication — Sudarshan, Jan 22 '13 at 11:19
Thank you for the reply. can you give me one simple example for this case? — Shawn, Jan 22 '13 at 17:36

score 15 · Answer 1 · answered Jan 23 '13 at 06:29

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

Is there any particular reason you use `chrome.tabs.query(...)` instead of just doing `chrome.tabs.sendMessage(tab.id, ...)`? — damd, Apr 08 '16 at 07:21