Chrome Extension 개발 과정

Chrome Extension 개발 과정

2021. 8. 4. 23:26ㆍ프로그래밍/Chrome Extension

요새 근황은 일단...

운전 면허를 준비중이다. 구직도 생각중이다.

원티드와 잡코리아 보면서 눈팅하고 있다.

면허 관련해서 스케줄이 늘어나다보니 메모할 수 있는 간단한 크롬 확장프로그램을 만들어볼까 생각중이다.

Chrome Extension을 시작하는 가장 좋은 방법

https://developer.chrome.com/docs/extensions/mv3/getstarted/

Getting started - Chrome Developers

Step-by-step instructions on how to create a Chrome Extension.

developer.chrome.com

역시 공식 튜토리얼이 최고가 아닐까?

근데 솔직히 좀 불친절하다. 일단 시작할 때 프로젝트를 어떻게 만드는지도 안 알려준다.

그래도 완성 코드도 올려주니까 한 번 보면서 만들면 좋다.

새 프로젝트를 만드는 법

정말 간단하다. 새 폴더를 만든 다음, manifest.json파일을 만든다.

그 안에 다음과 같이 적는다.

간단한 설명을 하자면

- name: 앱의 이름 (표시되는 이름)
-description: 설명 (설명란에 표시됨)
- version: 표시되는 버전
- manifest_version: 이 manifest의 버전. 업데이트를 할 때, manifest_version이 그대로라면 업데이트가 되지 않는다.

이제 이걸 업로드 하면 바로 사용할 수 있다.

Chrome Extension을 업로드 해보자.

chrome://extensions

위의 주소로 들어가면, 내 확장 프로그램을 볼 수 있다. (당연하지만 Chrome에서만 가능)

여기서 화면 상단 오른쪽의 개발자 모드를 켠다.

이제 '압축해제된 확장 프로그램을 로드합니다.'를 누르고,
위에서 만든 manifest.json이 포함된 폴더를 선택한다.

이런 식으로 업로드가 된다.

고정을 하면, 이런 식으로 표시도 된다.

백그라운드 작업을 추가해보자.

우선 공식 튜토리얼에 있는 이 코드를 보자.

let color = '#3aa757';

chrome.runtime.onInstalled.addListener(() => {
  chrome.storage.sync.set({ color });
  console.log('Default background color set to %cgreen', `color: ${color}`);
});

눈치가 빠르면 알 수 있지만, 말 그대로 onInstalled, 설치가 되었을 때의 리스너를 추가하는 것이다.

쉽게 말하면 설치될 때 실행이 되는 부분이다.

이를 활용해서, 우리의 백그라운드 작업을 만들어보자.

우선 manifest.json이 있는 폴더에 background.js를 만들고, 다음과 같이 작성한다.

// background.js
chrome.runtime.onInstalled.addListener(() => {
  chrome.storage.sync.set({ memos: [] });
  console.log('Memo inited!');
});

그 다음, 이 background.js가 이 확장프로그램에서 처리가 되게 해야한다.

이러한 사양은 manifest.json에서 명시한다.

// manifest.json
{
  "name": "인호의 메모장",
  "description": "간단한 메모장 기능",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  }
}

background 항목이 추가되었다.

Permission을 추가해보자.

permission이란 말 그대로 권한이다.

어떤 권한이 있는지는 다음의 사이트를 보자

https://developer.chrome.com/docs/extensions/mv3/declare_permissions/

Declare permissions - Chrome Developers

An overview of the valid values for the permissions property in manifest.json.

developer.chrome.com

우리는 위에서 chrome.storage.sync를 통해 storage를 사용하기 때문에,
storage api를 얻기 위해 권한을 요청해야 한다.

{
  "name": "인호의 메모장",
  "description": "간단한 메모장 기능",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["storage"]
}

permission을 추가했다.

유저 인터페이스를 추가하자

여기서 유저 인터페이스란, 아이콘을 클릭했을 때 나오는 팝업화면을 말한다.

예시로 이런게 있다. 집중할 때 유투브, 인스타, 페북 등을 차단해놓을 때 쓰는 확장 프로그램이다.

우선 html 파일을 하나 만든다. (popup.html)

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="button.css">
  </head>
  <body>
    <button id="changeColor"></button>
  </body>
</html>

그다음, manifest.json을 수정해준다.

{
  "name": "인호의 메모장",
  "description": "간단한 메모장 기능",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["storage"],
  "action": {
    "default_popup": "popup.html"
  }
}

이런 식으로 버튼이 하나 생겼다. 쏘 큐트.

저작자표시

'프로그래밍 > Chrome Extension' 카테고리의 다른 글

chrome에 빨간줄 뜰 때 해결 방법 (0)	2023.01.25
Chrome Extension 프로젝트 세팅 (React, Typescript, Webpack) (0)	2023.01.15
크롬 익스텐션 생성에서 실행까지 (0)	2021.11.12
React에서 Chrome API를 사용해보자. (with chrome.storage) (0)	2021.08.19
Chrome Extension에 React 적용하기 (0)	2021.08.18

금붕어의 일기장