Chrome 확장 프로그램을 만드는 방법

{ "manifest_version": 2, "name": "My Cool Extension", "version": "0.1" } 

가능한 가장 기본적인manifest.json,모든 필수 필드가 채워져 있습니다. 2014 년 1 월 현재 버전 1 이 지원되므로manifest_version는 항상 2 여야합니다. 지금까지 우리의 확장은 절대적으로 아무것도하지 않지만 어쨌든 크롬에로드합시다.,

드의 확장으로 크롬

을 로드하는 확장 크롬에서 열chrome://extensions/에서 당신의 브라우저와를 클릭하”개발자”모드에서 오른쪽 상단에. 이제”unpackedextension 로드…”를 클릭하고 확장 프로그램의 디렉토리를 선택하십시오. 이제 너를보아야한다.목록에서 확장.

확장 프로그램에서 코드를 변경하거나 추가 할 때이 페이지로 돌아 오면페이지를로드하십시오. 크롬은 확장 프로그램을 다시로드합니다.

Content scripts

content script 는”웹 페이지의 컨텍스트에서 실행되는 JavaScript 파일입니다.,”이것은 콘텐츠 스크립트가 브라우저가 제공하는 웹 페이지와 상호 작용할 수 있음을 의미합니다. Chrome 확장 프로그램의 모든 JavaScript 파일이이를 수행 할 수있는 것은 아닙니다.

추가 할 컨텐츠 라는 스크립트content.js

// content.js alert("Hello from your Chrome extension!") 

를 주입하는 스크립트,우리에게 필요 우리manifest.json파일에 대한니다.,

이것을 추가manifest.json파일:

"content_scripts": , "js": } ] 

이렇게 크롬을 주입content.js으로 우리는 모든 페이지를 사용하여 방문 thespecial<all_urls>URL 패턴이다. 일부에만 스크립트를 주입하려는 경우페이지,우리는 일치 패턴을 사용할 수 있습니다. 다음은"matches"에 대한 값의 몇 가지 예입니다.

Chrome 확장 프로그램을 다시로드하십시오. 당신이 방문하는 모든 단일 페이지는 이제 경고를 팝업. 대신 페이지의 첫 번째 URL 을 살펴 보겠습니다.,

URL 로깅하기

jQuery 는 필요하지 않지만 모든 것을 더 쉽게 만듭니다. 먼저 jQuery CDN 에서 jquery 의 혐오감을 다운로드하여 확장 프로그램의 폴더에 넣으십시오. 최신 축소 버전 인jquery-2.1.3.min.js를 Idownloaded. 로드하려면manifest.json전에"content.js"에 추가하십시오., 귀하의 전체manifest.json다음과 같아야합니다.

{ "manifest_version": 2, "name": "My Cool Extension", "version": "0.1", "content_scripts": , "js": } ] } 

이제 jQuery 가 있으므로 첫 번째 외부 링크의 URL 을 로깅하는 데 사용합시다.content.js:

// content.js var firstHref = $("a").eq(0).attr("href"); console.log(firstHref); 

문서가로드되었는지 확인하기 위해 jquery 를 사용할 필요가 없다는 점에 유의하십시오. Bydefault,Chrome 은 DOM 이 완료된 후 콘텐츠 스크립트를 주입합니다.

그것을 밖으로 시도-당신은 당신이 방문하는 모든 페이지에 콘솔의 출력을 볼 수 있어야합니다.,

브라우저 동작

확장 프로그램이 주소 표시 줄 옆에 작은 아이콘을 추가하면 browseraction 입니다. 확장 프로그램은 해당 버튼을 클릭 한 다음 수행 할 수 있습니다.

아이콘을 넣으십시오.png 에서 구글의 확장자는 튜토리얼에서 당신의 extension 폴더 andadd 이를manifest.json

"browser_action": { "default_icon": "icon.png" } 

을 사용하기 위해서는 브라우저 활동,우리가 필요한 추가 메시지를 전달합니다.

메시지 전달

콘텐츠 스크립트는 현재 페이지에 대한 액세스 권한이 있지만 Api itcan 액세스 권한에서는 제한됩니다., 예를 들어 브라우저 동작에 대한 클릭을들을 수 없습니다. Weneed 는 모든 Chrome API 에 액세스 할 수 있지만 현재 페이지에 액세스 할 수없는 백그라운드 스크립트 인 확장 프로그램에 다른 유형의 스크립트를 추가합니다. AsGoogle 은 그것을 넣습니다:

콘텐츠 스크립트에는 몇 가지 제한이 있습니다. 그들은 사용할 수 없습니다chrome.*Api 를 사용하여 예외의extension,i18n,runtime,andstorage.,

그 콘텐츠 스크립트를 당길 수있을 것입 URL 현재 페이지지만 필요해 손으로 그 URL 을 통해 배경은 스크립트가 뭔가를 usefulwith 니다. 의사 소통을 위해 Google 이 메시지 전달이라고 부르는 것을 사용하게되며,이를 통해 스크립트가 메시지를 보내고들을 수 있습니다. 그것은 유일한 방법입니다콘텐츠 스크립트와 백그라운드 스크립트가 상호 작용합니다.,

추가하려면 다음을 말한manifest.json배경에 대한 스크립트:

"background": { "scripts": } 

이제 우리는 우리를 추가background.js

이 보내는 임의의 JSON 중을 현재의 탭을 누릅니다. JSONpayload 의 키는 무엇이든 될 수 있지만 단순화를 위해"message"를 선택했습니다. 지금 우리가 필요 tolisten 해당 메시지에 대해서content.js

통보는 우리의 모든 코드로 이동되었습으로 수신기,그래서 거라는 경우에만 실행 페이로드 받았습니다., Browseraction 아이콘을 클릭 할 때마다 URL 이 콘솔에 기록되는 것을 볼 수 있어야합니다. 작동하지 않는 경우 확장 프로그램을 다시로드 한 다음 페이지를 다시로드 해보십시오.

새 탭을 열

우리가 사용할 수 있는chrome.tabsAPI 새 탭을 열 수:

chrome.tabs.create({"url": "http://google.com"}); 

그러나chrome.tabs만 사용할 수 있는background.js, 그래서 우리는 추가 somemore 메시지를 전달 이후background.js탭을 열 수 있습니다,하지만 할 수 없을 잡아 theURL., 다음은 아이디어입니다.

1. background.js에서 브라우저 동작을 클릭하십시오. 그것은’sclicked 때,clicked_browser_action이벤트를 보내content.js.
2. content.js가 이벤트를 수신하면 페이지의 첫 번째 링크의 URL 을 가져옵니다. 그런 다음 URL toopen 과 함께open_new_tab를 다시background.js로 보냅니다.
3. background.js는open_new_tab를 수신하고 메시지를 수신 할 때 givenURL 과 함께 새 탭을 엽니 다.,

클릭하면 브라우저 액션을 트리거background.js를 보낼 것이다,amessage 을content.js는 URL 을 보낼 다시background.js는 willopen 새 탭을 지정한 URL 이 있습니다.

먼저content.js에 URL 을 보내려면background.js에 알려야합니다., 변화content.js이 코드를 사용하려면:

이제 우리는 우리가하기 위해 코드를 말하는background.js을 듣는 이벤트:.

이제 클릭할 때 브라우저에 작업 아이콘을,그것은 새 탭을 열면 firstexternal URL 습니다.

포장것

전체content.js및background.js위에 있다., 여기에는manifest.json

그리고 여기에는 전체 디렉토리 구조로 구성되어 있다:

. ├── background.js ├── content.js ├── icon.png ├── jquery-2.1.3.min.js └── manifest.json 

을 만드는 방법에 대한 자세한 내용은 크롬 확장 프로그램

자세한 정보도 공식적인 크롬 확장 프로그램 설명서입니다.