用于修改页面DOM的Firefox插件

Question

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

我的主要观点是，我想从一个不直接在插件本身内的脚本访问网页：

插件可以加载外部服务（来自我的服务器），并可以访问Web浏览器页面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。

Answer 2

现在很古老的功能，Browser Extensions可能会更好（4 FF> = 57）... Tampermonkey看起来像一个很好的完整解决方案 - 很容易创建，发布或调试这样的脚本。