찾다

집  >  Q&A  >  본문

확장 프로그램에서 웹페이지의 `창`/DOM/HTML에 액세스

Chrome 확장 프로그램을 작성 중인데 popup.html 파일에서 버튼을 클릭하자마자 현재 웹페이지에 오버레이

하려고 합니다.

popup.html에서 document.body.insertBefore 메소드에 액세스하면 현재 웹페이지 대신 팝업의 document.body.insertBefore 方法时，它会覆盖弹出窗口上的

를 덮어씁니다.

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

P粉046878197P粉046878197437일 전671

모든 응답(2)나는 대답할 것이다

  • P粉296080076

    P粉2960800762023-10-19 08:17:05

    이 div에 확장 팝업 스크립트를 추가하기 위해 프로그래밍 방식 주입을 사용하는 몇 가지 예입니다.

    매니페스트 V3

    manifest.json에 권한을 추가하는 것을 잊지 마세요. 자세한 내용은 다른 답변을 참조하세요.

    • 간단한 통화:

      으아아아

      참고: Chrome 91 이하에서는 func: 应为 function:.

    • 매개변수로 호출하고 결과 받기

      구현 시 Chrome 92가 필요합니다 args.

      예 1:

      으아아아

      예 2:

      으아아아

    목록 V2

    • 간단한 통화:

      으아아아

    • 매개변수를 사용하여 호출하고 결과를 받습니다.

      으아아아

      이 예제에서는 inContent 함수를 사용하여 코드를 문자열로 자동 변환합니다. 이 경우 IDE에서 구문 강조 및 Linting을 적용할 수 있다는 이점이 있습니다. 명백한 단점은 브라우저가 코드를 분석하는 데 시간을 낭비한다는 점이지만 일반적으로 1밀리초 미만이므로 무시할 수 있습니다.

    회신하다
    0
  • P粉600402085

    P粉6004020852023-10-19 00:39:30

    문제: 확장 페이지(MV2의 팝업, 옵션, 배경 페이지 등)가 웹 페이지와 분리되어 있으며 자체 DOM, document、< code>window 和 chrome-extension:// URL이 있습니다.

    해결책: 콘텐츠 스크립트를 사용하여 웹페이지에 액세스하거나 해당 콘텐츠와 상호 작용하세요.

    • 콘텐츠 스크립트는 확장 프로그램이 아닌 웹 페이지에서 실행됩니다.
    • 콘텐츠 스크립트는 기본적으로 격리되어 있습니다. 페이지 컨텍스트에서 코드를 실행하는 방법(기본 세계라고도 함)을 참조하세요.
    • 확장 페이지에 콘텐츠 스크립트를 로드하지 마세요.

    방법 1. 선언적

    manifest.json:

    으아아아

    페이지가 로드될 때 한 번 실행됩니다. 그런 다음 Messaging을 사용하세요.

    경고! DOM 요소, 맵, 세트, ​​ArrayBuffers, 클래스, 함수 등을 보낼 수 없습니다. JSON 호환 단순 개체 및 유형만 보낼 수 있으므로 필요한 데이터를 수동으로 추출하여 단순 배열 또는 개체로 전달해야 합니다.

    방법 2. 프로그래밍

    • ManifestV3:

      확장 스크립트(예: 팝업 창)에서 필요에 따라 콘텐츠 스크립트/함수를 탭에 삽입할 수 있습니다.

      이 방법의 결과는 콘텐츠 스크립트의 마지막 표현이므로 데이터 추출에 사용할 수 있습니다. 데이터는 JSON과 호환되어야 합니다. 위의 경고를 참조하세요.

      manifest.json의 필수 权限:

      • “脚本” - 필수
      • "activeTab" - 사용자 작업(일반적으로 도구 모음에서 확장 프로그램 아이콘 클릭)에 응답하는 데 적합한 이상적인 시나리오입니다. 확장 프로그램을 설치할 때 권한 경고를 표시하지 않습니다.

      이상적이지 않은 경우, 허용된 사이트를 매니페스트.json의 host_permissions에 추가하세요.

      • “*://*.example.com/” 및 기타 원하는 웹사이트.

      • "" 或 "*://*/" 광범위한 호스트 권한으로 인해 Chrome 웹 스토어의 매우 느린 검토 대기열에 확장 프로그램이 배치됩니다.

    • ManifestV2와 위의 차이점:

    회신하다
    0
  • 취소회신하다