크롬 확장 프로그램 : IFrame 및 그 내부에서 클릭 듣기

웹 사이트 본문에 iframe (내 확장 프로그램의 일부인 frame.html)을 삽입하고 내부에있는 두 개의 버튼에 대한 클릭 이벤트를 수신하고 싶습니다. . 동일 출처 정책 문제로 실행크롬 확장 프로그램 : IFrame 및 그 내부에서 클릭 듣기

등

나는이 비교적 우아한 해결 방법이 있는지,하지만 난 그것을 찾는 많은 행운을 가지고 있지 않다.

출처

2011-12-14 NoPyGod

있습니까? 절대적으로 필요한 것이 아니라면 html을 웹 사이트에 직접 삽입하는 등의 두통을 피할 수 있습니다. – lakenen

웹 사이트에는 내가 삽입하려고하는 내용의 섬세한 레이아웃을 망치는 커스텀 CSS가 많이 있습니다. 그리고 지금 내가 괜찮아 보이더라도, 웹 사이트의 CSS가 바뀌지 않을 거라는 보장은 없습니다. 고양이와 마우스를 놀고 싶어하지 마라. – NoPyGod

솔직히, 나는 이것이 불가능하다는 것을 약간 확신한다. 기본적으로 모든 요소에서 가능한 모든 스타일을 제거하는 CSS "catch-all"을 사용하는 것이 좋습니다. 해커 (그리고 지루한), 나도 알아,하지만이 경우에는 귀하의 유일한 옵션이 될 수도 있습니다. – lakenen

삽입 된 iframe 창과 콘텐츠 스크립트 (예 : security) 사이의 통신을 위해 message events을 사용할 수 있습니다.

다음은 간단한 예입니다. 확장 프로그램은 콘텐츠 스크립트를 통해 IFRAME 요소를 모든보기 페이지에 삽입합니다. 프레임에는 버튼이있는 페이지가 있습니다. 버튼에는 상단 창으로 메시지를 보내는 클릭 핸들러가 있습니다. 내용 스크립트에는 iframe에서 오는 메시지에 대한 리스너가있어 메시지 데이터를 표시하는 경고를 엽니 다.

의 manifest.json :

{ 
    "name": "Test", 
    "version": "0.0.1", 
    "content_scripts": [ { 
    "matches": [ "http://*/*", "https://*/*" ], 
    "js": [ "content.js" ], 
    "run_at" : "document_end" 
    } ] 
}

content.js :

var iframe = document.createElement("iframe");  
iframe.src = chrome.extension.getURL("iframe.html"); 
document.body.appendChild(iframe); 

addEventListener("message", function(event) { 
    if (event.origin + "/" == chrome.extension.getURL("")) 
    alert(event.data); 
}, false);

iframe.html : 당신은 당신은 iframe을 사용할 필요가 있는지

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test</title> 
</head> 
<body> 
    <button id="button">Click me!</button> 
    <script> 
    document.getElementById("button").addEventListener("click", function() { 
     top.postMessage("clicked!", "*"); 
    }, false); 
    </script> 
</body> 
</html>

출처

2011-12-15 20:22:27

멋지네요, 곧 시도 할 것입니다. – NoPyGod

크롬 확장 프로그램 : IFrame 및 그 내부에서 클릭 듣기

답변

관련 문제