모든 요소에 클릭 이벤트 리스너 추가 - Firefox 부가 기능

Question

페이지의 모든 html 요소에 클릭 핸들러를 지정하고 싶습니다. 하지만 사용자가 pageload가 아니라 내 addon 버튼을 클릭하면됩니다.

아래가 출발점입니다. 나는 글로벌 클릭 핸들러를 할당 할 수 없었다. 어떤 아이디어 ?? 감사. 내가 jQuery를 사용할 때

var buttons = require('sdk/ui/button/action'); 

var button = buttons.ActionButton({ 
    id: "fieldResolver", 
    label: "Field Resolver", 
    icon: { 
    "16": "./icon-16.png", 
    "32": "./icon-32.png", 
    "64": "./icon-64.png" 
    }, 
    onClick: handleClick 
}); 

function handleClick() { 

} 

나는이 오류가 발생, 그래서 JQuery와는 옵션이 아니다 : 메시지 : ReferenceError가 : $는

Answer 1

먼저, 부가 기능이 페이지의 코드와는 다른, 더 특권 문맥에 살고의 코드 - 가까운 미래에, 그들은 또한 두 개의 서로 다른 과정이 될 것입니다 - 너는 ac가 없어. 페이지에 직접 저장 : content script을 사용해야합니다. 나는 그들이 서로 의사 소통 할 수있는 방법을 제공 할 것이기 때문에 링크 된 페이지를주의 깊게 읽으라고 제안합니다.

저의 생각은 다음과 같습니다. 사용자가 버튼을 클릭하면 현재 페이지에 컨텐츠 스크립트를 첨부하십시오 (아직없는 경우). 콘텐츠 스크립트에서 click 이벤트를 수신하고 처리합니다. 당신이 볼 수 있듯이 당신의 main.js

const { ActionButton } = require("sdk/ui/button/action"); 
const { data } = require("sdk/self") 
const tabs = require('sdk/tabs'); 

let button = ActionButton({ 
    id: "fieldResolver", 
    label: "Field Resolver", 
    icon: { 
    "16": "./icon-16.png", 
    "32": "./icon-32.png", 
    "64": "./icon-64.png" 
    }, 
    onClick: handleClick 
}); 

function handleClick() { 
    // get the current tab 
    let tab = tabs.activeTab; 

    // you would probably want to store worker somewhere to be sure 
    // that you won't attach more than once 
    let worker = tab.attach({ 
    contentScriptFile: data.url("content.js") 
    }); 
} 

에 대한 다음의 예

, 당신은 당신의 애드온의 데이터 폴더에 있어야하는 것을하는 contentScriptFile이 필요합니다. 처럼 content.js 의지를 보인다 : 당신은 worker.destroy() 언제든지 호출 작업자를 제거 할 수 있습니다

function clickHandler (event) { 
    // do something with the element clicked 
    console.log(event.target.outerHTML); 
} 

window.addEventListener("click", clickHandler); 

// We want to clean the page if the worker is destroyed 
self.port.on("detach", function() { 
    window.removeEventListener("click", clickHandler); 
}) 

. 그리고 말했듯이, worker을지도와 같이 어딘가에 저장하면 해당 탭/URL에 대한 작업자가없는 경우에만 스크립트를 첨부 할 수 있습니다.

Answer 2

다음 창에 클릭 리스너를 추가하거나 문서 객체를 사용할 수없는 정의되지 않은 event.target 확인 : 모든

function handleClick() { 
    //try using jquery here. if $ doesnt work try window.$ 
    window.addEventListener('click', intercept, false); 
} 

function intercept(e) { 
    //try using jquery here. if $ doesnt work try window.$ or try e.target.ownerDocument.defaultView.$ 
    var elementClicked = e.target; 
    console.log('elementClicked = ', elementClicked); 
    elementClicked.style.border = '1px solid red'; 
}