使用sdk的firefox插件pagemod似乎無法訪問所有dom

我在Firefox中使用插件sdk編寫了一些插件，我注意到我的插件在等一些頁面中無法正常工作谷歌。使用sdk的firefox插件pagemod似乎無法訪問所有dom

這裏是一個示例代碼。

的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運行啓動，然後我輸入谷歌的東西在這裏是結果：

enter image description here

正如你所看到的不是一切都是黃色的，再加上我可以改變那些元素背景容易使用檢查員。我看不到我只用我的插件就能做到這一點。

來源

2014-02-13 elaich

修改，你在做的方式，每個DOM元素不是最好的方法。如果文檔動態變化，就像谷歌對其搜索結果頁面所做的動作一樣，會促使您嘗試處理DOM mutation events and observers，以便將希望的CSS樣式添加到新近創建的元素中。太複雜。得到你想要的結果

一種方法是修改數據/ detecter.js文件只是注入的CSS文件，你需要的規則，是這樣的：

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

這樣，你不需要與觀察者打交道或做更棘手的事情。

另一種方法是使用contentStyle PageMod的屬性，它在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") 
});

，然後創建數據/我-styles.css的文件，其中包含：

* { backgound-color: yellow: }

來源

2014-02-14 03:30:56 matagus

從內容腳本訪問DOM有一定的限制，特別是如果它正在訪問的頁面從JS修改DOM。這就是爲什麼我們目前仍然通過unsafeWindow變量提供對內容腳本的直接訪問。如果你嘗試這個，它是否工作？

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

來源

2014-02-13 21:58:09 canuckistani

使用sdk的firefox插件pagemod似乎無法訪問所有dom

回答

相關問題