확장 페이지 DOM 대신 웹 페이지 DOM에 액세스하는 방법은 무엇입니까?
Chrome 확장 프로그램을 작성 <div>
하고 popup.html 파일에서 버튼을 클릭하자마자 현재 웹 페이지 위에 오버레이를 시도하고 있습니다.
document.body.insertBefore
popup.html 내 에서 메소드에 액세스 <div>
하면 현재 웹 페이지가 아닌 팝업에 오버레이 됩니다.
웹 페이지의 DOM에 액세스하려면 background.html과 popup.html 사이에 메시징을 사용해야합니까? 나는 모든 것을 popup.html에서하고, 가능하다면 jQuery도 사용하고 싶다.
Chrome 확장 프로그램 개요 : 아키텍처 (필독 필수)에 명시된대로 :
확장 프로그램이 웹 페이지와 상호 작용해야하는 경우 콘텐츠 스크립트가 필요합니다. 콘텐츠 스크립트는 브라우저에로드 된 페이지의 컨텍스트에서 실행되는 일부 JavaScript입니다. 콘텐츠 스크립트를 패키지 된 확장 (상위 확장)의 일부가 아니라로드 된 페이지의 일부로 생각하십시오.
browserAction 팝업은 브라우저 도구 모음에서 아이콘을 클릭 할 때 표시되는 페이지이며 chrome-extension://
URL 이있는 HTML 페이지 이므로 해당 DOM에 액세스하면 팝업에 영향을줍니다. 확장 프로그램의 배경 / 옵션 페이지에도 동일하게 적용됩니다.
웹 페이지 DOM에 액세스 / 조작하려면 두 가지 방법이 있습니다.
manifest.json 에서 콘텐츠 스크립트를 선언 하고 메시징을 사용 하세요.
chrome.tabs.sendMessage()
배경 / 팝업 페이지에서 삽입 된 콘텐츠 스크립트의chrome.runtime.onMessage
리스너로, 웹 페이지에서 작업을 수행sendResponse
하고 문서에 따라 콜백을 통해 결과를 전송합니다 (참고 : 숫자, 문자열, 배열, 단순 개체와 같은 JSON 지원 개체 만 지원됩니다. DOM 요소가 아니라 클래스가 아니라 함수가 아닙니다). 콘텐츠 스크립트가 확장 페이지에 대한 통신을 시작해야하는 경우을 사용해야합니다chrome.runtime.sendMessage()
.또는 Tabs API 를 사용하여 콘텐츠 스크립트를 삽입합니다 .
chrome.tabs.executeScript(tabId, details, callback)
필요한 권한 :
"tabs"
,"https://www.example.com/*"
(또는"<all_urls>"
및 변종 좋아"*://*/*"
,"http://*/*"
,"https://*/*"
)더 나은 선택은 사용자의 명시 적 활성화의 경우, 사용하는
"activeTab"
권한을 대신"tabs"
하고"<all_urls>"
그것이 많은 용도의 대체 역할을하기 때문에"<all_urls>"
,하지만, 설치시 표시 경고 메시지를 ..executeScript()
삽입 된 콘텐츠 스크립트에서 마지막으로 평가 된 표현식의 배열을 수신하는 콜백 함수와 함께 사용할 수 있습니다. 탭 내에서 삽입되는 각 프레임마다 요소가 하나씩 있습니다. Chrome은 내부적으로JSON.parse()
및JSON.stringify()
결과를 사용 하므로 지원되는 유형을 일반 개체 및 숫자 / 문자열 또는 그 배열과 같은 간단한 문자열 화 가능한 값으로 제한합니다.
따라서 DOM 요소, 함수, 사용자 정의 속성, getter / setter에 대해 작동하지 않습니다. 필요한 데이터를 수동으로 매핑 / 추출하고 간단한 배열 / 객체로 전달해야합니다.
콘텐츠 스크립트는 고립 된 세계라는 특수 환경에서 실행됩니다. 삽입 된 페이지의 DOM에는 액세스 할 수 있지만 페이지에서 만든 JavaScript 변수 나 함수에는 액세스 할 수 없습니다. 실행중인 페이지에서 실행중인 다른 JavaScript가없는 것처럼 각 콘텐츠 스크립트를 찾습니다. 그 반대의 경우도 마찬가지입니다. 페이지에서 실행되는 자바 스크립트는 어떤 함수도 호출하거나 콘텐츠 스크립트에 정의 된 변수에 액세스 할 수 없습니다.
한 단계 더 깊이 들어가서 웹 페이지 자바 스크립트 변수 / 함수에 액세스하는 것은 여전히 가능 합니다 .
두 번째 방법의 예로 브라우저 작업을 클릭 할 때 해당 div를 보여 드리겠습니다.
우리는 사용합니다 chrome.tabs.executeScript()
에 browserAction
해당 페이지의 DOM에 (방법의 설명서를 참조하십시오, 그것은 작은 있는지 또는 문자 코드의 문자열) 콘텐츠 스크립트 파일을 삽입하는 클릭 핸들러.
var someVar = {text: 'test', foo: 1, bar: false};
chrome.tabs.executeScript({
code: '(' + function(params) {
document.body.insertAdjacentHTML('beforeend',
'<div style="all:unset; position:fixed; left:0; top:0; right:0; bottom:0;' +
'background-color:rgba(0,255,0,0.3)">' + params.text + '</div>'
);
return {success: true, html: document.body.innerHTML};
} + ')(' + JSON.stringify(someVar) + ');'
}, function(results) {
console.log(results[0]);
});
보시다시피 함수 코드의 자동 문자열 변환을 사용하여 삽입 된 코드를 구문 강조 및 린팅이있는 일반 JavaScript로 작성할 수 있습니다. 명백한 단점은 브라우저가 코드를 구문 분석하는 데 시간을 낭비하지만 일반적으로 1 밀리 초 미만이므로 무시할 수 있다는 것입니다.
'Programing' 카테고리의 다른 글
jQuery의 document.ready ()에서 함수를 정의 할 수없는 이유는 무엇입니까? (0) | 2020.11.28 |
---|---|
생성자에서 super () 전에 계산을 수행 할 수 있습니까? (0) | 2020.11.28 |
ContentProviderClient 대 ContentResolver를 사용하여 콘텐츠 제공자에 액세스 (0) | 2020.11.28 |
Spring MVC의 UTF-8 인코딩, FORM 문제 (0) | 2020.11.28 |
.NET 4.0에서 매우 높은 메모리 사용량 (0) | 2020.11.28 |