Google 크롬에서 일부 기능 을 추가하거나 수정 하려면 확장 프로그램을 사용해야합니다. Chrome 웹 스토어 에서 확장 프로그램을 다운로드 할 수 있지만 2이지만 기존 확장에서 찾을 수없는 특정 기능이 필요한 경우도 있습니다.
좋은 소식은 필요한 기능을 추가 또는 수정하기 위해 고유 한 확장 프로그램을 만들거나 나중에 Chrome 웹 스토어를 사용하여 다른 사용자에게 배포 할 수있는 Google Chrome 용 새 추가 기능 또는 앱을 만들 수 있다는 것 입니다.
다음에서는 확장 프로그램을 만드는 가장 쉬운 방법을 보여 드리겠습니다 . 웹 개발 (HTML, CSS, JS)에 대한 지식이 있다면 집에있는 것처럼 느껴질 것입니다.
전제 조건
이 자습서를 시작하기 전에 다음 요구 사항을 완료해야합니다.
- HTML, CSS 및 JavaScript에 익숙해야합니다 .
- 확장을 작성하려면 코드 편집기 가 있어야합니다 .
- (선택 사항) 확장 프로그램을 다른 사용자에게 배포하려면 Chrome 웹 스토어에 개발자 계정 이 있어야합니다 . [ 계정 만들기 4]
참고 : Google은 Chrome 웹 스토어에서 개발자 계정을 만드는 데 약간의 수수료를 지불하도록 요청합니다.
확장 만들기
이 튜토리얼에서는 Chrome 용 할 일 확장 프로그램 을 만드는 과정을 공유 할 것입니다 . 확장 기능에 제공되는 필수 구성 요소와 기능을 보여주는 유틸리티 (아래 그림 참조)가 될 것입니다.
Todoizr-Google 크롬 용 샘플 유틸리티1171 × 539
1 단계. 템플릿 가져 오기
Google 크롬은 다른 플랫폼과 마찬가지로 확장 프로그램이 설정된 구조를 가져야하며 이는 초보자에게 복잡해 보일 수 있습니다. 그렇기 때문에 모든 필수품을 제공하는 확장을위한 상용구 템플릿을 얻는 것이 좋습니다.
Extensionizr 1크롬 확장을위한 최고의 상용구 생성기 입니다. 브라우저 작업 (모든 페이지 또는 브라우저에 대한 작업 ), 페이지 작업 (현재 페이지에 대한 작업) 또는 숨겨진 확장 (일반적으로 앞쪽에 숨겨져있는 백그라운드 작업 ) 중 하나를 선택할 수 있습니다. 상호 작용).
Extensionizr은 최고의 상용구 생성기입니다.1200 × 859
또한 필요한 추가 기능, 권한 등 을 포함 / 제외 하는 다양한 미세 조정 옵션을 제공 합니다. 확장 유형으로 " 브라우저 작업 " 을 선택 하고이 자습서의 배경 페이지로 " 배경 없음 " 을 선택해야합니다 .
샘플 확장을 만들기위한 옵션을 선택했으면 "Download it!" Extensionizr의 버튼. 마지막으로 아카이브 (.zip)를 디렉토리에 추출하고 코드 편집기를 열어 확장 작성을 시작합니다.
2 단계. 확장 코드 작성
템플릿을 다운로드하고 압축을 풀면 아래 스크린 샷과 같은 디렉터리 구조가 표시됩니다. 템플릿은 깔끔하게 구성되어 있으며 가장 중요한 파일은 " manifest.json " 임을 알아야합니다 .
템플릿을 디렉터리에 추출956 × 536
이 디렉토리에있는 다른 파일과 폴더도 알아 봅시다.
- _locales : 다국어 앱의 언어 정보 를 저장 하는 데 사용됩니다 .
- css : Bootstrap과 같은 타사 프런트 엔드 라이브러리를 저장하는 기능을합니다.
- 아이콘 : 확장에 대한 아이콘을 다양한 크기로 갖도록 설계되었습니다.
- js : jQuery와 같은 타사 백엔드 라이브러리 를 저장하는 것이 편리합니다 .
- src : 확장을 위해 작성할 실제 코드를 저장합니다.
manifest.json
여기에는 브라우저에 대한 앱의 세부 정보를 정의하는 앱에 대한 기본 메타 데이터가 포함 됩니다. 브라우저 작업 및 권한과 같은 세부 사항과 함께 확장 프로그램의 이름, 설명, 웹 사이트, 아이콘 등을 설정하도록 수정할 수 있습니다 .
예를 들어 아래 코드에서 browser_action 아래의 default_title과 함께 이름, 설명 및 homepage_url을 변경했음을 알 수 있습니다. 또한 확장 프로그램에 데이터를 저장해야하므로 권한 아래에 "저장소"를 추가했습니다.
{
"name" : "Todoizr - To-do Simplified" ,
"version" : "0.0.1" ,
"manifest_version" : 2,
"description" : "Simple to-do app for everyone." ,
"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 파일 만 있었지만 명확성을 위해 파일을 세 개의 개별 파일로 나누기로 결정했습니다. 즉, " browser_action.html " 이라는 HTML 파일 에는 이제 다음 코드가 있습니다.
<!doctype html>
< html >
< head >
< link rel = "stylesheet" href = "./browser_action.css" />
</ head >
< body >
< div id = "mainPopup" >
</ div >
< script type = "text/javascript" src = "./browser_action.js" ></ script >
</ body >
</ html >
또한 " browser_action.css " 라는 스타일 파일 에는 다음 내용이 포함되어 있으며 "browser_action.js"라는 JavaScript 파일은 현재 비어 있습니다.
#mainPopup {
padding : 10px ;
height : 200px ;
width : 400px ;
font-family : Helvetica , Ubuntu, Arial , sans-serif ;
}
h 1 {
font-size : 2em ;
}
팝업 인터페이스 디자인
초기 프로젝트를 설정 한 후 먼저 팝업 인터페이스를 디자인 해 보겠습니다. 나는 한 최소한의 접근 방식으로 인터페이스를 설정 추가 된 항목을 볼 수 이하로 할 항목과 영역을 추가하는 형태로 다음 맨 위의 이름을 보여주는. " Form Style 5 " 의 단순한 디자인에서 영감을 얻었습니다 .
팝업 인터페이스 디자인1169 × 551
아래 코드에서 두 개의 div를 추가했습니다. 하나는 할 일 항목을 추가하는 양식을 표시하기위한 것이고 다른 하나는 이미 추가 된 할 일 항목의 목록을 표시하기위한 것입니다. 즉,“ browser_action.html ” 의 새 코드 는 다음과 같습니다.
<!doctype html>
< html >
< head >
< link rel = "stylesheet" href = "./browser_action.css" />
</ head >
< body >
< div id = "mainPopup" >
<!-- To-do item form -->
< div class = "form-style-5" id = "form" >
< h1 >Todoizr</ h1 >
< form >
< fieldset >
< input type = "text" name = "todo" placeholder = "What to do?" id = "txt" >
< input type = "button" value = "Add" id = "btn" />
</ fieldset >
</ form >
</ div >
<!-- To-do item list -->
< div class = "form-style-5" >
< ul id = "list" >
</ ul >
</ div >
</ div >
< script type = "text/javascript" src = "./browser_action.js" ></ script >
</ body >
</ html >
그리고 스타일 파일“ browser_action.css ”는 이제 다음 코드를 갖습니다.
@import url ( "./form_style_5.css" );
#mainPopup {
height : 200px ;
width : 300px ;
font-family : Helvetica , Ubuntu, Arial , sans-serif ;
}
/* To-do item form */
.form-style -5 {
margin : auto ;
padding : 0px 20px ;
}
.form-style -5: first-child {
background : none ;
}
.form-style -5 h 1 {
color : #308ce3 ;
font-size : 20px ;
text-align : center ;
}
.form-style -5 input[type= "text" ] {
width : auto ;
float : left ;
margin-bottom : unset;
}
.form-style -5 input[type= "button" ] {
background : #308ce3 ;
width : auto ;
float : right ;
padding : 7px ;
border : none ;
border-radius: 4px ;
font-size : 14px ;
}
.form-style -5 input[type= "button" ]:hover {
background : #3868d5 ;
}
/* To-do item list */
.form-style -5: last-child {
height : inherit;
margin-bottom : 5px ;
}
.form-style -5 ul {
padding : 20px ;
}
.form-style -5 ul li {
font-size : 14px ;
}
마지막으로 타사 스타일 파일“ form_style_5.css ”는 다음과 같은 내용을 가지고 있습니다. 확장 기능의 디자인에 영감을주기 위해 웹 사이트에서 가져온 것입니다.
/* Form Style 5 by Sanwebe.com */
/* https://www.sanwebe.com/2014/08/css-html-forms-designs */
.form-style -5 {
max-width : 500px ;
padding : 10px 20px ;
background : #f4f7f8 ;
margin : 10px auto ;
padding : 20px ;
background : #f4f7f8 ;
border-radius: 8px ;
font-family : Georgia, "Times New Roman" , Times, serif ;
}
.form-style -5 fieldset{
border : none ;
}
.form-style -5 legend {
font-size : 1.4em ;
margin-bottom : 10px ;
}
.form-style -5 label {
display : block ;
margin-bottom : 8px ;
}
.form-style -5 input[type= "text" ],
.form-style -5 input[type= "date" ],
.form-style -5 input[type= "datetime" ],
.form-style -5 input[type= "email" ],
.form-style -5 input[type= "number" ],
.form-style -5 input[type= "search" ],
.form-style -5 input[type= "time" ],
.form-style -5 input[type= "url" ],
.form-style -5 textarea,
.form-style -5 select {
font-family : Georgia, "Times New Roman" , Times, serif ;
background : rgba( 255 , 255 , 255 ,. 1 );
border : none ;
border-radius: 4px ;
font-size : 16px ;
margin : 0 ;
outline : 0 ;
padding : 7px ;
width : 100% ;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
background-color : #e8eeef ;
color : #8a97a0 ;
-webkit-box-shadow: 0 1px 0 rgba( 0 , 0 , 0 , 0.03 ) inset ;
box-shadow: 0 1px 0 rgba( 0 , 0 , 0 , 0.03 ) inset ;
margin-bottom : 30px ;
}
.form-style -5 input[type= "text" ]:focus,
.form-style -5 input[type= "date" ]:focus,
.form-style -5 input[type= "datetime" ]:focus,
.form-style -5 input[type= "email" ]:focus,
.form-style -5 input[type= "number" ]:focus,
.form-style -5 input[type= "search" ]:focus,
.form-style -5 input[type= "time" ]:focus,
.form-style -5 input[type= "url" ]:focus,
.form-style -5 textarea:focus,
.form-style -5 select:focus{
background : #d2d9dd ;
}
.form-style -5 select{
-webkit-appearance: menulist-button;
height : 35px ;
}
.form-style -5 .number {
background : #1abc9c ;
color : #fff ;
height : 30px ;
width : 30px ;
display : inline- block ;
font-size : 0.8em ;
margin-right : 4px ;
line-height : 30px ;
text-align : center ;
text-shadow : 0 1px 0 rgba( 255 , 255 , 255 , 0.2 );
border-radius: 15px 15px 15px 0px ;
}
.form-style -5 input[type= "submit" ],
.form-style -5 input[type= "button" ]
{
position : relative ;
display : block ;
padding : 19px 39px 18px 39px ;
color : #FFF ;
margin : 0 auto ;
background : #1abc9c ;
font-size : 18px ;
text-align : center ;
font-style : normal ;
width : 100% ;
border : 1px solid #16a085 ;
border-width : 1px 1px 3px ;
margin-bottom : 10px ;
}
.form-style -5 input[type= "submit" ]:hover,
.form-style -5 input[type= "button" ]:hover
{
background : #109177 ;
}
팝업 논리 작성
확장의 프런트 엔드를 완료했으면 이제 작동을위한 논리를 작성해 보겠습니다. 할 일 항목 을 추가 하고 팝업 창에 표시 하려면 확장 프로그램이 필요합니다 . 따라서 버튼 클릭 리스너를 추가하여 입력 텍스트를 할 일 항목으로 추가하고 페이지로드 리스너를 추가하여 해당 항목을 표시합니다.
아래 코드에서는 " chrome.storage "의 일부인 sync.get () 및 sync.set () 두 가지 함수를 사용 합니다. 두 번째 항목은 할 일 항목을 저장소에 저장하고 첫 번째 항목은 검색하여 표시해야합니다.
즉, 다음은“ browser_action.js ”파일 의 최종 코드입니다 . 아래에서 볼 수 있듯이 코드는 그 목적을 이해하는 데 도움이되도록 많은 주석이 달려 있습니다.
function loadItems() {
/* First get() the data from the storage */
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)
}
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의 기능을 통해 테스트 할 차례입니다. 하지만 먼저, 당신은해야한다 개발자 모드 활성화 브라우저에서를 다음 클릭 옵션 버튼 > "을 선택 더 많은 도구 " > 확장 전환 "에 다음과 개발자 모드 ".
Google 크롬에서 압축을 푼 확장 프로그램로드1200 × 358
이제 검색 창 아래에 더 많은 버튼이 표시됩니다. 여기에서“ Load unpacked ”버튼을 클릭하십시오 . 디렉토리를 묻습니다. 확장 프로그램의 디렉토리를 찾아 선택하면 확장 프로그램이로드됩니다. 확장 코드를 수정하거나 업데이트하는 경우 새로 고침 버튼을 클릭 하여 최신 변경 사항을로드 할 수 있습니다 .
새로 고침 버튼은 최신 변경 사항을로드합니다.1200 × 360
이 예에서는 샘플 확장에 브라우저 작업을 추가했기 때문에 프로필 아이콘 옆에 확장 아이콘이 표시됩니다 . 해당 아이콘을 클릭 하면 지정된 작업이므로 확장에서 할 일 항목 을 추가하고 볼 수 있습니다 .
Google 크롬에서 Todoizr 아이콘을 클릭하세요.1171 × 539
확장 배포
Chrome 웹 스토어에 확장 프로그램을 업로드하는 것은 쉽지만 모든 세부 정보를 다루기에는 너무 깁니다. 간단히 말해서 개발자 계정을 만들고 확장 프로그램을 패키징 한 다음 콘텐츠 세부 정보 (예 : 이름, 아이콘, 스크린 샷 등)와 함께 제출합니다. 로 그에 나와있는 단계별 가이드 .
다음은? 읽기 및 코딩
예상 하셨겠지만이 튜토리얼의 목적은 Google 크롬 용 확장 프로그램 개발을 시작하는 것입니다. 나는 기본 개념을 다루려고 노력했습니다. 그러나 진지한 확장 개발을 위해서는 더 많은 것을 알아야합니다 .
즉, 다음은 Google Chrome 및 기타 Chromium 기반 브라우저 용 확장 프로그램을 개발하는 방법을 배우기 위해 제가 가장 좋아하는 몇 가지 리소스 입니다.
- 확장 기능 의 모든 기능, 구성 요소 및 기능 .
- 샘플 확장 1 Google Chrome 팀에서 제공합니다.
이러한 리소스를 살펴보고 도전 할 준비가 되었으면 방금 개발을 완료 한 확장 기능에 아래 기능을 추가해보세요.
- 저장된 할 일 항목을 삭제하는 옵션입니다.
- 항목 추가 완료시 알림을 표시하는 기능입니다.
가장 인기있는 브라우저를위한 첫 번째 확장 프로그램을 개발하는 것입니다. (Source: hongkiat)
'Study > 개발 Tip' 카테고리의 다른 글
| [개발 Tool] 웹 개발자들을 위한 10개의 크롬 확장 프로그램 공개 (0) | 2021.04.07 |
|---|---|
| [개발 Tip] 모든 프로그래밍 관련 질문을 해결 할 수 있는 10개의 사이트 공개 (0) | 2021.04.07 |
| [개발 Tool] 개발자라면 반드시 알아야 할 최고의 11가지 소프트웨어 개발 도구 (0) | 2021.04.07 |
| [개발 Tool] 웹 디자이너 및 개발자를 위한 새로운 리소스 모음 (0) | 2021.04.07 |
| [개발 Tool] 프로그래밍을 위한 개발자 필수 툴 25가지 (0) | 2021.04.07 |
|
|
|
|
|