javascript - 修改页面 DOM 的 Firefox 插件

Question

我正在开发一个 Firefox 侧边栏插件，使用 Jetpack，能够与浏览器内容交互，特别是我的目标是能够从插件中选择网页 DOM 对象并从我的页面中收集信息插件。

我的主要观点是我想从不直接在插件本身内部的脚本访问网页:

该插件可能加载外部服务(从我的服务器)并可能访问网络浏览器页面 DOM。

这是因为我想将 sidebar-firefox 插件与真正的业务逻辑分开，以便在不发布另一个插件的情况下改变它......

这可能吗？而且，如果是，怎么做？

Answer 1

您可以将工作人员附加到任何新选项卡，例如:main.js:

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

pageMod.PageMod({
  include: "*",
  contentScriptWhen: 'ready',
  contentScriptFile: [
    data.url("jquery.min.js"),
    data.url("script.js")
  ]
});

上面的代码只是将 jquery 和你的 script.js 附加到任何页面。您可以找到有关附加脚本的更多选项 here .注意:script.js 和 jquery.min.js 应该在扩展的 ./data/ 文件夹中。

现在，我们在每个页面上都运行了 script.js。我们如何从另一台服务器执行代码？

您可以使用 jQuery.getScript()实现这一目标。

例如在你的script.js中:

var url = "https://code.jquery.com/color/jquery.color.js";
$.getScript( url, function() {
  $( "#go" ).click(function() {
    $( ".block" )
      .animate({
        backgroundColor: "rgb(255, 180, 180)"
      }, 1000 )
      .delay( 500 )
      .animate({
        backgroundColor: "olive"
      }, 1000 )
      .delay( 500 )
      .animate({
        backgroundColor: "#00f"
      }, 1000 );
  });
});

您可以根据自己的需要修改script.js。