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

我在使用插件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')]        
});

data/detecter.js

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

cfx run to launch，然后我在google中键入一些内容，结果如下：

---

正如你所看到的，并不是所有的东西都是黄色的，而且我可以使用inspector轻松地更改这些元素的背景。我看不出如何仅使用我的加载项就可以做到这一点。

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

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

---

修改，你正在做的，每个DOM元素不是最好的方式。如果文档像谷歌搜索结果页面那样动态变化，就会促使您尝试处理，以便将希望的CSS样式添加到新创建的元素中。太复杂了

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

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

这样，你就不需要与观察者打交道或做更棘手的事情

另一种方法是使用PageMod的contentStyle属性，如MDN教程中所述。这是一个实验性的特性，但似乎是最简单的方法，因为您只需要编写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: }