동적으로 삽입 된 iframe의 확장 프로그램에서 가져온 Iframe의 DOM에 액세스하고 iframe을 업데이트하십시오. DOM

Question

각 페이지 상단에 맞춤 도구 모음을 추가하는 확장 프로그램을 개발 중입니다. 이렇게하려면 확장에서 toolbar.html을 주입하고 있습니다. 초보자부터 현재 탭의 DOM 요소에 어떻게 액세스 할 수 있는지, 새로 추가 된 iframe을 현재 탭의 DOM 데이터로 업데이트하는 방법을 잘 모르겠습니다. 나는 별도의 콘텐츠 스크립트를 사용하는 경우

이

1. (답변 :

   { 
       "manifest_version": 2, 
   
       "name": "My Extension", 
       "description": "Extension to show custom toolbar", 
       "version": "1.0", 
   
       "browser_action": { 
       "default_icon": "icon.png", 
       "default_popup": "popup.html" 
       }, 
       "background":{ 
        "scripts":["background.js"] 
       }, 
       "content_scripts":[{ 
        "matches":["https://bitbucket.mycompany.com/*"], 
        "css":["styles.css"], 
        "js":["jquery.js","myscript.js"], 
        "all_frames":true 
       }], 
       "web_accessible_resources":[ 
        "toolbar.html", 
        "styles.css" 
       ] 
   } 
   

   내용 스크립트가

   var url=chrome.extension.getURL('toolbar.html'); 
   var height='35px'; 
   var iframe="<iframe src='"+url+"' id='myCustomBar' style='height:"+height+"'></iframe>" 
   
   $('html').append(iframe); 
   
   $('body').css({ 
       'transform':'translateY('+height+')' 
   }); 
   

   내 질문은 myscript.js입니다 : 여기

   매니페스트입니다 여기에 : access iframe content from a chrome's extension content script) 프레임, 어떤 URL이 일치해야합니까?
2. 동적으로 삽입 된 iframe에서 현재 탭의 DOM에 액세스하는 다른 방법이 있습니까?
3. URL 패턴이 https://bitbucket.*.com 인 모든 URL에서이 확장 프로그램을 실행해야한다고 가정하면 일치 항목은 무엇입니까? iframe을위한 SRC는 기본적으로 컨텐츠 스크립트를 삽입 할 수 없습니다 chrome-extensions://로 시작되기 때문에

Answer 1

1. 당신은 그 iframe을위한 별도의 콘텐츠 스크립트를 사용할 수 없습니다.

2. 당신은 toolbar.js 부모의 콘텐츠 스크립트 사이의 메시지 전달을 할 Window.postMessage를 사용 후, toolbar.html에 대한 스크립트 태그를 포함 할 수있다.

3. Match patterns에 따르면 '*'이 호스트에 있으면 첫 번째 문자 여야합니다. 따라서 https://*.com과 같은 것을 사용하고 코드의 다른 부분을 확인하십시오.