콘텐츠 스크립트에서 자바 스크립트 페이지로 메시지 보내기

Question

자바 스크립트 런타임에 내 확장 프로그램의 콘텐츠 스크립트에서 실행하려는 탭에 대한 메소드가 있습니다. 액면가에서는 컨텍스트간에 메시지 전달이 필요하지만 CS-to-CS 메시지에 대한 문서는 찾을 수 없으며 탭에서 CS 또는 CS에서 배경으로 만 볼 수 있습니다. 본질적으로 콘텐츠 스크립트 참조의 Communication with the embedding page 섹션을 전환하고 싶습니다. ,

listenerScript = document.createElement('script'); 
listenerScript.textContent = "window.addEventListener('message',function(ev){console.log('New event: ' + ev);},false);console.log('installed');"; 
(document.head||document.documentElement).appendChild(listenerScript); 
listenerScript.remove(); 

는이 리스너가 등록되어

지금까지, 나는 작은 자바 스크립트 페이로드를 주입하여 탭의 window에 이벤트 리스너를 부착하고 (이 메시지의 올바른 유형의 탭 방법을 트리거합니다) 그러나 나는 어떻게 내 콘텐츠 스크립트에서 그것을 실행하는 알아낼 수 없습니다. 콘텐츠 스크립트의 window.postMessage()은 아무 것도하지 않는 것 같으며, 설명서에서는 chrome.runtime을 사용하여 백그라운드 스크립트 용 포트를 만드는 방법에 대해서만 설명합니다.

가능한 가장 간단한 방법으로 콘텐츠 스크립트에서 탭으로 메시지를 전달하는 방법은 무엇입니까?

Answer 1

코드는 콘솔에 installed를 참조 고려, 정확한, 그래서, 유일한 설명은 다음과 같습니다

1. 페이지가 리디렉션 된 전체 DOM 및 그 청취자는 파괴되었다. 리스너가보기 전에

2. 페이지 window.addEventListener를 위장하거나 자신의 'message' 리스너를 부착하고 이벤트를 취소했다 당신이 before the page starts loading를 실행하는 콘텐츠 스크립트를 선언해야하고이 경우

   (event.stopPropagation() 등을 사용하여 예) DOM 체인을 버블 링하기 전에 이벤트를 캡처하는 리스너를 사용하십시오 (useCapture, addEventListener의 세 번째 매개 변수는 true이어야 함).

   의 manifest.json :

   "content_scripts": [{ 
       "matches": ["<all_urls>"], 
       "js": ["content.js"], 
       "run_at": "document_start" 
   }], 
   

   content.js : document_start 종종 더 head가 없기 때문에

   // this code runs before page starts loading 
   var injected = document.documentElement.appendChild(document.createElement('script')); 
   injected.text = '(' + function() { 
       window.addEventListener('message', function(ev) { 
        console.log('New event:', ev); 
       }, true); // useCapture: true 
       console.log('installed'); 
   } + ')()'; 
   injected.remove(); 
   
   document.addEventListener('DOMContentLoaded', function() { 
       // this code will run when the DOM is ready 
       window.postMessage({ foo: 'bar', text: "Hello from content script!" }, "*"); 
   }); 
   

   주 우리는 documentElement에 스크립트를 추가합니다. 도 참조하십시오 : other methods of injecting a DOM script.