기본 지식
1. 플러그인 파일 구조
1.1. manifest.json
각 확장, 설치 가능한 WebApp 및 Skin에는 중요한 플러그인 관련 정보를 저장하는 JSON 형식 매니페스트 파일이 있습니다.
기본 구성 예 :
{ "이름": "브라우저 액션 데모", "버전": "1.0", "권한": [ "탭", "http :"https ","https : //*/*","browser_action ": {"default_title ":"switch leight ","default_icon ":"default_pop " "popup.html"}, "background": { "page": "background.html"}, "manifest_version": 2}1.2. 팝업
플러그인의 팝업 창, 위 구성의 Browser_Action의 default_popup 이이 페이지입니다.
1.3. 배경 페이지
대부분의 응용 프로그램에는 응용 프로그램의 주요 기능을 수행하기위한 배경 페이지가 포함됩니다.
1.4. 컨텐츠 스크립트
컨텐츠 스크립트는 응용 프로그램과 웹 페이지 간의 상호 작용을 가능하게 할 수 있으며, 이는 브라우저에서로드 된 페이지 내부에서 실행될 수있는 JavaScript 스크립트를 나타냅니다. 콘텐츠 스크립트를 웹 페이지의 일부로 생각할 수 있으며 응용 프로그램의 일부가 아닙니다.
2. 파일 간의 상호 작용
백그라운드 페이지의 함수는 팝업 창에서 직접 호출 할 수 있습니다.
컨텐츠 스크립트는 현재 웹 페이지의 DOM 트리를 읽고 수정할 수 있지만 위치한 응용 프로그램의 배경 페이지 (배경)의 DOM 트리를 수정할 수는 없습니다.
컨텐츠 스크립트와 응용 프로그램 간의 상호 작용 : 서로에게 메시지를 보낼 수 있습니다.
3. 웹 페이지에 js (컨텐츠 스크립트) 파일을 인젝션 :
방법 1 : manifest.json 파일에서 구성 :
"content_scripts": [{ "matches": [ "http://www.google.com/*"], "css": [ "mystyles.css"], "js": [ "jquery.js", "myscript.js"}],방법 2, executescript () :
JavaScript 스크립트를 페이지에 넣어 실행할 수 있습니다.
chrome.tabs.Executescript (정수 tabid, 객체 세부 사항, 함수 콜백) chrome.tabs.executescript (tabid, {file : "func.js", allframes : true});UI 모양
1. 브라우저 동작 :
메인 크롬 도구 모음의 주소 표시 줄의 오른쪽에 아이콘을 추가하십시오.
참고 : 패키지 앱은 브라우저 동작을 사용할 수 없습니다
1.1. manifest.json의 구성
브라우저 동작 등록 :
{ "name": "my extension", ... "Browser_Action": { "default_icon": "images/icon19.png", // 옵션 "default_title": "Google Mail", // 옵션; Tooltip "default_popup": "popup.html"// 옵션}, ...}에 표시됩니다.1.2. 구성 항목 설명
(1) default_icon
아이콘 19 * 19px
Browser_Action 's Manifest에서 DEFAULT_ICON 필드를 수정하거나 setIcon () 메소드를 호출하십시오.
Chrome.browserAction.Seticon (객체 세부 사항)
브라우저 동작 아이콘을 설정합니다. 아이콘은 캔버스 요소에서 추출한 그림이나 픽셀 정보로가는 경로 일 수 있습니다. 그것이 아이콘 경로이든 캔버스의 이미지 라타이든이 속성을 지정해야합니다.
(2) default_title
Browser_Action Manifest에서 DEFAULT_TITLE 필드를 수정하거나 SENTTITLE () 메소드를 호출하십시오. default_title 필드에 현지화 된 문자열을 지정할 수 있습니다. 세부 사항을 보려면 국제화를 클릭하십시오.
Chrome.browserAction.SetTitle (객체 세부 사항)
브라우저 동작의 제목을 설정하면 툴팁에 표시됩니다.
(3) 배지
브라우저 동작은 선택적으로 배지를 표시 할 수 있습니다. 아이콘에 텍스트를 표시합니다. 배지는 브라우저 동작에 대한 소규모 확장 상태 프롬프트 정보를 업데이트 할 수 있습니다.
배지 공간은 제한되어 있으므로 4 자 미만 만 지원합니다.
배지 텍스트와 색상을 설정하려면 SetBadGetext () 및 SetBadgebackgroundColor ()를 각각 사용할 수 있습니다.
Chrome.browserAction.SetBadGetext (객체 세부 사항)
브라우저 동작의 배지 텍스트를 설정하면 아이콘에 배지가 표시됩니다.
setBadgebackgroundcolorchrome.browserAction.SetBadgebackgroundColor (객체 세부 사항)
배지의 배경색을 설정하십시오.
(4) default_popup
팝업 버블 팁
HTML 파일을 지정하려면 Browser_Action 's Manifest에서 DEFAULT_POPUP 필드를 수정하거나 setPopup () 메서드를 호출하십시오.
Chrome.browserAction.SetPopup (객체 세부 사항)
브라우저 동작을 클릭 할 때 팝업에 표시되는 HTML을 설정합니다.
1.3. 팁
최상의 디스플레이를 보려면 다음 원칙을 따르십시오.
브라우저 동작은 대부분의 웹 사이트에 기능 요구 사항이있는 시나리오에서만 사용되는지 확인하십시오.
브라우저 동작이 기능이있는 몇몇 웹 페이지에서 사용되지 않음을 확인하십시오. 이 시나리오에 페이지 작업을 사용하십시오.
아이콘 크기가 19x19 픽셀 공간만큼 차지 해야하는지 확인하십시오. 브라우저 동작의 아이콘은 페이지 동작의 아이콘보다 더 크고 무겁게 보일 것입니다.
Google Chrome의 렌치 아이콘을 모방하려고 시도하지 마십시오. 성능은 다른 테마에서 문제가 될 수 있으며 확장은 더 눈길을 끄는 것이어야합니다.
많은 사용자가 테마를 사용하기 때문에 Alpha 채널을 사용하고 아이콘의 가장자리를 부드럽게하십시오. 아이콘은 다양한 배경에서 잘 작동해야합니다.
아이콘을 계속 번쩍이지 마십시오. 매우 공격적입니다.
2. 마우스 오른쪽 버튼을 클릭하십시오
다른 유형의 객체 (예 : 그림, 링크, 페이지)에 대한 마우스 오른쪽 버튼 클릭 메뉴 항목을 추가하도록 선택할 수 있습니다.
필요에 따라 여러 마우스 오른쪽 버튼 클릭 메뉴 항목을 추가 할 수 있습니다. 연장에 추가 된 여러 마우스 오른쪽 버튼 클릭 메뉴 항목은 Chrome에 의해 자동으로 결합되어 해당 연장 이름의 보조 메뉴에 배치됩니다.
마우스 오른쪽 버튼 클릭 메뉴는 모든 문서 (또는 문서의 프레임) 또는 로컬 파일 (예 : 파일 : // 또는 Chrome : //)에 나타날 수 있습니다. 다른 문서에서 마우스 오른쪽 클릭 메뉴의 표시를 제어하려면 create () 및 update ()를 호출 할 때 DocumentUrlPatterns를 지정할 수 있습니다.
2.1. manifest.json의 구성
매니페스트에서 "ContentMenus"권한을 선언하십시오. 동시에 오른쪽 클릭 메뉴 로고로 사용할 16x16 아이콘을 지정해야합니다. 예를 들어:
{ "name": "my extension", ... "권한": [ "ContextMenus"], "Icons": { "16": "icon-bitty.png", "48": "icon-small.png", "128": "icon-large.png"}, ...}.3. 데스크탑 알림
중요한 일이 발생했음을 사용자에게 알리십시오. 바탕 화면 알림은 브라우저 창 밖에 표시됩니다. 아래 그림은 알림의 효과를 보여줍니다. 다른 플랫폼에서는 알림의 표시 효과가 약간 다릅니다.
작은 JavaScript 코드를 직접 사용하여 알림을 작성하고 물론 확장 패키지의 별도의 HTML 페이지를 통해 수행 할 수도 있습니다.
3.1. manifest.json의 구성
{ "name": "my extension", ... "권한": [ "알림"], ...}3.2. 확장 페이지와 상호 작용 :
getbackgroundpage () 및 getViews ()를 사용하여 알림 및 확장 페이지에서 상호 작용을 만듭니다.
// 알림에서 확장 페이지 메소드를 호출합니다 ... chrome.extension.getBackgroundPage (). dothing (); // 확장자 페이지에서 알림 메소드를 호출합니다 ... chrome.extension.getViews ({type : "알림"}).4. Omnibox
Omnibox 응용 프로그램 인터페이스를 사용하면 Omnibox라고도하는 Google Chrome의 주소 표시 줄에 키워드를 등록 할 수 있습니다.
Omnibox 키워드 필드는 매니페스트에 포함되어야합니다. 16x16 픽셀의 아이콘은 사용자가 키워드를 입력 할 때 주소 표시 줄에 표시되도록 지정해야합니다.
4.1. manifest.json의 구성
{ "name": "Aaron 's Omnibox 확장", "버전": "1.0", "Omnibox": { "키워드": "Aaron"}, "Icons": { "16": "16-full-color.png"}, "background_page": "background.html"}크롬은 그레이 스케일 모드에서 16x16 픽셀의 아이콘을 자동으로 생성합니다. 다른 시나리오에서 사용할 수 있도록 아이콘의 풀 컬러 버전을 제공해야합니다.
5. 옵션 페이지
사용자가 내선을 설정하려면 옵션 페이지를 제공해야 할 수도 있습니다. 옵션 페이지를 제공하면 확장 관리 페이지 Chrome : // 확장자에 링크가 제공됩니다. 옵션 링크를 클릭하여 옵션 페이지를여십시오.
5.1. manifest.json의 구성
{ "name": "my extension", ... "Option_Page": "Options.html", ...}6. 특정 페이지를 덮어 씁니다
대체 페이지를 사용하면 Chrome의 특정 페이지를 기본적으로 교체하고 대신 확장자가 제공 한 페이지를 사용할 수 있습니다.
6.1. manifest.json의 구성
{ "name": "my extension", ... "chrome_url_overrides": { "pagetooverride": "mypage.html"}, ...}7. 페이지 작업
페이지 작업을 사용하여 주소 표시 줄에 아이콘을 배치하십시오.
확장자 아이콘이 항상 보이려면 브라우저 동작을 사용하십시오.
패키지 응용 프로그램은 페이지 작업을 사용할 수 없습니다.
7.1. manifest.json의 구성
{ "name": "my extension", ... "page_action": { "default_icon": "icons/foo.png", // 옵션 "default_title": "do action", // 옵션; Tooltip "default_popup": "popup.html"// 옵션}, ...}에 표시됩니다.7.2. 구성 항목 설명
브라우저 동작과 마찬가지로 페이지 작업에는 아이콘, 프롬프트 메시지 및 팝업이있을 수 있습니다. 그러나 배지는 없습니다
Methods Show () 및 Hide ()를 사용하여 페이지 작업을 표시하고 숨 깁니다. 기본적으로 페이지 조치가 숨겨져 있습니다. 표시하려면 아이콘이있는 탭 페이지를 지정해야합니다. 탭 페이지가 닫히거나 다른 URL이 표시되기 시작할 때까지 아이콘이 표시됩니다 (예 : 사용자는 연결을 클릭합니다).
7.3. 팁
몇 페이지에만 페이지 작업을 사용합니다.
대부분의 페이지에 사용하지 말고 기능에 필요한 경우 대신 브라우저 작업을 사용하십시오.
괜찮을 때 항상 아이콘이 애니메이션에 나타나지 않으면 매우 성가 시게됩니다.
8. 주제
테마는 전체 브라우저의 모양을 변경하는 데 사용할 수있는 특수 확장입니다. 테마는 표준 확장과 유사하지만 테마에는 JavaScript 또는 HTML 코드가 포함될 수 없습니다.
8.1. manifest.json의 구성
{ "버전": "2.6", "이름": "Camo Theme", "Theme": { "images": { "wameble_frame": "images/tople_frame_camo.png", "wamebrame_frame_overlay": "images/tople_frame_stripe.png", "images_toolbar": "images_toolbar_camo.png", "Theme_ntp_background": "이미지/테마_ntp_backgroun : [36, 70, 0], "ntp_section": [207, 221, 192], "button_background": [255, 255, 255], "Tints": { "버튼": [0.33, 0.5, 0.47]}, "속성": { "ntp_background_alignment": "}}}}}