처음부터 Chrome 확장 프로그램을 만드는 방법

원한다면 일부 기능 추가 또는 수정 Chrome에서는 확장 프로그램을 사용해야합니다. Chrome 웹 스토어에서 확장 프로그램을 다운로드 할 수 있지만 때로는 기존 확장 프로그램에서 찾을 수없는 특정 기능이 필요합니다..

음, 좋은 소식은 필요한 기능을 추가 또는 수정하거나 Chrome 용 새 부가 기능 또는 응용 프로그램을 만들 수있는 자신 만의 확장 프로그램을 만들 수 있다는 것입니다. 나중에 추가 할 수 있습니다. 다른 사용자에게 배포 Chrome 웹 스토어 사용.

다음에서 저는 여러분에게 확장 프로그램을 만드는 가장 쉬운 방법. 웹 개발 (HTML, CSS, JS)에 대한 지식이 있다면 집에있는 것처럼 느낄 것입니다. 그렇지 않은 경우 먼저이 채널을보고 웹 개발의 기초를 배우십시오., 아래 계속.

전제 조건

이 자습서를 시작하기 전에 다음 요구 사항을 완료해야합니다..

너는 익숙해야한다. HTML, CSS 및 JavaScript. [자원 확인]
당신은 코드 편집기 확장 기능을 작성합니다. [편집자 비교]
(선택 사항) 확장 프로그램을 다른 사용자에게 배포하려면 개발자 계정 Chrome 웹 스토어 [계정 만들기]

노트 : Chrome 웹 스토어에서 개발자 계정을 만들 때 약간의 수수료를 지불하라고 Google에서 요청합니다..

확장 기능 만들기

이 튜토리얼에서는, 내가 만드는 과정을 공유하려고합니다. 할 일 확장 Google 크롬 용. 확장 기능에 제공되는 필수 구성 요소와 기능을 시연하는 유틸리티입니다 (아래 그림 참조)..

1. 템플릿 가져 오기

Google 크롬은 다른 플랫폼과 마찬가지로 구조가 설정된 확장, 초보자에게는 복잡한 것처럼 보일 수 있습니다. 그렇기 때문에 모든 필수품을 제공 할 확장판에 대한 상용구 템플릿을 얻는 것이 좋습니다..

Extensionizr은 최고의 상용구 생성기입니다. 크롬 확장 용. 지정된 확장 유형 중 하나를 선택할 수 있습니다. - 브라우저 액션 (모든 페이지 또는 브라우저에 대한 작업), 페이지 동작 (현재 페이지에 대한 작업) 또는 숨겨진 확장 기능 (일반적으로 전면 인터페이스에 숨겨진 배경 작업).

또한 다양한 미세 조정 옵션을 제공합니다. 필요한 추가 기능, 사용 권한을 포함 / 제외합니다., 등을 선택해야합니다. “브라우저 작업” 확장 유형으로 “배경 없음” 이 자습서의 배경 페이지로.

샘플 확장을 만들기위한 옵션 선택을 마쳤 으면 “다운로드 해!” Extensionizr의 버튼. 마침내, 아카이브 (.zip)를 디렉토리로 추출한다. 확장 기능 작성을 시작하기 위해 코드 편집기를 엽니 다..

2. 확장 코드

템플릿을 다운로드하고 압축을 풀면 아래 스크린 샷과 같은 디렉토리 구조가 표시됩니다. 템플릿은 깔끔하게 정리되어 있으므로 가장 중요한 파일은 “manifest.json“.

이 디렉토리에있는 다른 파일과 폴더에 대해서도 알아 보겠습니다.

_locales : 그것은 언어 정보 저장 다국어 앱.
CSS : 부트 스트랩 4와 같은 써드 파티 프론트 엔드 라이브러리를 저장하는 기능을한다..
아이콘 : 다양한 크기의 확장 아이콘을 갖도록 설계되었습니다..
js : 저장하기 편리합니다. 타사 백엔드 라이브러리 jQuery 3처럼.
src : 확장을 위해 작성할 실제 코드를 저장합니다..

manifest.json

여기에는 앱에 대한 기본 메타 데이터, 앱의 세부 정보를 브라우저에 정의합니다. 광고 확장을 수정하여 확장 프로그램의 이름, 설명, 웹 사이트, 아이콘 등을 다음과 같은 세부 정보와 함께 설정할 수 있습니다. 브라우저 동작 및 사용 권한.

예를 들어, 아래 코드에서 browser_action 아래의 default_title과 함께 이름, 설명 및 homepage_url을 변경 한 것을 알 수 있습니다. 게다가, 나는 추가 된 “저장” 허가하에 확장에 데이터를 저장해야하므로.

  "name": "Todoizr - To-do Simplified", "version": "0.0.1", "manifest_version": 2, "description": "모두를위한 간단한 할 일", "homepage_url" https://go.aksingh.net/todoizr ","icons ": "16 ":"icons / icon16.png ","48 ":"icons / icon48.png ","128 ":"icons / icon128 .png ","default_locale ":"en ","browser_action ": "default_icon ":"icons / icon19.png ","default_title ":"Todoizr - To-do Simplified ","default_popup ":"src / browser_action / browser_action.html ","permissions ": ["storage "]

src \ browser_action

이 디렉토리에는 브라우저 조치 코드가 있습니다. 우리의 경우, 우리는 팝업 창 코딩 브라우저에서 확장 프로그램 아이콘을 클릭하면 표시됩니다. 우리의 확장 기능을 통해 사용자는 팝업에서 할 일 목록을 추가하고 볼 수 있습니다..

노트 : 이 저장소를 복제하여 코드로 언제든지 시작할 수 있습니다..

템플릿의 초기 코드

이 디렉토리에는 모든 코드가 포함 된 HTML 파일 만 있었지만 더 명확하게하기 위해이 파일을 세 개의 개별 파일로 나누기로 결정했습니다. 즉, HTML 파일은 “browser_action.html” 이제 다음 코드가 있습니다.

또한, 스타일 파일은 “browser_action.css” 아래 내용이 있습니다. 반면 JavaScript 파일은 “browser_action.js” 지금은 비어있다..

 #mainPopup 패딩 : 10px; 높이 : 200px; 너비 : 400px; font-family : Helvetica, Ubuntu, Arial, sans-serif;  h1 font-size : 2em;

팝업 인터페이스 디자인하기

초기 프로젝트를 설정 한 후, 먼저 팝업 인터페이스를 디자인 해 보겠습니다. 나는 가지고있다 최소한의 접근 방식으로 인터페이스를 설정한다., 상단에 이름을 표시하고 할 일 항목을 추가하는 양식과 추가 된 항목을보기 위해 아래 영역을 표시합니다. 그것은 단순한 디자인에서 영감을 얻었습니다. “양식 스타일 5“.

아래 코드에서 두 개의 div를 추가했습니다. 하나는 양식을 표시하여 할 일 항목을 추가하고 다른 하나는 이미 추가 된 할 일 목록의 목록을 표시하기위한 것입니다. 즉, 새로운 코드는 “browser_action.html” 다음과 같다:

          Todoizr

그리고 스타일 파일 “browser_action.css” 이제 다음 코드가 있습니다.

 @import url ( "./ form_style_5.css"); #mainPopup height : 200px; 너비 : 300px; font-family : Helvetica, Ubuntu, Arial, sans-serif;  / * 할 일 항목 양식 * / .form-style-5 여백 : 자동; 패딩 : 0px 20px;  .form-style-5 : first-child background : none;  .form-style-5 h1 color : # 308ce3; 글꼴 크기 : 20px; 텍스트 정렬 : 가운데;  .form-style-5 입력 [type = "text"] width : 자동; 왼쪽으로 뜨다; margin-bottom : 설정되지 않음;  .form-style-5 입력 [type = "button"] background : # 308ce3; 너비 : 자동; float : 오른쪽; 패딩 : 7px; 국경 : 없음; border-radius : 4px; 글꼴 크기 : 14px;  .form-style-5 입력 [유형 = "버튼"] : 호버 배경 : # 3868d5;  / * 할일 목록 * / .form-style-5 : last-child height : inherit; margin-bottom : 5px;  .form-style-5 ul 패딩 : 20 픽셀;  .form-style-5 ul li 글꼴 크기 : 14px;

마지막으로 제 3 자 스타일 파일 “form_style_5.css” 아래 내용이 있습니다. 확장 기능의 디자인에 영감을주기 위해 웹 사이트에서 가져온 것입니다..

 / * Sanwebe.com의 양식 스타일 5 * / / * https://www.sanwebe.com/2014/08/css-html-forms-designs * / .form-style-5 최대 너비 : 500px; 패딩 : 10px 20px; 배경 : # f4f7f8; 여백 : 10px 자동; 패딩 : 20px; 배경 : # f4f7f8; border-radius : 8px; font-family : 조지아, "Times New Roman", Times, serif;  .form-style-5 fieldset border : none;  .form-style-5 범례 글꼴 크기 : 1.4em; margin-bottom : 10px;  .form-style-5 label display : 블록; margin-bottom : 8px;  .form-style-5 입력 [type = "text"], .form-style-5 입력 [type = "date"], .form-style-5 입력 [type = "datetime"], .form-style type-5 입력 : .form-style-5 입력 [type = "search"], .form-style-5 입력 [type] .form-style-5 input type = "url", .form-style-5 textarea, .form-style-5 select font-family : 조지아, "Times New Roman", Times , serif; 배경 : rgba (255,255,255, .1); 국경 : 없음; border-radius : 4px; 글꼴 크기 : 16px; margin : 0; 윤곽선 : 0; 패딩 : 7px; 너비 : 100 %; 박스 크기 : border-box; -webkit-box-sizing : border-box; -moz-box-sizing : 테두리 상자; 배경색 : # e8eeef; 색상 : # 8a97a0; -webkit-box-shadow : 0 1px 0 rgba (0,0,0,0.03) 삽입; 상자 그림자 : 0 1px 0 rgba (0,0,0,0.03) 삽입; margin-bottom : 30px;  [형식 = "텍스트"] : 포커스, .form- 스타일 -5 입력 [형식 = "날짜"] : 포커스, .form- 스타일 -5 입력 [형식 = "datetime"] : focus, .form-style-5 입력 [type = "email"] : 포커스, .form-style-5 입력 [type = "number"] : 포커스, .form-style-5 입력 [type = "search"] : 포커스, .form-style-5 입력 [type = "time"] : 포커스, .form- 스타일 -5 입력 [type = "url"] : 포커스, .form- 스타일 -5 텍스트 영역 : focus, .form- 스타일 -5 선택 : 초점 배경 : # d2d9dd;  .form-style-5 select -webkit-appearance : menulist-button; 높이 : 35px;  .form-style-5 .number background : # 1abc9c; color : #fff; 높이 : 30px; 너비 : 30px; 디스플레이 : 인라인 블록; font-size : 0.8em; margin-right : 4px; 줄 높이 : 30px; 텍스트 정렬 : 가운데; 텍스트 그림자 : 0 1px 0 rgba (255,255,255,0.2); border-radius : 15px 15px 15px 0px;  .form-style-5 입력 [type = "submit"], .form-style-5 입력 [type = "button"] 위치 : 상대적; 디스플레이 : 블록; 패딩 : 19px 39px 18px 39px; 색상 : #FFF; 여백 : 0 자동; 배경 : # 1abc9c; 글꼴 크기 : 18px; 텍스트 정렬 : 가운데; 글꼴 스타일 : 일반; 너비 : 100 %; 국경 : 1 픽셀 고체 # 16a085; border-width : 1px 1px 3px; margin-bottom : 10px;  .form-style-5 입력 [유형 = "제출"] : 마우스 오버, .form-style-5 입력 [유형 = "버튼"] : 호버 배경 : # 109177;

팝업의 논리를 작성하십시오.

확장 프로그램의 프론트 엔드로 작업을 마쳤 으면 이제 작동을위한 논리를 작성해 보겠습니다. 우리는 우리의 연장이 필요해. 할 일 항목 추가 및 표시 팝업 창에서 따라서 버튼 클릭 리스너를 추가하여 입력 텍스트를 할 일 목록 및 페이지로드 수신기로 추가하여 해당 항목을 표시합니다.

아래의 코드에서는 두 가지 함수를 사용하려고합니다. - sync.get () 및 sync.set (), 일부인 “chrome.storage“. 두 번째 항목은 저장소에 항목을 저장하고 첫 번째 항목은 항목을 검색하고 표시하기 위해 필요합니다..

즉, 아래의 마지막 코드가 있습니다. “browser_action.js” 파일. 아래에서 볼 수 있듯이 코드의 목적을 이해하는 데 도움이되는 코드가 많이 언급되어 있습니다..

 function loadItems () / * 저장소에서 데이터를 먼저 얻습니다. * / chrome.storage.sync.get ([ 'todo'], function (result) var todo = [] if (result && result.todo && result.todo.trim ()! == ") / * 문자열을 구문 분석하여 문자열로 저장 * / todo = JSON.parse (result.todo) console.log ( 'todo.length =' + todo.length) for (var i = 0; i < todo.length; i++)  item = todo[i] if (item && item.trim() !==")  /* Append the items in the #list for showing them */ var list = document.getElementById('list') var entry = document.createElement('li') var text = document.createTextNode(item) entry.appendChild(text) list.appendChild(entry)   )  /* Load the to-do items upon popup load */ document.addEventListener('DOMContentLoaded', function() console.log('Inside doc.loaded()') loadItems() ) /* Save the to-do item upon button click */ document.getElementById('btn').addEventListener('click', function (ev)  console.log('Inside btn.click()') text = document.getElementById('txt').value if (text && text.trim() !==")  /* First get() old data as calling set() will replace it */ chrome.storage.sync.get(['todo'], function(result)  var todo = [] if (result && result.todo && result.todo.trim() !==")  /* Parse and get the array as it is saved as a string */ todo = JSON.parse(result.todo)  todo.push(text) chrome.storage.sync.set('todo': JSON.stringify(todo), function()  /* Data is saved now */ var list = document.getElementById('list') while (list.firstChild)  list.removeChild(list.firstChild)  loadItems() ) )  )

3. 확장을로드하십시오.

확장 프로그램 작성을 마친 후에는 압축되지 않은 확장 프로그램을로드 할 수있는 Chrome 기능을 통해 테스트 할 시간입니다. 하지만 먼저 개발자 모드 사용 브라우저에서 다음을 클릭하십시오. 옵션들 단추 > 고르다 “추가 도구” > 확장 기능, 그런 다음에 토글 “개발자 모드“.

이제 검색 창 아래에 더 많은 버튼이 표시됩니다. 여기를 클릭하십시오 “포장을 풀었습니다.” 단추. 디렉토리를 묻고 확장 프로그램의 디렉토리를 찾아 선택하면 확장 프로그램이로드됩니다. 확장 프로그램 코드를 수정하거나 업데이트하는 경우 최신 변경 사항을로드하려면 버튼을 다시로드하십시오..

이 예에서, 확장 프로그램 아이콘이 표시됩니다. 샘플 확장에 브라우저 작업을 추가했기 때문에 프로필 아이콘 옆에 있습니다. 해당 아이콘을 클릭하면 할 일 목록 추가 및보기 우리의 연장선에 명시된대로.

확장 프로그램 배포

그것은 확장 프로그램을 쉽게 업로드 할 수 있습니다. Chrome 웹 스토어에이 프로세스가 너무 길어 모든 세부 정보를 다룰 수 없습니다. 요약하면 개발자 계정을 만들고 확장 프로그램을 패키지 한 다음 콘텐츠 세부 정보 (예 : 이름, 아이콘, 스크린 샷 등)와 함께 제출합니다. 단계별 가이드에 나열된대로.

다음은? 읽기 및 코드

예상대로이 튜토리얼의 목적은 Google 크롬의 확장 개발을 시작할 수 있도록 돕는 것입니다. 나는 기본 개념을 다루려고 노력했다. 하나, 너는 훨씬 더 많이 알 필요가있어. 심각한 확장 개발을하기 위해.

즉, 아래에 나와있는 일부가 있습니다. 좋아하는 이동 자원 Chrome 및 기타 Chromium 기반 브라우저의 확장 기능을 개발하는 방법을 배우려면 다음 단계를 따르십시오.

확장 기능의 모든 기능, 구성 요소 및 기능.
Google 크롬 팀의 확장 프로그램 샘플.

이러한 리소스를 검토하고 몇 가지 문제를 해결할 준비가되면 방금 개발 한 확장 프로그램에서 다음 기능을 추가하십시오.

저장된 할 일 목록을 삭제하는 옵션.
항목 추가 완료시 알림 표시 기능.

그게 가장 인기있는 브라우저의 첫 번째 확장 기능 개발에 관한 것입니다.. 어떤 확장 프로그램을 만들었습니까?? 문제가 생겼니? 아래에 의견을 적어 주시거나 @aksinghnet에서 나를 보내 주시면 이야기를 알려주세요..

마지막으로 Chrome 웹 스토어에서 만든 Todoizr (확장 프로그램)을 사용해보고이 저장소에서 전체 코드를 확인할 수 있습니다..