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看起来是一个不错的完整解决方案-非常易于创建，发布或调试此类脚本。

用于修改页面DOM的Firefox插件

2 个答案: