2014-12-22 5 views
4

Firefox 34 및 addon SDK 1.17을 사용하십시오.Firefox 부가 기능 콘텐츠 스크립트에서 DOM 요소에 액세스 할 수 없습니다.

SDK의 page-mod를 사용하여 콘텐츠 스크립트를 첨부하고 있습니다. 콘텐츠 스크립트 내에서 DOM 요소에 액세스하려고 할 때 매우 이상한 동작이 나타납니다.

main.js

pageMod.PageMod({ 
    include: "somewebsite", 
    contentScriptWhen: 'end', 
    contentScriptFile: [data.url("stuff.js")] 
}); 

stuff.js

log(document.getElementsByTagName("body")); // empty object 
log(document.getElementById("SomeIdThatShouldBeThere")); // empty object 
log(document.getElementsByTagName("li")); // x amount of empty objects... 

이 그러나 예상대로 작동합니다 : 나는

을 할 수 얻을 빈 객체 또한

document.body.style.border = "5px solid red"; 

obj.style.border = ... 

html 요소가 테두리 색 등을 변경하는 것으로 보입니다. 그러나 요소의 속성을 읽을 수 없어서 시각 장애인입니다.

나는 사람들이 콘텐츠 스크립트에서 DOM을 수정하는 데 몇 가지 제한이 있다고 말했지만 분명히 가장 기본적인 것을 할 수는 없다고 읽었습니다. 이게 지원 될 예정인가요?

편집 : 최종적으로 요소가 정확한 위치에 있고 속성을 읽을 수 있지만 요소를 로깅하는 것은 여전히 ​​빈 개체 만 인쇄합니다 ... 요소의 원하는 모든 속성을 인쇄해야 함을 의미합니다. 갈라져. 적어도 작동하지만 더 좋을 수 있습니다.

+0

'document' 대신'unsafeWindow.document'를 사용해 보셨나요? –

+0

차이가 나는 것 같지 않습니다. – hannu40k

+0

당신은 코드에 오타가 있습니다. 'getElementById'가 아니라'getElementsById' ('s'에 주목하십시오) 여야합니다. 하지만 왜 'getElementsByTagName'가 빈 객체를 반환하는지 알 수 없습니다. 이 빈 객체가 콘솔에 표시됩니까? –

답변

0

변경 :

log(document.getElementsByTagName("body")); // empty object 
log(document.getElementById("SomeIdThatShouldBeThere")); // empty object 
log(document.getElementsByTagName("li")); // x amount of empty objects... 

이 될 수 :

console.log(document.getElementsByTagName("body")); // empty object 
console.log(document.getElementById("SomeIdThatShouldBeThere")); // empty object 
console.log(document.getElementsByTagName("li")); // x amount of empty objects... 
+0

var log = console.log; 처음에는 그러나 나는 집에 도착하면 어쨌든 그것을 시도 할 것이고 결코 알지 못할 것입니다. – hannu40k

+0

지연되어 죄송합니다. 그것은 차이를 만들지 않았다. – hannu40k

0

내가 같은 문제에 봉착했습니다. 기본 스크립팅을 훨씬 더 복잡하게 만듭니다.

이 (http://louisremi.com/2011/12/07/mozilla-addons-interactions-between-content-scripts-and-pages/에서)

" 인라인 스크립트 삽입 그렇게하는 올바른 방법이 페이지에서 인라인 스크립트를 삽입 및/또는 customEvents을 사용하는 것입니다

을보십시오. 인라인 스크립트는 세 번째 수준이다 출력 경고로서에게 애드온 SCR을 생성하지 않아야한다 코드의

// Quotes nesting would be a real mess now, 
// let's use a separate file loaded as a contentScriptFile 
var script = document.createElement("script"); 
script.innerHTML = "var test =" + JSON.stringify(anyValue)+";"; 
document.body.appendChild(script); 

유효성 : 전역 변수 또는 함수를 생성하는데 사용될 수있는 스크립트 ipt 태그. 그러나 이것은 여전히 ​​unsafeWindow에 대한 가장 안전한 대안입니다.

customEvents

customEvents은 두 방향으로, 콘텐츠 스크립트와 페이지 사이의 임의의 (jsonable) 데이터를 전송 할 수있는 그들이 프로그램 트리거되는 것을 제외하고, 마우스 이벤트와 매우 유사하며, :

// inline script in example.com/index.html 
var evt = document.createEvent("CustomEvent"); 
evt.initCustomEvent("transData", true, false, jsonableValue); 
window.dispatchEvent(evt); 
// in contentScript.js 
window.addEventListener("transData", function(event) { 
    // the data is available in the detail property of the event 
    self.port.emit("transData", event.detail); 
});" 
0

추가 기능의 콘텐츠 스크립트에서 동일한 문제가 발생했습니다.어떤 새로운 이유 때문에, 새로운 객체에 복사하면 object의 값을 콘솔에 출력 할 수 있습니다. 당신은 해결 방법으로 간단한 함수를 만들 수 있습니다

console.log("default : ", $("table")[0]); 
console.log("loggable : ", getLoggableObject($("table")[0])); 

그리고 그 로그 문장의 출력 :

"default : " Object { } 
"loggable : " Object { createCaption: "function createCaption() { 
    [native code] 
}", deleteCaption: "function deleteCaption() { 
    [native code] 
}", createTHead: "function createTHead() { 
    [native code] 
}", deleteTHead: "function deleteTHead() { 
    [native code] 
}", createTFoot: "function createTFoot() { 
    [native code] 
}", deleteTFoot: "function deleteTFoot() { 
    [native code] 
}", createTBody: "function createTBody() { 
    [native code] 
}", insertRow: "function insertRow() { 
    [native code] 
}", deleteRow: "function deleteRow() { 
    [native code] 
}", caption: null, 210 more… } 
1

당신이 원하는 경우 여기

function getLoggableObject(obj){ 
    var loggable={}; 
    for(var key in obj){ 
     loggable[key]=obj[key]; 
    } 
    return loggable; 
} 

이 함수를 호출의 예 dom에서 콘솔로 객체 출력하기 :

unsafeWindow.console.log(document.getElementById("SomeIdThatShouldBeThere")); 
// Or map it in your contentscript file for less typing 
var log = unsafeWindow.console.log; 
log(document.getElementById("SomeIdThatShouldBeThere")); 

about : config로 이동하고 "extensions.sdk.console.logLevel"값을 "all"값으로 추가하지 않고도 작동하므로 원하는 메시지를 기록 할 수 있습니다.

그러나 sdk cmd 콘솔도 실행 중이면 오류가 출력되지만 걱정할 필요는 없습니다. 모든 코드가 문제없이 실행됩니다.

편집 : 내가 불을 지르고 콘솔이 추가 기능이 작동을 중지시킬 것 열되지 않은 경우, VAR 로그에 매핑하고, 파이어 폭스 콘솔이 오픈 할 때 여전히 작동하지 않았을 때 그냥 알아 냈다. 그러나 문제가있는 unsafeWindow.console.log (foo)를 사용하면 문제가 없습니다.