如何使用addon sdk处理firefox扩展中已修改页面内容的鼠标点击

Question

我编写了一段代码来修改特定网页的内容（http://www.example.com）并显示包含一些文字和图片的框。如下所示：

main.js

"use strict";

var self = require("sdk/self");
var pageMod = require("sdk/page-mod");

var allimageurls=[]
allimageurls.push({
                    logo:self.data.url("logo.png"),
                    panel:self.data.url("panel.png"),
                    panel_css_url:self.data.url("__some_css.css")
                });

pageMod.PageMod({
    include: "http://www.example.com/",
    contentScriptFile: [self.data.url("jquery-1.11.1.min.js"),
                        self.data.url("panel.js")],
    attachTo: 'top',
    contentScriptWhen:'end',
    onAttach: function(worker) {
                                worker.port.emit("urls",allimageurls);
                               }

});

和 panel.js

var img1;
var img2;

self.port.on("urls",function(allimageurls){
    img1=allimageurls[0].logo;
    img2=allimageurls[0].panel;
    css_url=allimageurls[0].panel_css_url;

    $("head").append("<link rel='stylesheet' href='"+css_url+"' type='text/css'>");
    $("body").append('<div id = "__some_id" class="__some_css_class"><p class="__css_stuff">...</p>     <div id="__important_id" class="__css_again"> <img src="' + img2 + '" /></div></div>');
});

$(document).ready(function(){
$("#__important_id").click(function(){
        alert("function called!");
});
});

我已经设法显示我要显示的内容，但点击功能无法正常工作（当有人点击img2时它应该提醒）

我做错了什么？提前致谢。

Answer 1

由于您在页面加载完成后告诉要附加脚本（contentScriptWhen:'end'），因此jquery文档就绪事件永远不会触发。 Panel.js应如下所示：

和 panel.js

var img1;
var img2;

self.port.on("urls",function(allimageurls){
    img1=allimageurls[0].logo;
    img2=allimageurls[0].panel;
    css_url=allimageurls[0].panel_css_url;

    $("head").append("<link rel='stylesheet' href='"+css_url+"' type='text/css'>");
    $("body").append('<div id = "__some_id" class="__some_css_class"><p class="__css_stuff">...</p>     <div id="__important_id" class="__css_again"> <img src="' + img2 + '" /></div></div>');
});

$("#__important_id").click(function(){
    alert("function called!");
});

---

另外，您可以使用pageMod属性在contentStyleFile构造函数中应用css文件，并且可以使用contentScriptOptions将对象传递给内容脚本。然后，可以在内容脚本中将该对象作为self.options访问。您的新代码看起来像这样。 的 main.js

"use strict";

var self = require("sdk/self");
var pageMod = require("sdk/page-mod");
var allimageurls=[];

pageMod.PageMod({
  include: "http://www.example.com/",
  contentScriptFile: [self.data.url("jquery-1.11.1.min.js"),
            self.data.url("panel.js")],
  attachTo: 'top',
  contentScriptWhen:'end',
  contentScriptOptions: {
    logo:self.data.url("logo.png"),
    panel:self.data.url("panel.png"),
  },
  contentStyleFile: self.data.url("__some_css.css"),
  onAttach: function(worker) {
    worker.port.emit("urls",allimageurls);
  }             
});

和 panel.js

var img1 = self.options.logo;
var img2 = self.options.panel;

$("body").append('<div id = "__some_id" class="__some_css_class"><p class="__css_stuff">...</p>     <div id="__important_id" class="__css_again"> <img src="' + img2 + '" /></div></div>');

$("#__important_id").click(function(){
    alert("function called!");
});

self.port.on("urls",function(allimageurls) {
  // Do something with the image URLs
});