안녕하세요!
이번 글에서는 chrome extension을 이용해 프로그램을 만들면서 사용법을 익혀보겠습니다.
하나의 프로그램이 완성될 때 까지 계속 이어서 작성될 예정입니다.
Motivation
Github에서 PR을 작성할 때 어떤것을 수정했는지 시각적으로 보여주면 편할때가 많습니다.
text만 써놓게 되면 기존의 맥락을 모르기 때문에 리뷰하기가 어렵습니다. 하지만 table 같은것을 이용해 어떤 부분이 변경되었는지 보여주면 팀원들이 리뷰할때 더 편합니다.
table 마크다운을 매번 복붙하기도 번거로워서 만들게 되었습니다.
(매일 같은 공부 보다는 기분 전환을 위해 만든것이긴 합니다 ㅎㅎ)
Sample
아직 추가해야할 기능은 많지만, 혼자 사용하기에는 무리가 없어서 글로 남기게 되었습니다.
https://github.com/rbals0445/Github-Text-Replacer
GitHub - rbals0445/Github-Text-Replacer
Contribute to rbals0445/Github-Text-Replacer development by creating an account on GitHub.
github.com
Task
chrome extension을 만들어 본 적은 없지만, 우선 어떤 기능이 필요한지 생각했습니다.
- key, value 형태로 chrome extension에서 등록한다.
- 등록한 값들은 chrome에서 제공해주는 storage api를 이용해 영구적으로 저장되게 한다.
- 백그라운드 환경에서 keydown 이벤트를 인식할 수 있어야 한다.
- 텍스트를 드래그하고 특정 key('.')를 입력하면 내가 등록한 값으로 변경해준다.
- 현재 포커스 되어있는 화면의 텍스트를 바꿔야한다.
굉장히 간단해 보였지만, 하나의 기능을 할때마다 계속 막혔습니다.
폴더 구조
├── LICENSE
├── README.md
├── icons
│ └── ddabong.png
├── index.html
├── manifest.json
├── src
└── popup.js
popup 이란
https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/
Chrome Extension development basics - Chrome for Developers
What to expect during the development of a Chrome extension.
developer.chrome.com
아무것도 할 줄 몰랐기 때문에 공식 문서의 getting started와 같은곳을 읽으며 하나씩 따라했습니다.
popup은 chrome extension을 클릭했을때 나오는 화면을 말합니다.
이 부분이 하나의 웹페이지와 같다는 것을 이번에 처음 알게 됐습니다.
popup 및 manifest file 설정
chrome extension에 필수인 파일입니다.
해당 extension이 어떤 역할을 하는지 설명하고, 다양한 속성들을 정의합니다. 환경설정 파일과 같다고 생각하면 됩니다.
버전은 최신 버전인 3버전을 사용합니다.
(주의. manifest.json 파일은 항상 root directory에 있어야 합니다)
{
"manifest_version": 3,
"name": "Github Text Replacer",
"description": "Replaces text on github. you can use anywhere",
"version": "1.0",
"action": {
"default_popup": "index.html",
"default_icon": "./icons/ddabong.png"
}
}
여기서 defeault_popup, default_icon에 대해서 알아보겠습니다.
default_icon
- chrome extension icon을 지정합니다.
default_popup
- extension을 클릭했을때 보여줄 html 파일을 설정합니다.
- popup.js 라는 js 파일도 하나 import 했습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<label>input</label>
<input id="input" type="text" />
<label>output</label>
<input id="output" type="text" />
<script src="./src/popup.js" type='module'></script>
</body>
</html>
이렇게 html 파일을 설정하고 확인해 보겠습니다.
로컬 환경에서 확인하기
- chrome://extensions 으로 먼저 이동합니다.
- 개발자 모드를 ON 합니다
- 압축 해제된 확장 프로그램을 로드합니다. 이때 내가 만든 폴더를 통째로 올립니다.
정상적으로 로드 했다면 아래처럼 extension이 새롭게 추가됩니다.
이제 브라우저에서 탭에서 icon을 눌러보면 나만의 extension이 나타납니다.
코드를 수정했을때 항상 이렇게 reload를 해야하는 것은 아닙니다.
위의 표에서 나오듯 manifest 같은 파일이 아니면 브라우저를 새로고침 해도 반영이 잘 됩니다.
굳이 외울 필요는 없고 반영이 잘 안된다면 다시 reload 또는 refresh 하는 방식으로 하는것이 편합니다.
js 파일 디버깅 하기
popup.html 파일도 js를 사용할 수 있습니다.
여기서 발생하는 오류들을 찾으려면 popup.html를 볼 수 있는 개발자 도구를 켜야합니다.
지금 켜있는 탭의 브라우저는 popup.html의 js 파일이 아니므로 디버깅이 되지 않습니다.
extension 아이콘을 우클릭 하면 "팝업 검사" 라는 항목이 있습니다.
이 항목을 클릭하면 popup.html의 개발자도구가 따로 노출됩니다.
Source 탭에서 debugger도 사용할 수 있고 브라우저 개발자도구와 동일하게 작동합니다.
마무리
간단한 popup을 만들고 로컬에서 테스트 및 디버깅 하는 방법에 대해서 확인했습니다.
다음 글부터 기능을 하나씩 추가해서 완제품을 만들어 보겠습니다.
독자 분들이 프로젝트를 똑같이 clone 하는것도 좋지만, 기능을 구현하는 방법보다는 원리를 이해해서 자신만의 프로젝트에 썼으면 좋겠습니다.
감사합니다
'WEB > Chrome Extension' 카테고리의 다른 글
| [Chrome Extension] content scripts와 popup간 통신하기 - 4 (0) | 2023.12.04 |
|---|---|
| [Chrome Extension] content scripts를 이용해 DOM 조작하기 - 3 (2) | 2023.12.03 |
| [Chrome Extension] 데이터 저장하기, storage api - 2 (1) | 2023.11.28 |
