0

現在、Webページのアクションに従ってJavaScriptダイアログを表示できるFirefox拡張機能に取り組んでいます。

私はクロム拡張版のコードを持っていますが、うまく動作します。 主なワークフローは、拡張機能のアイコンをクリックすると、Web ページのコンテンツに応じて特定の JavaScript ダイアログ ( TINYBOXを使用) が表示されることです。だから、Firefoxアドオンで同じことをしようとすると、難しいと思います.Chromeでは、メッセージAPIはシンプルで理解しやすいです.しかし、Firefoxアドオンでは、page-mod、panelによってしばしば混乱します、仕事など。

今、私はこのようにしようとしています：

  • Firefox 拡張アイコンをクリックすると、コンテンツ スクリプトにメッセージ (メイン html の src を含む) が送信されます。

  • 次に、コンテンツ スクリプトの相対メソッドがメッセージを使用してダイアログをポップアップします (TINYBOX を使用)。

  • そのため、ページは表示できますが、css と js はありません (メイン html のスタイルと js リンクが無効であるため)。それで、誰かが前にこの種の仕事をしたことがありますか？または、ヒントを教えてください。ありがとうございます。

4

1 に答える 1

0

これを試して：

Main.js[コンテンツスクリプト]

var workers = [];
var widget = widgets.Widget({
     id: "my-link",
     label: "my-page",
     contentURL: self.data.url('mypage.ico')//,
     //emit the click event
     contentScript: 'self.port.emit('icon-click', 'icon clicked')'  
});

function detachWorker(worker, workerArray) {
   var index = workerArray.indexOf(worker);
   if(index != -1) {
       workerArray.splice(index, 1);
   }
}

var pageMod = require('sdk/page-mod').PageMod({
     include: ['https://my-page.com'],
     //pass the click event to page Script
     contentScript: 'self.port.on("icon-click", function()
           {document.defaultView.postMessage({ action:"icon-clicked", msg: "my message", "https://my-page.com"})
     })',
     onAttach: function(worker) {
         workers.push(worker); 
         worker.on('detach', function () {
               detachWorker(this, workers);
         });
     }
});

//pass event to worker's content script
widget.port.on('icon-click', function(){
    //use for each on workers
    worker[0].port.emit("icon-click", 'icon clicked');
});

さて、ページスクリプトでpostMessageをリッスンします

window.addEventListener('message', function(event) {
     //include all the dialog libs/resources/css in page  
     var data = event.data;
      if(data.action === 'icon-clicked'){
       showDialog(data.msg);
      }

  }, false);
于 2013-07-15T05:21:31.397 に答える