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();
        }
    });
};

Answer 1

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);
                }
            }
        );