Question

我们已为我们的应用创建了Chrome扩展程序。我们在导航栏上放置的“扩展图标”的CLICK事件中从“js文件”调用METHOD。为此，我们使用app.js（包含要在图标点击上调用METHOD的文件）和background.html（使用此html中包含的js文件）之间的消息传递。用于传递消息的脚本是:(来自background.html）

chrome.browserAction.onClicked.addListener(function (tab) {
    chrome.tabs.sendMessage(tab.id, "showPopup");
});

并收听消息:(在app.js中）

chrome.extension.onMessage.addListener(function(request) {
   if (request === "showPopup") {
      showPopup();
   }
});

点击事件按预期工作。但是现在我们想在mozilla扩展中做同样的事情。并且我们无法在点击图标时将消息传递给app.js，以便它可以执行包含方法。

我们还使用pageMod添加了app.js，类似这样的

exports.main = function(options, callbacks) {
  pageMod.PageMod({
    include: ["*"],
    contentScriptWhen: 'start',
    contentScriptFile: [data.url('jquery-1.7.1.min.js'),data.url('app.js')]      
  });
  createAndAddNavBarButton();   
};

function createAndAddNavBarButton() {
   var navBar = document.getElementById('nav-bar');//assume document has been defined
   if (!navBar){return;};       
   var nbBtn = document.createElement('navbaricon');    
       nbBtn.setAttribute('id', 'navButton');
       nbBtn.setAttribute('image', data.url('icon_16.png'));        
       nbBtn.onclick = function(){
           showPopup();                    
           return true;
       }    
   navBar.appendChild(btn);
}

但是click事件什么都不做，showPopup（）是未定义的。当一个新页面在app.js中加载与之关联的事件时，执行时没有任何错误，但是click事件不起作用。

是否存在可以将click事件直接分配给此图标的方法，就像我们在chrome扩展的情况下所做的那样。

Answer 1

许多插件使用Erik Vold的第三方模块：

https://github.com/erikvold/toolbarbutton-jplib/

将来我们计划在Firefox中添加类似的小部件，供任何附加开发人员使用。

Answer 2

能够通过消息传递向app.js脚本发送消息。我们所要做的就是在消息传递范围内添加app.js文件，以便它可以与javascript通信。

nbBtn.addEventListener('click', function() {
   var workers = tabs.activeTab.attach({                    
       contentScriptFile: [ data.url("jquery-1.7.1.min.js"), data.url("app.js")]
   });
   workers.postMessage("doABC");
}, false) 

 navBar.appendChild(nbBtn);

现在在app.js中我们可以收到此消息并显示弹出窗口

将click事件分配给导航栏上的addon图标

2 个答案: