0

现在我正在开发一个 Firefox 扩展，它可以根据网页操作显示一些 javascript 对话框。

我有 chrome 扩展版代码，它运行良好。 它的主要工作流程是，当我单击扩展图标时，它将根据网页内容弹出一个特定的 javascript 对话框（使用TINYBOX ）。所以当我尝试在 Firefox 插件中做同样的事情时，我发现我很难。在 chrome 中，消息 api 简单易懂。但在 Firefox 插件中，我经常被页面模块、面板搞砸，工作等等。

现在，我尝试这样做：

  • 当我单击 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 回答