2021. 11. 12. 18:28ㆍ프로그래밍/Chrome Extension
새로운 프로젝트 생성하기
크롬 익스텐션은 별도의 라이브러리 없이 json파일을 생성하는 것만으로도 만들 수 있다.
1. 새 폴더를 만든다
2. manifest.json 파일을 생성한다.
3. 다음의 내용을 작성한다.
{
"name": "Getting Started Example",
"description": "Build an Extension!",
"version": "1.0",
"manifest_version": 3
}각각의 요소를 설명하자면,
name: 배포될 이름
description: 크롬 확장프로그램 화면에서 보여질 설명
version: 서비스의 버전
manifest_version: 크롬 익스텐션의 버전. 2와 3이 있으며, 3을 사용하면 퍼미션이 빨라진다고 한다.
이것만으로도 크롬 익스텐션 프로젝트가 생성되었다.
크롬 익스텐션 프로젝트를 실행하기
1. '확장 프로그램' 페이지 접속
2. 개발자 모드 켜기
3. 패키지 업로드
우선 다음의 링크로 '크롬'에서 접속한다.
chrome://extensions/
크롬에 내장되어 있는 페이지중의 하나다.
크롬 확장프로그램을 관리하는 페이지가 나온다.
오른쪽 상단의 개발자 모드를 켠다.
그러면 다음의 세개의 버튼이 표시되며,
'압축해제된 확장 프로그램을 로드합니다'를 클릭한다.
그 후, 자신이 생성한 폴더를 찾아서 선택한다.
위와 같이 업로드가 완료되었다.
간편 실행
크롬 도구표시줄 우측에 퍼즐 모양을 클릭하면,
다음과 같이 확장 프로그램 목록이 나온다.
프로그램 옆의 핀모양을 클릭하면, 도구표시줄에 아이콘이 표시되어 편하게 실행할 수 있다.
팝업화면 추가하기
1. manifest.json에 default_popup을 추가한다
2. 팝업용 html파일을 생성한다
우선 manifest.json에 다음의 내용을 추가해줍니다.
{
"name": "Getting Started Example",
"description": "Build an Extension!",
"version": "1.0",
"manifest_version": 3,
"action": {
"default_popup": "popup.html"
}
}action과 default_popup이 추가되었는데,
도구 표시줄의 아이콘을 클릭하면 팝업이 출력됩니다.
default_popup에는 팝업용 html의 파일경로를 입력합니다.
이제 팝업용 html을 생성합니다.
위에서 설정한대로 파일명은 popup.html로 하겠습니다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
팝업
</div>
</body>
</html>
이제 확장 프로그램에서 새로고침을 누릅니다.
이제 두가지 방법으로 팝업을 호출할 수 있습니다.
1. 핀 고정해 둔 상태에서, 아이콘을 클릭하여 호출
2. 확장 프로그램 목록에서 프로그램 이름을 클릭
참고하면 좋은 자료들
Getting started - 크롬 익스텐션 공식 문서
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 요소 목록 레퍼런스
https://developer.chrome.com/docs/extensions/mv3/manifest/
Manifest file format - Chrome Developers
An overview of the manifest.json properties that you can use in your Chrome Extension.
developer.chrome.com
'프로그래밍 > Chrome Extension' 카테고리의 다른 글
| chrome에 빨간줄 뜰 때 해결 방법 (0) | 2023.01.25 |
|---|---|
| Chrome Extension 프로젝트 세팅 (React, Typescript, Webpack) (0) | 2023.01.15 |
| React에서 Chrome API를 사용해보자. (with chrome.storage) (0) | 2021.08.19 |
| Chrome Extension에 React 적용하기 (0) | 2021.08.18 |
| Chrome Extension 개발 과정 (0) | 2021.08.04 |