2012-09-12 2 views
14

window 안에 새 개체를 제공하는 Chrome 확장 프로그램을 만들고 싶습니다. 확장 프로그램이로드 된 브라우저에서 웹 페이지를 볼 때 window.mything을 Javascript를 통해 사용할 수있게하고 싶습니다. window.mything 객체에는 확장에서 정의 할 일부 기능이 있으며 확장 기능이 활성화 된 브라우저에서 페이지를 볼 때 이러한 함수는 console.log 또는 임의의 자바 스크립트 파일에서 호출 가능해야합니다. Chrome 확장 프로그램에서 창 객체를 수정할 수 있습니까?

내가 성공적으로 Content Script 사용하여 자바 스크립트가 페이지에 파일을 삽입 할 수 있었다 :

var s = document.createElement("script"); 
s.src = chrome.extension.getURL("mything.js"); 
document.getElementsByTagName("head")[0].appendChild(s); 

mything.js은 다음과 같습니다

window.mything = {thing: true}; 
console.log(window); 

때마다 페이지가로드, 난을 참조하십시오 전체 window 개체로 콘솔에 있어야합니다. 그러나 콘솔에서 window.mything 개체와 상호 작용할 수 없습니다. 주입 된 스크립트가 전역 window 개체를 실제로 수정하지 않은 것 같습니다.

크롬 확장 프로그램에서 전체 window 개체를 수정하려면 어떻게해야하나요?

+0

그건 불가능합니다. 올바른 콘솔을보고 있습니까, 스크립트가 실제로 실행됩니까 (문서 검사 및 스크립트 태그 찾기/구문 오류 검사)? 스크립트는 확실히 페이지의 컨텍스트에서 실행되므로 'mything'이 존재해야합니다. –

답변

27

직접 수 없습니다. content scripts documentation :

그러나 콘텐츠 스크립트에는 몇 가지 제한 사항이 있습니다. 그들은 할 수 없습니다 :

  • 사용 크롬 * API를 자신의 확장의 페이지에 의해 정의
  • 사용 변수 나 함수 (chrome.extension의 일부 제외)
  • 사용 변수 나 함수는 웹 페이지 나 기타에 의해 정의. 콘텐츠 스크립트는

(강조는 추가)

window 콘텐츠 스크립트에서 보는 것과 일치하는 페이지가 표시되는 window 개체가 아닙니다.

그러나 window.postMessage 메서드를 사용하여 DOM을 통해 메시지를 전달할 수 있습니다. 귀하의 페이지 및 콘텐츠 스크립트는 모두 메시지 이벤트를 수신하며, 해당 장소 중 하나에서 window.postMessage으로 전화 할 때마다 다른 사람이받습니다. '콘텐츠 스크립트'문서 페이지에는 example of this이 있습니다.

편집 : 콘텐츠 스크립트의 스크립트를 삽입하여 페이지에 몇 가지 방법을 추가 할 수 있습니다. 아직 postMessage 같은 것을 사용하지 않고, 비록 확장의 나머지 부분과 다시 통신 할 수 없을 것입니다,하지만 당신은 최소한에 몇 가지를 추가 할 수 있습니다 내가 놀아 봤는데 페이지의 window

var elt = document.createElement("script"); 
elt.innerHTML = "window.foo = {bar:function(){/*whatever*/}};" 
document.head.appendChild(elt); 
+0

고마워, 나는 당신의 제안을 그대로 사용하지는 않았지만, 그 개념은 진짜 문제에 대해 제게 도움이되었습니다. –

+0

U는 또한 eval ("window.foo = {bar : function() {/ * 무엇이든 * /}};"); – User

+0

@ 사용자 수는 없습니다. 방금 시도했습니다. – cprcrack

4

이. 나는 자바 스크립트를 window.location = call에 랩핑하여 브라우저의 윈도우 객체와 상호 작용할 수 있음을 발견했다.

var myInjectedJs = "window.foo='This exists in the \'real\' window object';" 
window.location = "javascript:" + myInjectedJs; 

var myInjectedJs2 = "window.bar='So does this.';" 
window.location = "javascript:" + myInjectedJs2; 

window.location의 마지막 인스턴스 만 설정됩니다. 문서의 창 개체에 액세스하는 경우,이 변수 "바"가 아니라 "foo는"

0

내용 스크립트 호출 후 window 개체 변이하는 데 사용할 수있는 window 방법이있을 것이다. 이것은 <script> 태그 주입보다 쉽고 <head><body>이 아직 구문 분석되지 않은 경우 (예 : run_at: document_start 사용)에도 작동합니다.

// In Content Script 
window.addEventListener('load', loadEvent => { 
    let window = loadEvent.currentTarget; 
    window.document.title='You changed me!'; 
}); 
0

크롬 확장의 content_script은 창과 별도의 컨텍스트 내에서 실행됩니다. 그래도 페이지의 창과 동일한 컨텍스트에서 실행되도록 다음과 같이 스크립트를 페이지에 삽입 할 수 있습니다. Chrome extension - retrieving global variable from webpage

윈도우 개체의 메서드를 호출하고 기본적으로 script.js을 추가하여 창 속성을 수정할 수있었습니다. 페이지의 DOM :

var s = document.createElement('script'); 
s.src = chrome.extension.getURL('script.js'); 
(document.head||document.documentElement).appendChild(s); 
s.onload = function() { 
    s.remove(); 
}; 

하고 주입 스크립트 파일에 사용자 정의 이벤트 리스너를 만드는 :

document.addEventListener('_my_custom_event', function(e) { 
    // do whatever you'd like! Like access the window obj 
    window.myData = e.detail.my_event_data; 
}) 

과 content_script에서 해당 이벤트를 파견 :

var foo = 'bar' 
document.dispatchEvent(new CustomEvent('_save_OG_Editor', { 
    'detail': { 
    'my_event_data': foo 
    } 
})) 

또는 그 반대로; script.js에 이벤트를 전달하고 확장 프로그램의 content_script에서 해당 이벤트를 수신합니다 (위 링크는 잘 설명 됨).

삽입 된 스크립트를 내선 번호 파일에 추가하고 스크립트 파일의 경로를 manifest within "web_accessible_resources"에 추가하면 오류가 발생합니다.

누군가를 도우려는 희망 \

관련 문제