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

Question

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

하려고 합니다.

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

를 덮어씁니다.

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

2

0

0

P粉046878197

회신하다

모든 응답(2)

나는 대답할 것이다 닫다

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

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

매니페스트 V3

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

• 간단한 통화:

  으아아아

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

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

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

  예 1:

  으아아아

  예 2:

  으아아아

목록 V2

• 간단한 통화:

  으아아아

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

  으아아아

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

좋다 +0

답글 추가 关闭回复

P粉046878197

회신하다

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

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

• 서비스 워커에는 DOM/문서/창이 전혀 없다는 점에 유의하세요.
• 확장의 각 컨텍스트를 검사하려면 자체 개발 도구를 사용하세요 .

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

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

방법 1. 선언적

manifest.json:

으아아아

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

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

방법 2. 프로그래밍

• ManifestV3:

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

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

  manifest.json의 필수 权限:

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

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

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

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

• ManifestV2와 위의 차이점:

  • chrome.tabs.executeScript를 사용하세요.
  • 权限에 웹사이트를 지정하세요.

좋다 +0

답글 추가 关闭回复

P粉046878197

회신하다

인기 주제

더>

• CakePHP 튜토리얼
• 라라벨 튜토리얼
• PHP 튜토리얼
• 자바 튜토리얼

인기 기사

• World Chain은 새로운 통합으로 Ethereum 레이어 2 확장을 주목하고 있으며 WLD 가격은 10달러로?
• XRP와 Cardano 고래의 움직임으로 Toncoin(TON)과 Rollblock(RBLK)이 시장의 관심을 끌었습니다.
• 포켓몬 포켓: 친구들과 플레이하는 방법
• 드래곤 에이지: 베일가드 - 잃어버린 시대의 문 연습
• DA: Veilguard에서 Waterfront Glades 상자를 여는 방법

인기 튜토리얼

더>

관련 튜토리얼

인기 추천

최신 강좌

• 
  최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)

  1417034
• 
  PHP 입문 튜토리얼 1: 일주일 안에 PHP 배우기

  4257872
• 
  JAVA 초보자용 비디오 튜토리얼

  2476942

• 
  최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)

  1417034
• 
  JAVA 초보자용 비디오 튜토리얼

  2476942
• 
  Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼

  503908
• 
  웹 프론트 엔드 개발에 대한 빠른 소개

  215288
• 
  PS 비디오 튜토리얼을 처음부터 마스터하세요

  877408

• 
  [웹 프런트엔드] Node.js 빠른 시작

  6425
• 
  해외 웹 개발 풀스택 강좌 총집합

  5050
• 
  Go 언어 실습 GraphQL

  4247
• 
  550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다

  633
• 
  기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬

  21489

최신 다운로드

더>

웹 효과

웹사이트 소스 코드

웹사이트 자료

프론트엔드 템플릿

• [양식 버튼] jQuery 기업 메시지 양식 연락처 코드
• [플레이어 특수 효과] HTML5 MP3 뮤직 박스 재생 효과
• [메뉴 탐색] HTML5 멋진 입자 애니메이션 탐색 메뉴 특수 효과
• [양식 버튼] jQuery 시각적 양식 드래그 앤 드롭 편집 코드
• [플레이어 특수 효과] VUE.JS 모방 Kugou 음악 플레이어 코드
• [HTML5 특수 효과] 클래식 HTML5 푸시 박스 게임
• [그림 특수 효과] 이미지 효과를 추가하거나 줄이기 위해 jQuery 스크롤
• [사진 앨범 효과] CSS3 개인 앨범 커버 호버 확대/축소 효과

• [부트스트랩 템플릿] 유기농 과일 및 야채 공급업체 웹 템플릿 Bootstrap5
• [백엔드 템플릿] Bootstrap3 다기능 데이터 정보 배경 관리 반응형 웹 페이지 템플릿-Novus
• [부트스트랩 템플릿] 부동산 자원 서비스 플랫폼 웹 페이지 템플릿 Bootstrap5
• [부트스트랩 템플릿] 간단한 이력서 정보 웹 템플릿 Bootstrap4
• [부트스트랩 템플릿] 부트스트랩 반응형 와이드스크린 도서 교육 웹사이트 템플릿 - DREAMLIFE
• [백엔드 템플릿] MAC 스타일 반응 형 블루 엔터프라이즈 CMS 배경 관리 시스템 템플릿
• [백엔드 템플릿] 반응형 그라데이션 분위기 배경 관리 시스템 웹사이트 템플릿-usinessbox
• [부트스트랩 템플릿] 반응형 야채 및 과일 매장 웹사이트 템플릿-Organio

• [PNG 소재] 귀여운 여름 요소 벡터 자료(EPS+PNG)
• [PNG 소재] 4개의 빨간색 2023 졸업 배지 벡터 자료(AI+EPS+PNG)
• [배너 그림] 노래하는 새와 꽃 디자인 봄 배너 벡터 자료로 가득 찬 카트(AI+EPS)
• [PNG 소재] 황금 졸업 모자 벡터 자료(EPS+PNG)
• [PNG 소재] 흑백 스타일 산 아이콘 벡터 자료(EPS+PNG)
• [PNG 소재] 다양한 색상의 망토와 포즈를 갖춘 슈퍼히어로 실루엣 벡터 자료(EPS+PNG)
• [배너 그림] 플랫 스타일 식목일 배너 벡터 자료(AI+EPS)
• [PNG 소재] 9개의 만화 스타일의 폭발적인 채팅 거품 벡터 자료(EPS+PNG)

• [프런트엔드 템플릿] 가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿
• [프런트엔드 템플릿] 신선한 색상의 개인 이력서 가이드 페이지 템플릿
• [프런트엔드 템플릿] 디자이너 크리에이티브 작업 이력서 웹 템플릿
• [프런트엔드 템플릿] 현대 엔지니어링 건설 회사 웹사이트 템플릿
• [프런트엔드 템플릿] 교육 서비스 기관을 위한 반응형 HTML5 템플릿
• [프런트엔드 템플릿] 온라인 전자책 쇼핑몰 웹사이트 템플릿
• [프런트엔드 템플릿] IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다.
• [프런트엔드 템플릿] 보라색 스타일 외환 거래 서비스 웹 사이트 템플릿

Answer 1

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

매니페스트 V3

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

• 간단한 통화:

  으아아아

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

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

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

  예 1:

  으아아아

  예 2:

  으아아아

목록 V2

• 간단한 통화:

  으아아아

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

  으아아아

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

Answer 2

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

• 서비스 워커에는 DOM/문서/창이 전혀 없다는 점에 유의하세요.
• 확장의 각 컨텍스트를 검사하려면 자체 개발 도구를 사용하세요 .

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

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

방법 1. 선언적

manifest.json:

으아아아

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

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

방법 2. 프로그래밍

• ManifestV3:

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

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

  manifest.json의 필수 权限:

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

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

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

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

• ManifestV2와 위의 차이점:

  • chrome.tabs.executeScript를 사용하세요.
  • 权限에 웹사이트를 지정하세요.