구글 크롬 웹 브라우저에서 크롬 확장 프로그램을 사용해 본 적이 있나요? 저는 개인적으로 수많은 확장 프로그램을 사용하고 있으며, 그중 가장 좋아하는 확장 프로그램은 다음과 같습니다. ColorZilla 그리고 Google 행아웃. 나만의 Chrome 확장 프로그램, 더 나아가 원격 데이터 소스와 데이터를 동기화하는 Chrome 확장 프로그램을 만들고 싶었던 적이 있나요?
Chrome 확장 프로그램은 자바스크립트 애플리케이션일 뿐이며, 자바스크립트 개발자로서 우리는 멋진 무언가를 만드는 데 필요한 모든 기술을 갖추고 있습니다.
다음을 사용하여 브라우저와 기기 간에 쇼핑 목록 데이터를 동기화하는 Google Chrome 확장 프로그램을 만드는 방법을 살펴보겠습니다. 앵귤러 2, PouchDB및 카우치베이스.
요구 사항
계획된 팝업 확장을 만들려면 몇 가지 요구 사항이 있습니다. 다음과 같습니다:
- Node.js 4.0+
- 앵귤러 CLI
- 카우치베이스 동기화 게이트웨이 1.3+
Angular 2를 사용하여 확장 기능을 구축하기 때문에 Node.js에 있는 Node 패키지 관리자(NPM)를 통해 제공되는 Angular CLI가 필요합니다. 이 예제에서는 Couchbase Server를 사용하지 않지만, 곧 생성될 Couchbase 동기화 게이트웨이 구성 파일에 쉽게 추가할 수 있습니다. 대신 동기화 게이트웨이와 함께 제공되는 인메모리 스토리지 솔루션을 사용할 것이며 동기화 게이트웨이를 사용하여 브라우저, 장치, 플랫폼 및 Couchbase Server 간에 데이터를 동기화할 것입니다.
데이터 복제를 위한 Couchbase 동기화 게이트웨이 준비하기
카우치베이스를 사용하는 크롬 확장 프로그램을 만드는 방법에는 여러 가지가 있습니다. 이 예제에서는 하나의 애플리케이션만 만들기 위해 자바스크립트와 Couchbase 동기화 게이트웨이를 사용하여 클라이언트용 애플리케이션을 만들겠습니다. 다른 예로는 클라이언트 애플리케이션이 통신하는 백엔드 서비스를 포함할 수 있으며, 이 백엔드 서비스는 Couchbase와 통신할 것입니다.
Chrome 확장 프로그램은 애플리케이션이므로 데이터를 오케스트레이션하는 방법을 알 수 있도록 동기화 게이트웨이에 대한 구성이 필요합니다. 가장 간단한 형태의 구성은 다음과 같습니다:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
{ "log":["CRUD+", "REST+", "변경 사항+", "Attach+"], "데이터베이스": { "예제": { "서버":"월러스:", "동기화":` 함수 (doc) { 채널 (doc.채널); } `, "users": { "GUEST": { "disabled": false, "admin_channels": ["*"] } } } }, "CORS": { "Origin": ["http://localhost:4200", "크롬 확장://ecfgpjabjmlpkedejekaipjipddddohj"], "LoginOrigin": ["http://localhost:4200", "크롬 확장://ecfgpjabjmlpkedejekaipjipddddohj"], "헤더": ["콘텐츠 유형"], "MaxAge": 17280000 } } |
위의 구성은 다음과 같은 파일에 저장됩니다. 동기화 게이트웨이-config.json 를 클릭하고 동기화 게이트웨이를 시작할 때 로드됩니다.
구성에서는 다음과 같은 데이터베이스를 사용하고 있습니다. 예제 특정 읽기 또는 쓰기 권한이 없습니다. CORS 섹션은 자바스크립트 애플리케이션의 필수 요건인 교차 출처 리소스 공유를 위한 섹션입니다. 즉, 테스트 중에 Angular 2 애플리케이션인 4200 포트와 Chrome 확장 프로그램의 주소로부터의 연결을 허용하고 싶다는 것입니다.
동기화 게이트웨이 다운로드 를 클릭하고 다음을 실행하여 실행합니다:
|
1 |
/경로/에/동기화 게이트웨이 /경로/에/동기화-게이트웨이-구성.json |
위의 내용은 http://localhost:4985/_admin/ 에서 동기화 게이트웨이 서비스를 시작합니다.
부트스트랩과 Angular 2로 새 애플리케이션 만들기
간단하게 하기 위해 새 Angular 2 프로젝트를 시작하고 나중에 Chrome 확장 프로그램에 번들로 묶어 보겠습니다. Angular CLI에서 다음 명령을 실행합니다:
|
1 |
ng new 앵귤러 프로젝트 |
위의 명령은 바로 사용할 수 있는 Angular 2 프로젝트를 생성합니다. 끔찍한 UI를 만들지 않기 위해 널리 사용되는 부트스트랩 프레임워크를 사용하는 것이 좋습니다. 다른 프레임워크도 많이 있으며, 이전 예제 중 하나에서는 Ionic을 프레임워크로 사용하기도 했습니다.
Angular 2가 반드시 종속성과 잘 맞지는 않기 때문에 이 과정은 약간 수동으로 진행해야 하지만 부트스트랩, jQuery및 부트박스.
자바스크립트 파일을 프로젝트의 src/assets/js/ 디렉토리에 있는 CSS 파일을 프로젝트의 src/assets/css/ 디렉토리에 있는 폰트 파일과 프로젝트의 src/assets/fonts/ 디렉터리로 이동합니다.
부트스트랩은 CSS 프레임워크가 되지만 jQuery에 종속됩니다. 부트박스는 애플리케이션에 대한 팝업 프롬프트를 편리하게 만들 수 있는 방법을 제공합니다. 부트스트랩과 jQuery를 기반으로 합니다.
기존 방식으로 프로젝트에 부트스트랩을 추가해야 합니다. 프로젝트의 src/index.html 파일을 열고 다음과 같이 만듭니다:
|
1 2 3 4 5 6 7 8 9 10 11 |
<!doctype html> 카우치베이스 쇼핑 로드 중... |
다운로드한 CSS 및 JavaScript 파일을 가져오는 중입니다.
이 시점에서 코딩을 시작할 수 있지만, 그 전에 이 프로젝트 전체에서 사용될 종속성을 몇 가지 더 확보하는 것이 좋습니다.
명령 프롬프트(Windows) 또는 터미널(Mac 및 Linux)을 사용하여 다음을 실행합니다:
|
1 2 3 |
npm 설치 파우치DB --저장 npm 설치 uuid @유형/uuid --저장 npm 설치 @유형/노드 --저장 |
위의 명령은 Couchbase 동기화 게이트웨이에서 데이터를 복제하는 데 사용할 PouchDB를 설치합니다. 문서 키로 사용할 고유 ID 값을 생성하기 위해 UUID 종속성을 사용하고, PouchDB 라이브러리를 프로젝트로 가져올 수 있도록 Node 종속성을 사용할 것입니다. PouchDB에는 타입스크립트 타입 정의가 없으므로 노드 종속성이 필요합니다.
이제 확장 기능의 기반이 되는 애플리케이션 개발을 시작해 보겠습니다.
Angular 2와 PouchDB로 공유 프로바이더 개발하기
지난 몇 개의 튜토리얼을 보셨다면 익숙하실 것입니다. Angular 2 애플리케이션에서 데이터로 작업할 때는 로직을 애플리케이션의 나머지 부분과 분리하는 것이 좋습니다. 이를 위해 PouchDB를 감싸고 애플리케이션 전체에서 사용할 수 있는 공유 Angular 2 공급자를 생성하면 됩니다.
파일을 만듭니다, src/app/pouchdb.service.ts 를 생성하고 다음 TypeScript 로직을 포함합니다:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
가져오기 { 주사제, 이벤트 이미터 } 에서 '@angular/core'; var PouchDB = require("pouchdb"); @주사제() 내보내기 클래스 파우치 서비스 { 비공개 isInstantiated: 부울; 비공개 데이터베이스: any; 비공개 리스너: 이벤트 이미터 = new 이벤트 이미터(); public 생성자() { 만약(!이.isInstantiated) { 이.데이터베이스 = new PouchDB("nraboy"); 이.데이터베이스.변경 사항({ 라이브: true, include_docs: true }).on('change', 변경 => { 이.리스너.emit(변경); }); 이.isInstantiated = true; } } public get(id: 문자열) { 반환 이.데이터베이스.get(id); } public put(문서: any, id: 문자열) { 문서._id = id; 반환 이.get(id).다음(결과 => { 문서._rev = 결과._rev; 반환 이.데이터베이스.put(문서); }, 오류 => { 만약(오류.상태 == "404") { 반환 이.데이터베이스.put(문서); } else { 반환 new 약속((해결, 거부) => { 거부(오류); }); } }); } public 동기화(원격: 문자열) { let 원격 데이터베이스 = new PouchDB(원격); 이.데이터베이스.동기화(원격 데이터베이스, { 라이브: true, 다시 시도: true }); } public getChangeListener() { 반환 이.리스너; } } |
많은 일이 일어나고 있으므로 잠시 시간을 내어 분석해 보겠습니다.
|
1 2 |
가져오기 { 주사제, 이벤트 이미터 } 에서 '@angular/core'; var PouchDB = require("pouchdb"); |
이 공급자를 각 확장 페이지에 삽입할 계획입니다. PouchDB에는 변경 리스너가 있으므로 페이지가 구독할 수 있도록 변경 사항을 방출하려고 합니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
public 생성자() { 만약(!이.isInstantiated) { 이.데이터베이스 = new PouchDB("nraboy"); 이.데이터베이스.변경 사항({ 라이브: true, include_docs: true }).on('change', 변경 => { 이.리스너.emit(변경); }); 이.isInstantiated = true; } } |
목표는 로컬 데이터베이스의 단일 인스턴스를 갖는 것입니다. 데이터베이스를 열고 변경 이미터를 구성한 후에는 다시 열 수 없도록 데이터베이스가 열려 있다는 기록을 저장하고 싶습니다. 이 작업은 생성자 메서드를 사용합니다.
PouchDB에 저장하는 데는 한 줄도 걸리지 않지만, 업서트하려면 조금 더 많은 시간이 걸립니다:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
public put(문서: any, id: 문자열) { 문서._id = id; 반환 이.get(id).다음(결과 => { 문서._rev = 결과._rev; 반환 이.데이터베이스.put(문서); }, 오류 => { 만약(오류.상태 == "404") { 반환 이.데이터베이스.put(문서); } else { 반환 new 약속((해결, 거부) => { 거부(오류); }); } }); } |
수정하려면 문서가 이미 존재하는지 확인해야 합니다. 문서가 있다면 수정본을 캡처하여 업데이트합니다. 문서가 존재하지 않으면 문서를 새로 만듭니다.
|
1 2 3 4 5 6 7 |
public 동기화(원격: 문자열) { let 원격 데이터베이스 = new PouchDB(원격); 이.데이터베이스.동기화(원격 데이터베이스, { 라이브: true, 다시 시도: true }); } |
동기화하려고 하므로 동기화 메서드를 사용하여 원격 데이터베이스를 가져옵니다. 원격 데이터베이스는 카우치베이스 동기화 게이트웨이입니다. 활성화하면 양방향으로 지속적으로 동기화됩니다.
|
1 2 3 |
public getChangeListener() { 반환 이.리스너; } |
마지막으로 getChangeListener 메서드를 호출하여 변경 이벤트 이미터를 검색하고 구독할 수 있습니다.
공급자를 사용하려면 먼저 프로젝트의 @NgModule 블록을 클릭합니다. 프로젝트의 src/app/app.module.ts 파일을 열고 다음을 포함하세요:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
가져오기 { 브라우저 모듈 } 에서 '@각/플랫폼-브라우저'; 가져오기 { NgModule } 에서 '@angular/core'; 가져오기 { 폼 모듈 } 에서 '@각형/양식'; 가져오기 { HttpModule } 에서 '@angular/http'; 가져오기 { 앱 컴포넌트 } 에서 './app.component'; 가져오기 { 파우치 서비스 } 에서 "./pouchdb.service"; @NgModule({ 선언: [ 앱 컴포넌트 ], 수입: [ 브라우저 모듈, 폼 모듈, HttpModule ], 공급자: [파우치 서비스], 부트스트랩: [앱 컴포넌트] }) 내보내기 클래스 앱 모듈 { } |
참고 파우치 서비스 를 가져와서 공급자 배열의 @NgModule 블록을 추가합니다. 이 시점에서 공급자는 확장 프로그램의 모든 페이지에서 사용할 수 있습니다.
애플리케이션 빌드 및 Chrome 확장 프로그램 데이터 추가
이 프로젝트 내에서 수행해야 할 몇 가지 작업이 있습니다. 확장 팝업에 대한 Angular 2 기능을 추가해야 하며, 웹 애플리케이션으로 남겨두지 말고 실제 Google Chrome 확장 프로그램으로 패키징해야 합니다.
Angular 2 애플리케이션 페이지 만들기
우리가 구축하는 확장 프로그램은 단일 페이지로만 구성됩니다. 이 페이지에는 사용자 지정 HTML 및 CSS 인터페이스와 이를 구동하는 로직이 있습니다.
타입스크립트부터 시작해서 프로젝트의 src/app/app.component.ts 파일을 열고 다음 TypeScript를 포함합니다:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
가져오기 { 구성 요소, OnInit, NgZone } 에서 '@angular/core'; 가져오기 * as Uuid 에서 "uuid"; 가져오기 { 파우치 서비스 } 에서 "./pouchdb.service"; 선언 var 부트박스: any; @구성 요소({ 선택기: 'app-root', templateUl: './app.component.html', styleUrls: ['./app.component.css'] }) 내보내기 클래스 앱 컴포넌트 구현 OnInit { public 항목: 배열; public 생성자(비공개 데이터베이스: 파우치 서비스, 비공개 영역: NgZone) { 이.항목 = []; } public ngOnInit() { 이.데이터베이스.동기화("http://localhost:4984/example"); 이.데이터베이스.getChangeListener().구독(데이터 => { 이.영역.실행(() => { 이.항목.push(데이터.doc); }); }); } public 삽입() { 부트박스.프롬프트("무엇을 추가하고 싶으신가요?", 결과 => { 만약(결과) { 이.데이터베이스.put({유형: "목록", title: 결과}, Uuid.v4()); } }); } } |
위의 TypeScript에서는 몇 가지 Angular 2 컴포넌트, 우리가 만든 PouchDB 공급자, 고유 문서 키를 생성하기 위한 UUID 라이브러리를 가져오고 있습니다.
다음을 포함하기로 결정한 방식에 따라 부트박스로 선언해야 합니다. any 를 사용하여 TypeScript 오류를 방지하세요. TypeScript 애플리케이션에 JavaScript 브라우저 기반 라이브러리를 포함하는 방법에 대한 자세한 내용은 다음을 참조하세요. 여기.
각 쇼핑 항목은 항목 배열입니다. HTML 마크업에서 액세스할 수 있도록 공개되어 있습니다. 그리고 생성자 메서드는 이 배열을 초기화할 뿐만 아니라 페이지에 PouchDB 서비스와 NgZone을 삽입합니다. 이벤트 리스너 내에서 UI를 업데이트할 때 NgZone을 사용하겠습니다.
내에서 데이터를 로드하는 것은 잘못된 관행이므로 생성자 메서드 내에서 로드합니다. ngOnInit 메서드를 호출합니다. 이벤트 리스너를 구독하고 원격 서버의 변경 사항을 동기화하여 데이터를 로드합니다.
마지막으로 부트박스를 삽입 메서드를 호출하여 데이터를 요청하고 데이터베이스에 저장합니다. 동기화하면 데이터가 저장된 다음 Couchbase에 복제됩니다.
이 로직의 배후에 있는 HTML UI는 src/app/app.component.html file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div> <탐색 클래스="navbar navbar-default navbar-fixed-top" 스타일="배경색: #CC2A2E;"> <div 클래스="navbar-header"> <span 클래스="navbar-brand" 스타일="색상: #FFFF">카우치베이스 쇼핑</span> </div> </탐색> <ul 클래스="list-group" 스타일="여백 상단: 52px"> <li 클래스="목록-그룹-아이템" *ngFor="항목의 항목">{{ 항목.title }}</li> </ul> <a (클릭)="insert()" 클래스="btn btn-circle btn-primary" 스타일="위치: 고정; 하단: 10px; 오른쪽: 10px"> <span 클래스="글리피콘 글리피콘 플러스"></span> </a> </div> |
부트스트랩과 사용자 정의 CSS를 사용하여 UI에는 데이터 목록이 있는 작업 표시줄이 있습니다. 데이터 목록은 항목 배열에 추가되며 플로팅 버튼을 통해 추가됩니다. 플로팅 버튼에는 다음과 같은 CSS가 있으며 프로젝트의 src/app/app.component.css file:
|
1 2 3 4 5 6 7 8 9 10 |
/* http://bootsnipp.com/snippets/8deZ */에서 가져옴 .btn-서클 { 너비: 35px; 높이: 35px; 텍스트-정렬: center; 패딩: 2px 0; 글꼴-크기: 20px; 라인-높이: 1.65; border-반경: 30px; } |
클릭하면 버튼이 트리거됩니다. 삽입 메서드를 호출합니다. 이 시점에서 우리는 다음과 같이 복제되는 완전한 기능을 갖춘 Angular 2 웹 애플리케이션을 갖게 되었습니다. 카우치베이스. 하지만 저희의 목표는 구글 크롬 확장 프로그램으로 만드는 것입니다.
Google 크롬 배포를 위한 준비 및 패키징
Chrome 확장 프로그램을 만들 때는 최소한 두 가지가 필요합니다. 확장 프로그램 아이콘과 매니페스트 파일이 있어야 합니다. 품질을 높이려면 다양한 크기의 아이콘이 있어야 하지만 간단하게 하기 위해 하나만 사용하겠습니다.
Angular 2 프로젝트 외부에서 새 프로젝트를 만듭니다. 이름을 내 크롬 확장 프로그램. 하고 싶은 일은 Angular 2 프로젝트를 이 새로운 Chrome 확장 프로젝트에 빌드하는 것입니다. 예를 들어 다음과 같은 작업을 수행합니다:
|
1 |
ng 빌드 --출력-경로=/경로/에/내 크롬 확장 프로그램/ |
성공하면 패키징된 모든 Angular 2 프로젝트 파일은 사용자의 내 크롬 확장 프로그램 디렉터리를 만듭니다. 같은 디렉터리 내에 manifest.json 파일을 다음과 같이 수정합니다:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
{ "매니페스트_버전": 2, "name": "카우치베이스 쇼핑", "설명": "구글 크롬 확장 프로그램에서 카우치베이스와 동기화", "버전": "1.0", "browser_action": { "default_icon": "icon.png", "default_popup": "index.html" }, "권한": [], "콘텐츠_보안_정책": "스크립트-src 'self' 'unsafe-eval'; 오브젝트-src 'self'", "웹 접근 가능 리소스": [ "assets/css/*", "assets/js/*", "assets/fonts/*" ] } |
위의 매니페스트 파일에는 몇 가지 중요한 부분이 있습니다. 확장 아이콘은 다음과 같습니다. icon.png 프로젝트의 루트에서 찾을 수 있습니다. 아직 아이콘을 만들지 않았다면 PNG 형식의 128×128 아이콘을 만드세요. Chrome 툴바에서 아이콘을 클릭하면 실행되는 페이지는 index.html 파일을 생성해야 하며, 이 파일은 Angular 2 프로젝트를 빌드할 때 생성되어야 합니다.
기본적으로 파일을 지정하지 않으면 파일을 사용할 수 없습니다. 목록을 정의하여 웹 접근 가능 리소스 확장 프로그램에서 부트스트랩이 남긴 자바스크립트, CSS, 글꼴을 사용할 수 있도록 허용한다는 의미입니다.
우리는 콘텐츠_보안_정책 프로젝트의 JavaScript가 패키지 외부의 서비스와 통신하기 때문입니다. 더 구체적으로 말하면, Couchbase 동기화 게이트웨이입니다.
Chrome 브라우저에 확장 프로그램을 설치하려면 Chrome을 열고 확장 프로그램 관리자로 이동합니다.
상단에서 개발자 확장 프로그램을 사용 설정한 다음 내 크롬 확장 프로그램 확장 프로그램 디렉토리의 압축을 풉니다. 확장 프로그램을 로드하면 다른 확장 프로그램과 마찬가지로 크롬 도구 모음에 확장 프로그램이 배치됩니다.
전체 패키지 보기
이 구글 크롬용 앵귤러 2 확장 프로그램과 관련해서는 고려해야 할 사항이 많았습니다. 저는 프로젝트를 업로드했습니다. 를 테스트해보고 싶으시다면 GitHub로 이동하세요.
프로젝트를 다운로드하고 앵귤러 익스텐션 디렉터리를 만듭니다. 해당 디렉토리에서 다음을 실행합니다:
|
1 2 |
npm 설치 ng 빌드 --출력-경로=../public |
일단 public 디렉터리가 생성되면 매니페스트 및 아이콘 파일을 공개 디렉터리에 복사합니다. 그런 다음 Google 크롬에 로드할 수 있습니다.
결론
방금 Couchbase를 사용하여 데이터를 복제하는 Angular 2로 Google Chrome 확장 프로그램을 만드는 방법을 살펴보았습니다. 이 프로젝트는 Google Chrome 패키징이 적용된 Angular 2 애플리케이션이지만 이러한 확장 프로그램을 만드는 것이 얼마나 쉬운지 보여줬습니다.
앞서 언급했듯이 다양한 사용 방법이 있습니다. 카우치베이스 를 사용할 수 있습니다. PouchDB와 동기화 게이트웨이를 사용할 수도 있고, HTTP 요청과 동기화 게이트웨이를 사용할 수도 있고, Couchbase SDK를 사용하여 자체 웹 API를 만들 수도 있습니다.
