google-chrome-extension
콘텐츠 스크립트

비고

매니페스트에서 콘텐츠 스크립트 선언

manifest.json 에서 콘텐츠 스크립트를 선언하여 URL 패턴 집합과 일치하는 페이지에 항상 삽입 할 수 있습니다.

최소 예제

"content_scripts" : [
  {
    "js": ["content.js"],
    "css": ["content.css"]
    "matches": ["http://example.com/*"]
  }
]

이 매니페스트 항목은 콘텐츠 스크립트 삽입하는 크롬을 지시 content.js 하는 CSS 파일과 함께 content.css 일치하는 페이지에 대한 탐색 한 후, 일치하는 패턴을 http://example.com/*

js 및 css 키는 모두 선택 사항입니다. 필요한 항목에 따라 둘 중 하나만 가질 수도 있고 둘 다 가질 수도 있습니다.

content_scripts 키는 배열이며 여러 내용 스크립트 정의를 선언 할 수 있습니다.

"content_scripts" : [
  {
    "js": ["content.js"],
    "matches": ["http://*.example.com/*"]
  },
  {
    "js": ["something_else.js"],
    "matches": ["http://*.example.org/*"]
  }
]

단 하나의 항목이 있더라도 js 와 matches 은 모두 배열입니다.

더 많은 옵션은 공식 문서 및 다른 예제에서 사용할 수 있습니다.

중요 사항

매니페스트에서 선언 된 콘텐츠 스크립트는 확장로드 후에 새로운 탐색에만 삽입됩니다 . 기존 탭에 삽입되지 않습니다. 이는 개발 중 확장 재로드 및 릴리스 이후의 확장 갱신에도 적용됩니다.

현재 열려있는 탭이 덮여 있는지 확인해야하는 경우 시작시 프로그래밍 방식으로 주입하는 것도 고려하십시오.

확장 프로그램 페이지에서 내용 스크립트 삽입

URL을 기반으로 콘텐츠 스크립트를 항상 주입하는 대신 콘텐츠 스크립트가 삽입되는 시점을 직접 제어하려는 경우 프로그래밍 방식 주입을 사용할 수 있습니다.

최소 예제

• 자바 스크립트

  chrome.tabs.executeScript({file: "content.js"});
  

• CSS

  chrome.tabs.insertCSS({file: "content.css"});
  

확장 페이지 (예 : 배경 또는 팝업)에서 호출, 그리고 당신이 주입 할 수있는 권한이 가정이 실행됩니다 content.js 하거나 삽입 content.css 현재 탭의 상단 프레임에서 콘텐츠 스크립트로.

인라인 코드

콘텐츠 스크립트로 파일 대신 인라인 코드를 실행할 수 있습니다.

var code = "console.log('This code will execute as a content script');";
chrome.tabs.executeScript({code: code});

탭 선택하기

탭 ID (일반적으로 다른 chrome.tabs 메소드 또는 메시징의 탭 ID)를 제공하여 현재 활성화 된 탭 이외의 탭에서 실행할 수 있습니다.

chrome.tabs.executeScript({
  tabId: tabId,
  file: "content.js"
});

chrome.tabs.executeScript() 문서 및 다른 예제에서 더 많은 옵션을 사용할 수 있습니다.

권한

chrome.tabs.executeScript() 사용하면 "tabs" 권한이 필요하지 않지만 페이지 URL에 대한 호스트 권한이 필요 합니다 .

오류 확인

스크립트 삽입이 실패하면 선택적 콜백에서이를 잡을 수 있습니다.

chrome.tabs.executeScript({file: "content.js"}, function() {
  if(chrome.runtime.lastError) {
    console.error("Script injection failed: " + chrome.runtime.lastError.message);
  }
});

매니페스트의 여러 콘텐츠 스크립트

같은 조건, 여러 스크립트

예를 들어 라이브러리를 포함하는 것과 같이 다른 조건이 모두 같은 여러 파일을 주입해야하는 경우 "js" 배열에 모든 파일을 나열 할 수 있습니다.

"content_scripts" : [
  {
    "js": ["library.js", "content.js"],
    "matches": ["http://*.example.com/*"]
  }
]

중요한 사항 : library.js 는 content.js 보다 먼저 실행됩니다.

동일한 스크립트, 여러 사이트

동일한 파일을 여러 사이트에 삽입해야하는 경우 여러 일치 패턴을 제공 할 수 있습니다.

"matches": ["http://example.com/*", "http://example.org/*"]

기본적으로 모든 페이지를 삽입해야하는 경우 "*://*/*" (모든 HTTP (S) 페이지와 일치) 또는 "<all_urls>" ( 지원되는 모든 페이지 와 일치)와 같은 확장 검색 패턴을 사용할 수 있습니다.

다른 스크립트 또는 다른 사이트

"content_scripts" 섹션도 배열이므로 하나 이상의 콘텐츠 스크립트 블록을 정의 할 수 있습니다.

"content_scripts" : [
  {
    "js": ["content.js"],
    "matches": ["http://*.example.com/*"]
  },
  {
    "js": ["something_else.js"],
    "matches": ["http://*.example.org/*"]
  }
]