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

【问题标题】：firefox addon using sdk pagemod seems not have access to all dom使用 sdk pagemod 的 firefox 插件似乎无法访问所有 dom
【发布时间】：2014-02-14 11:30:56
【问题描述】：

我正在使用插件 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 运行启动，然后我在 google 中输入一些内容是结果：

正如您所见，并非所有内容都是黄色的，而且我可以使用检查器轻松更改这些元素的背景。我不知道如何仅使用我的插件来做到这一点。

【问题讨论】：

标签： firefox-addon firefox-addon-sdk

【解决方案1】：

修改，你正在做的方式，每个 DOM 元素都不是最好的方式。如果文档像谷歌搜索结果页面那样动态变化，会促使您尝试处理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: }

【讨论】：

【解决方案2】：

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

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

【讨论】：