修改页面的 Firefox 插件 DOM

Question

我正在开发一个 Firefox 侧边栏插件，使用 Jetpack，能够与浏览器内容交互，特别是我的目标是能够从插件到 select 网页 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。

Answer 2

现在很旧的功能，Browser Extensions 可能会更好 (4 FF >=57)... Tampermonkey 看起来是一个不错的完整解决方案 - 非常容易创建、发布或调试此类脚本。

修改页面的 Firefox 插件 DOM

Firefox plugin that modify page DOM

javascript

service

jquery

dom

firefox-addon