Programing

확장 페이지 DOM 대신 웹 페이지 DOM에 액세스하는 방법은 무엇입니까?

lottogame 2020. 11. 28. 08:32
반응형

확장 페이지 DOM 대신 웹 페이지 DOM에 액세스하는 방법은 무엇입니까?


Chrome 확장 프로그램을 작성 <div>하고 popup.html 파일에서 버튼을 클릭하자마자 현재 웹 페이지 위에 오버레이를 시도하고 있습니다.

document.body.insertBeforepopup.html 내 에서 메소드에 액세스 <div>하면 현재 웹 페이지가 아닌 팝업에 오버레이 됩니다.

웹 페이지의 DOM에 액세스하려면 background.html과 popup.html 사이에 메시징을 사용해야합니까? 나는 모든 것을 popup.html에서하고, 가능하다면 jQuery도 사용하고 싶다.


Chrome 확장 프로그램 개요 : 아키텍처 (필독 필수)에 명시된대로 :

확장 프로그램이 웹 페이지와 상호 작용해야하는 경우 콘텐츠 스크립트가 필요합니다. 콘텐츠 스크립트는 브라우저에로드 된 페이지의 컨텍스트에서 실행되는 일부 JavaScript입니다. 콘텐츠 스크립트를 패키지 된 확장 (상위 확장)의 일부가 아니라로드 된 페이지의 일부로 생각하십시오.

browserAction 팝업은 브라우저 도구 모음에서 아이콘을 클릭 할 때 표시되는 페이지이며 chrome-extension://URL 이있는 HTML 페이지 이므로 해당 DOM에 액세스하면 팝업에 영향을줍니다. 확장 프로그램의 배경 / 옵션 페이지에도 동일하게 적용됩니다.

웹 페이지 DOM에 액세스 / 조작하려면 두 가지 방법이 있습니다.

  1. manifest.json 에서 콘텐츠 스크립트를 선언 하고 메시징을 사용 하세요.

    chrome.tabs.sendMessage()배경 / 팝업 페이지에서 삽입 된 콘텐츠 스크립트의 chrome.runtime.onMessage리스너로, 웹 페이지에서 작업을 수행 sendResponse하고 문서에 따라 콜백을 통해 결과를 전송합니다 (참고 : 숫자, 문자열, 배열, 단순 개체와 같은 JSON 지원 개체 만 지원됩니다. DOM 요소가 아니라 클래스가 아니라 함수가 아닙니다). 콘텐츠 스크립트가 확장 페이지에 대한 통신을 시작해야하는 경우을 사용해야합니다 chrome.runtime.sendMessage().

  2. 또는 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 밀리 초 미만이므로 무시할 수 있다는 것입니다.

참고 URL : https://stackoverflow.com/questions/4532236/how-to-access-the-webpage-dom-rather-than-the-extension-page-dom

반응형