firefox插件使用sdk pagemod似乎无法访问所有dom

Question

我在使用附加sdk在firefox中编写了一些插件，我注意到我的附加组件在 google 等某些页面中无法正常工作。

以下是示例代码。

LIB / main.js

var pageMod = require('sdk/page-mod');
var data = require('sdk/self').data;

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

数据/ detecter.js

$('*').css('background-color', 'yellow');

cfx运行启动，然后我在谷歌输入一些东西就是结果：

你可以看到并非一切都是黄色的，而且我可以使用检查器轻松更改这些元素背景。我只能用我的附加组件看不出如何做到这一点。

Answer 1

从内容脚本访问DOM有些限制，特别是如果它正在访问的页面从JS修改DOM。这就是我们目前仍然通过unsafeWindow变量在内容脚本中提供直接访问的原因。如果你试试这个，它有用吗？

unsafeWindow.jQuery('*').css('background-color', 'yellow'); 

Answer 2

修改，你的方式，每个DOM元素不是最好的方法。如果文档像Google一样动态更改其搜索结果页面会促使您尝试处理DOM mutation events and observers，以便将所需的CSS样式添加到新创建的新元素中。太复杂了。

获得所需结果的一种方法是修改 data / detecter.js 文件，只需注入一个包含所需规则的CSS文件，例如：

var customStyles = document.createElement('style'); 
customStyles.appendChild(document.createTextNode(
   '* { background-color: yellow'}'
));
document.documentElement.insertBefore(customStyles);

这样，你不需要处理观察者或做一些棘手的事情。

另一种方法是使用PageMod的 contentStyle 属性，它在MDN的Modifying Web Pages Based on URL教程中描述的方式。这是一个实验性功能，但它似乎是最简单的方法，因为你只需要编写css规则，既不需要jquery也不需要自定义javascript。看看：

var pageMod = require("sdk/page-mod").PageMod({
    include: "*.com",
    contentScriptWhen: 'ready',
    contentStyle: "* { background-color: yellow; }"
});

或简单地说：

var pageMod = require("sdk/page-mod").PageMod({
    include: "*",
    contentStyleFile: require("sdk/self").data.url("my-styles.css")
});

然后创建 data / my-styles.css 文件，其中包含：

* { backgound-color: yellow: }