發送信息到內容腳本的上下文菜單

Question

我見過很多關於上下文菜單和雙向通信的問題，看來我知道我的問題的答案......「你不行」，但我要去試試。

在每個頁面上都有一個由page-mod創建的模態div。這種模式被設計爲當用戶在文本節點中懸停單詞以顯示該單詞的翻譯時顯示。這工作完美，我沒有任何問題，頁面的國防部。

我現在想要做的是允許用戶突出顯示選擇的文本，右鍵單擊以調出上下文菜單，其中我的新菜單項將用於「翻譯選擇」，然後在模式中顯示選擇DIV。這是問題出現的地方。我可以迴應上下文並點擊內容腳本中的事件，如果我不需要翻譯，這很好。翻譯由Web服務完成，內容腳本無法調用Web服務，因爲回調在內容腳本的上下文中不存在，因爲它位於代理沙箱中。這意味着所有的Web服務調用都需要來自main.js（這是它在page-mod中的工作原理）。問題是main.js中的上下文菜單對象無法訪問DOM來更新模式div的內容並顯示它，並且它不能將信息發送到內容腳本，以便內容腳本可以更新DOM並顯示模態分區。那麼，如何從上下文菜單的附加腳本獲取到DOM的翻譯？

是我想要做的可能與SDK，或者我必須撤消許多小時的工作，使我的項目回到「老派」的做事方式，所以我可以讓上下文菜單正常工作？

這是我（頁面-MOD作品，需要與上下文菜單中的幫助）：

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

謝謝弗拉基米爾！下面的代碼做什麼，我希望它：

在main.js的上下文菜單：

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

，並在內容腳本：

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

有一個全局workers在exports.main函數中定義的數組變量由頁面模型的onAttach函數填充，如下所示：

 workers.push(worker); 

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