댓글 검색 목록

[html] chrome extention - 3. Overview

페이지 정보

작성자 운영자 작성일 20-11-02 10:34 조회 762 댓글 0

확장 프로그램은 웹 플랫폼에서 사용되는 HTML, CSS, 자바 스크립트, 이미지 및 기타 파일의 압축 된 번들로, Google 크롬 탐색 환경을 맞춤 설정합니다. 확장은 웹 기술을 사용하여 빌드되며 브라우저가 개방형 웹에 제공하는 것과 동일한 API를 사용할 수 있습니다.

확장에는 다양한 기능 가능성이 있습니다. 사용자가 보고 상호 작용하는 웹 콘텐츠를 수정하거나 브라우저 자체의 동작을 확장하고 변경할 수 있습니다.

확장 기능을 Chrome 브라우저를 가장 개인화 된 브라우저로 만드는 관문을 고려하십시오.

확장 파일(Extension Files)

확장자는 파일 유형과 디렉토리 수에 따라 다르지만 모두 매니페스트가 있어야 합니다. 일부 기본적이지만 유용한 확장 프로그램은 매니페스트와 툴바 아이콘만으로 구성 될 수 있습니다.

manifest.json이라는 매니페스트 파일은 가장 중요한 파일 및 확장이 사용할 수 있는 기능과 같은 확장에 대한 브라우저 정보를 제공합니다.

  {
    "name": "My Extension",
    "version": "2.1",
    "description": "Gets information from Google.",
    "icons": {
      "128": "icon_16.png",
      "128": "icon_32.png",
      "128": "icon_48.png",
      "128": "icon_128.png"
    },
    "background": {
      "persistent": false,
      "scripts": ["background_script.js"]
    },
    "permissions": ["https://*.google.com/", "activeTab"],
    "browser_action": {
      "default_icon": "icon_16.png",
      "default_popup": "popup.html"
    }
  }

확장 프로그램에는 브라우저 도구 모음에 있는 아이콘이 있어야 합니다. 도구 모음 아이콘을 사용하면 쉽게 액세스 할 수 있으며 사용자가 어떤 확장이 설치되어 있는지 알 수 있습니다. 대부분의 사용자는 아이콘을 클릭하여 을 사용하는 확장 프로그램과 상호 작용합니다.


이 Google Mail Checker 확장 프로그램은 브라우저 작업을 사용합니다.	이 Mappy 확장은 페이지 작업 및 콘텐츠 스크립트를 사용합니다.

파일 참조

확장 파일은 일반 HTML 페이지의 파일과 마찬가지로 상대 URL을 사용하여 참조 할 수 있습니다.

<img src="images/my_image.png">

또한 절대 URL을 사용하여 각 파일에 액세스 할 수도 있습니다.

chrome-extension://<extensionID>/<pathToFile>

절대 URL에서 <extensionID>는 확장 시스템이 각 확장에 대해 생성하는 고유 식별자입니다. 로드 된 모든 확장 프로그램의 ID는 URL chrome : // extensions로 이동하여 볼 수 있습니다. <pathToFile>은 확장의 최상위 폴더 아래에 있는 파일의 위치입니다. 상대 URL과 일치합니다.

압축이 풀린 확장에서 작업하는 동안 확장 ID가 변경 될 수 있습니다. 특히, 확장이 다른 디렉토리에서로드되면 압축을 푼 확장의 ID가 변경됩니다. 확장이 패키징 되면 ID가 다시 변경됩니다. 확장 프로그램의 코드가 절대 URL에 의존하는 경우 chrome.runtime.getURL() 메서드를 사용하여 개발 중에 ID를 하드 코딩하지 않도록 할 수 있습니다.

Architecture

확장의 아키텍처는 기능에 따라 다르지만 많은 강력한 확장에는 여러 구성 요소가 포함됩니다.

Background Script

백그라운드 스크립트는 확장 프로그램의 이벤트 핸들러입니다. 확장에 중요한 브라우저 이벤트에 대한 리스너를 포함합니다. 이벤트가 발생하고 지시 된 논리를 수행 할 때까지 휴면 상태에 있습니다. 효과적인 백그라운드 스크립트는 필요할 때만 로드 되고 유휴 상태가 되면 언로드 됩니다.

UI Elements

확장 프로그램의 사용자 인터페이스는 목적이 있고 최소한이어야 합니다. UI는 주의를 분산 시키지 않으면 서 브라우징 경험을 맞춤화 하거나 향상시켜야 합니다. 대부분의 확장 프로그램에는 브라우저 작업 또는 페이지 작업이 있지만 상황에 맞는 메뉴, 검색 주소창 사용 또는 키보드 단축키 생성과 같은 다른 형태의 UI를 포함 할 수 있습니다.

팝업과 같은 확장 UI 페이지에는 JavaScript 로직이 있는 일반 HTML 페이지가 포함될 수 있습니다. 확장 프로그램은 tabs.create 또는 window.open ()을 호출하여 확장에 있는 추가 HTML 파일을 표시 할 수도 있습니다.

페이지 작업 및 팝업을 사용하는 확장 프로그램은 선언적 콘텐츠 API를 사용하여 사용자가 팝업을 사용할 수 있는 경우 백그라운드 스크립트에서 규칙을 설정할 수 있습니다. 조건이 충족되면 백그라운드 스크립트가 팝업과 통신하여 사용자가 아이콘을 클릭 할 수 있도록 합니다.

A browser window containing a page action displaying a popup.

Content scripts

웹 페이지를 읽거나 쓰는 확장은 콘텐츠 스크립트를 사용합니다. 콘텐츠 스크립트에는 브라우저에 로드 된 페이지의 컨텍스트에서 실행되는 JavaScript가 포함되어 있습니다. 콘텐츠 스크립트는 브라우저가 방문하는 웹 페이지의 DOM을 읽고 수정합니다.

A browser window with a page action and a content script.

콘텐츠 스크립트는 스토리지 API를 사용하여 메시지를 교환하고 값을 저장하여 상위 확장과 통신 할 수 있습니다.

Shows a communication path between the content script and the parent extension.

Options Page

확장 프로그램을 통해 사용자가 Chrome 브라우저를 맞춤 설정할 수 있는 것처럼 옵션 페이지에서는 확장 프로그램을 맞춤 설정할 수 있습니다. 옵션을 사용하여 기능을 활성화하고 사용자가 필요에 맞는 기능을 선택할 수 있습니다.

Chrome API 사용

확장 프로그램은 웹 페이지와 동일한 API에 액세스 할 수 있을 뿐 아니라 브라우저와 긴밀하게 통합되는 확장 특정 API를 사용할 수도 있습니다. 확장 프로그램과 웹 페이지는 모두 표준 window.open() 메서드에 액세스하여 URL을 열 수 있지만 확장 프로그램은 대신 Chrome API tabs.create 메서드를 사용하여 URL이 표시되어야 하는 창을 지정할 수 있습니다.

비동기 및 동기 메서드(Asynchronous vs. synchronous methods)

대부분의 Chrome API 메서드는 비동기식이며 작업이 완료 될 때까지 기다리지 않고 즉시 반환 됩니다. 확장 프로그램이 비동기 작업의 결과를 알아야 하는 경우 콜백 함수를 메서드에 전달할 수 있습니다. 콜백은 메서드가 반환 된 후 나중에, 잠재적으로 훨씬 나중에 실행됩니다.

확장 프로그램이 사용자의 현재 선택된 탭을 새 URL로 이동하는 데 필요한 경우 현재 탭의 ID를 가져온 다음 해당 탭의 주소를 새 URL로 업데이트해야 합니다.

tabs.query 메서드가 동기식이면 아래와 같이 보일 수 있습니다.

  //THIS CODE DOESN'T WORK
  var tab = chrome.tabs.query({'active': true}); //WRONG!!!
  chrome.tabs.update(tab.id, {url:newUrl});
  someOtherFunction();

이 방법은 query()가 비동기이기 때문에 실패합니다. 작업이 완료 될 때까지 기다리지 않고 반환 되며 값을 반환하지 않습니다. 콜백 매개 변수를 서명에서 사용할 수 있는 경우 메서드는 비동기식입니다.

  // Signature for an asynchronous method
  chrome.tabs.query(object queryInfo, function callback)

탭을 올바르게 쿼리하고 해당 URL을 업데이트하려면 확장 프로그램에서 콜백 매개 변수를 사용해야 합니다.

  //THIS CODE WORKS
  chrome.tabs.query({'active': true}, function(tabs) {
    chrome.tabs.update(tabs[0].id, {url: newUrl});
  });
  someOtherFunction();

위 코드에서 라인은 1, 4, 2의 순서로 실행됩니다. query()에 지정된 콜백 함수가 호출 된 후 라인 2를 실행하지만 현재 선택된 탭에 대한 정보를 사용할 수 있어야 합니다. 이것은 query ()가 반환 된 후 언젠가 발생합니다. update()는 비동기식이지만 확장 프로그램은 업데이트 결과에 대해 아무 작업도 하지 않기 때문에 코드에서 콜백 매개 변수를 사용하지 않습니다.

  // Synchronous methods have no callback option and returns a type of string
  string chrome.runtime.getURL()

이 메서드는 URL을 문자열로 동기적으로 반환하고 다른 비동기 작업을 수행하지 않습니다.

More details

자세한 내용은 Chrome API 참조 문서를 탐색하고 다음 동영상을 시청하세요.

페이지 간 커뮤니케이션

확장의 다른 구성 요소는 종종 서로 통신해야 합니다. 다른 HTML 페이지는 getViews() 및 getBackgroundPage()와 같은 chrome.extension 메소드를 사용하여 서로를 찾을 수 있습니다. 페이지에 다른 확장 페이지에 대한 참조가 있으면 첫 번째 페이지는 다른 페이지에서 함수를 호출하고 해당 DOM을 조작 할 수 있습니다. 또한 확장의 모든 구성 요소는 저장소 API를 사용하여 저장된 값에 액세스하고 메시지 전달을 통해 통신 할 수 있습니다.

데이터 저장 및 시크릿 모드

확장 프로그램은 저장소 API, HTML5 웹 API를 사용하거나 데이터를 저장하는 서버 요청을 만들어 데이터를 저장할 수 있습니다. 확장 프로그램에서 무언가를 저장해야 하는 경우 먼저 시크릿 창에서 가져온 것인지 고려하세요. 기본적으로 확장 프로그램은 시크릿 창에서 실행되지 않습니다.

시크릿 모드는 창에 흔적이 남지 않는다고 약속합니다. 시크릿 창에서 데이터를 처리 할 때 확장 프로그램은 이 약속을 준수해야 합니다. 확장 프로그램이 일반적으로 인터넷 사용 기록을 저장하는 경우 시크릿 창에서 기록을 저장하지 마세요. 그러나 확장 프로그램은 시크릿 여부에 관계없이 모든 창에서 환경 설정을 저장할 수 있습니다.

창이 시크릿 모드인지 감지하려면 관련 tabs.Tab 또는 windows.Window 개체의 시크릿 속성을 확인하세요.

function saveTabData(tab) {
  if (tab.incognito) {
    return;
  } else {
    chrome.storage.local.set({data: tab.url});
  }
}

다음 단계

개요를 읽고 시작하기 튜토리얼을 완료 한 후 개발자는 자신 만의 확장을 작성할 준비가 되어 있어야 합니다! 다음 리소스를 통해 맞춤 Chrome의 세계에 대해 자세히 알아보세요.

디버깅 자습서에서 확장 디버깅에 사용할 수 있는 옵션에 대해 알아 봅니다.
Chrome 확장 프로그램은 개방형 웹에서 사용할 수 있는 것 이상의 강력한 API에 액세스 할 수 있습니다. chrome. * API 문서는 각 API를 안내합니다.
개발자 가이드에는 고급 확장 생성과 관련된 문서에 대한 수십 개의 추가 링크가 있습니다.