manifest.json 만들기
기본적으로 manifest.json 파일을 만들어줘야 합니다. 프로젝트 폴더 최상단에 manifest.json 파일을 만들어줍니다.
{
"manifest_version": 3, // manifest 버전, 최근 버전 2는 점차 지원하지 않는 추세이니 3을 가급적 사용하자
"name": "Copy Stack Demo", // 앱 이름
"description": "chrome extension that allow you to stack and recall copied content", // 설명
"version": "0.1.0", // 버전
"action": { // 이 부분 아래에서 설명
"default_popup": "popup/index.html",
"default_icon": "assets/images/128.png"
},
"content_scripts": [
{ // 이 부분 아래에서 설명
"matches": ["https://*/*", "http://*/*"],
"js": ["scripts/content.js"]
}
],
"background": { // 이 부분 아래에서 설명
"service_worker": "scripts/background.js",
"type": "module"
},
"minimum_chrome_version": "92" // 앱이 동작할 수 있는 최소 크롬 버전
}manifest에서 중요한 건 action, content_scripts, background 세 가지입니다.
action
https://developer.chrome.com/docs/extensions/reference/action/
크롬 탭의 우측 상단에 보이는 얘들을 클릭하면 수행할 액션들을 정의하는 옵션이라고 생각하면 됩니다.
default_popup을 통해 나타날 html 파일을 지정할 수 있습니다. 앞으로는 action을 통해 생성되는 화면을 popup이라고 하겠습니다.
content_scripts
URL에 따라 브라우저에서 수행할 js를 정의하는 곳입니다. 특정 URL 접근 시 지정한 js 파일이 실행된다고 생각하면 됩니다. 브라우저 환경에서 수행됩니다.
"content_scripts": [
{
"matches": ["https://*/*", "http://*/*"], // 모든 htttp,https URL에 대해
"js": ["scripts/content.js"] // content.js 를 수행한다.
}
],예를 들어 위처럼 matches로 모든 URL이 매치되게 하고 scripts/content.js 파일에
console.log("hello content")를 적고 google.com에 접속하면
요렇게 출력이 나오는 것을 볼 수 있습니다.
background
background에선 service_worker를 지정할 수 있습니다. content_scripts는 브라우저 환경에서 수행된다면 service_worker는 별도로 앱의 실행 환경을 갖습니다.
마찬가지로 scripts/background.js에 아래의 코드를 넣어보겠습니다.
console.log("hello background")popup의 개발자 도구를 열어보면 아래와 같이 background의 코드가 실행된 것을 볼 수 있습니다.
전체적으로 popup과 content_script는 view 영역이 되고, background는 controller 영역이 될 듯합니다.
popup,content_script,background의 통신
이 셋은 독립적인 실행 환경을 갖습니다. 즉, 상호 간에 직접적인 통신이 불가능합니다. 이들이 통신하기 위해선 chrome.runtime, BroadcastChannel 혹은 MessageChannel을 이용해야 합니다.
잠깐 용어 정리
popup = action에 등록한 default_popup
content = content_script에 등록한 모든 브라우저에서 동작하는 content.js
background = background에 등록한 서비스 워커
폴더 구조
간단하게 위와 같이 구조를 만들어보았습니다만, classes 폴더는 사용하지 않습니다. 데모 버전이라 코드 품질은 적당히 유지하려고요.
popup에 관련된 로직은 popup 폴더에, 나머지 content.js나 background.js는 scripts 폴더에 넣었습니다.
크롬에서 앱 실행시키기
데모를 어떻게 구현했는지는 차차보도록 하고, 생성한 데모를 크롬에서 실행하는 방법을 보겠습니다.
chrome://extensions/위 링크에 접속하면
요런 화면이 나옵니다.
우측 상단에 개발자 모드를 켜면
이렇게 UI가 확장됩니다.
"압축해제된 확장 프로그램을 로드합니다." 버튼을 누르고 manifest.json 이 위치한 폴더를 선택하면
이렇게 앱이 등록이 됩니다.
상단의 icon을 클릭하면 popup이 생성되는 것을 확인할 수 있습니다.
마치며
다음 글은 복사한 내용을 background로 송신하는 내용이 될 것 같습니다.
