Sending information to the content script for a context-menu

Question

I've seen many questions regarding context-menu and two-way communication and it appears that I know the answer to my question... "you can't", but I'm going to try anyway.

On each page there is a modal div that is created by a page-mod. This modal is designed to show up when a user hovers over words in text nodes to give a translation of the word. This works perfectly and I don't have any problems with the page-mod.

What I want to do now is allow the user to highlight a selection of text, right click to bring up the context menu where my new menu item will be to "Translate Selection", and then display the selection in the modal div. Here's where the problems begin. I can respond to the context and click events in the content script, which is fine if I didn't have to do a translation. The translation is done by a web service and the content script cannot call a web service because the callbacks don't exist in the context of the content script because it is in a proxy sandbox. That means that all web service calls need to come from main.js (this is how it works in the page-mod). The problem is that the context-menu object in main.js does not have access to the DOM to update the content of the modal div and show it, and it cannot send information to the content script so that the content script can update the DOM and show the modal div. So how do I get the translation to the DOM from the add-on script for the context-menu?

Is what I want to do possible with the SDK, or do I have to undo many hours of work to put my project back into the "old school" way of doing things so I can get the context menu to work correctly?

This is what I have (the page-mod works, need help with the context-menu):

exports.main = function (options, callbacks) {
    'use strict';
    var myAppMenuItem,
        myAppContextMenu,
        myAppPanel,
        myAppMod,
        self = require('self'),
        contextMenu = require('context-menu');

    myAppMenuItem = require('menuitems').Menuitem();

    if (myAppMenuItem.getAttribute('checked') === 'false') {
        return;
    }

    myAppMod = require('page-mod');
    myAppMod.PageMod({
        include: '*',
        contentScriptWhen: 'ready',
        contentScriptFile: [self.data.url('jquery-1.7.2.min.js'), self.data.url('myAppmod.js')],
        contentStyleFile: self.data.url('myAppmod.css'),
        onAttach: function (worker) {
            worker.port.on(
                'translate',
                function (data) {   
                    require('request')
                        .Request({
                            url: 'http://api.microsofttranslator.com/V2/Ajax.svc/Translate',
                            content: {
                                appid : 'myappid',
                                to : data.to,
                                from : data.from,
                                text : data.text
                            },
                            onComplete: function (response) {
                                worker.port.emit('translation', { response : response.text, elementId : data.elementId });
                            }
                        })
                        .get();
                }
            );
        }
    });

    myAppContextMenu = contextMenu.Item({
        label: "Translate Selection",
        context: contextMenu.SelectionContext(),
        contentScriptFile : [self.data.url('jquery-1.7.2.min.js'), self.data.url('myAppcontextmenu.js')],
        onMessage: function (data) {
            require('request')
                .Request({
                    url: 'http://api.microsofttranslator.com/V2/Ajax.svc/Translate',
                    content: {
                        appid : 'myappid',
                        to : data.to,
                        from : data.from,
                        text : data.text
                    },
                    onComplete: function (response) {
                        <what can I do here to send the information to the content script?>
                    }
                })
                .get();
        }
    });
};

The context menu content script is only for looking at the click context, your `page-mod` content script needs to do the actual work. Meaning that you need to send it a message when the menu item is clicked. The only problem is identifying the worker belonging to the right tab/frame. — Wladimir Palant, Aug 01 '12 at 17:17
@WladimirPalant - thanks for the quick response. Can you provide me an example, or a link to an example, of sending a message to the page-mod from the context-menu in the add-on script. I couldn't find a method or event on the PageMod object that would allow me to send a message to a page-mod from outside the page-mod's content script. Also,would you have any insight into the logic behind figuring out which worker? :) Thanks again for any assistance. — GunnerL3510, Aug 01 '12 at 17:24
So I think I found something for the message sending and worker logic here: http://stackoverflow.com/questions/9571894/panel-pagemod-content-script-message-passing-in-a-firefox-extension — GunnerL3510, Aug 01 '12 at 17:38
@WladimirPalant - ha.. just noticed that you gave the answer to the above linked question. — GunnerL3510, Aug 01 '12 at 18:09
Yes. The problem is that you don't know which tab triggered the context menu - at least I didn't see an obvious way to get it. — Wladimir Palant, Aug 01 '12 at 21:31
@WladimirPalant - I used your code from the linked stackoverflow question :) Massaged it a little, but it does the job perfectly, and I think elegantly in relationship to the SDK. — GunnerL3510, Aug 01 '12 at 22:47

score 3 · Accepted Answer · edited Jul 02 '14 at 23:35

Thank you to Wladimir! The following code does what I want it to:

In the main.js for the context-menu:

myAppContextMenu = contextMenu.Item({
    label: "Translate Selection",
    context: contextMenu.SelectionContext(),
    contentScriptFile : [self.data.url('jquery-1.7.2.min.js'), self.data.url('myAppcontextmenu.js')],
    onMessage: function (data) {
        var text = require('selection').text;
        require('request')
            .Request({
                url: 'http://api.microsofttranslator.com/V2/Ajax.svc/Translate',
                content: {
                    appid : 'myappid',
                    to : data.to,
                    from : data.from,
                    text : text
                },
                onComplete: function (response) {
                    var index,
                        tabs = require('sdk/tabs');

                    for (index = 0; index < workers.length; index += 1) {
                        if (workers[index].tab === tabs.activeTab) {
                            workers[index].port.emit('selectionTranslation', { text: text, response : response.text, leftOffset : data.leftOffset, topOffset : data.topOffset });
                        }
                    }
                }
            })
            .get();
    }
});

and in the content script:

self.on(
    'click',
    function (node, data) {
        'use strict';
        var selectedElement = $(node),
            messageData =
                {
                    to : 'es',
                    from : 'en',
                    topOffset : selectedElement.offset().top + (selectedElement.height() / 2),
                    leftOffset : selectedElement.offset().left + (selectedElement.width() / 2)
                };

        self.postMessage(messageData);
    }
);

There is a global workers array variable defined in the exports.main function that gets populated by the onAttach function of the page mod as so:

        workers.push(worker);

        worker.on(
            'detach',
            function () {
                var index = workers.indexOf(worker);
                if (index >= 0) {
                    workers.splice(index, 1);
                }
            }
        );

Sending information to the content script for a context-menu

1 Answers1

Linked