2024. 4. 14. 23:58ㆍ개발/ETC
크롬 확장프로그램 만들기 part.1 (계기, 디자인&기획, 기본 준비 단계, 참고 문서)
(내가쓰고싶어서.. )썸네일을 쉽게 만드는 크롬 확장프로그램을 만들었다. 아직 스토어 등록 심사중이지만 만드는 과정에서 알게된 내용을 간단하게 기록해보려 한다. 급하신분은 기본 준비단
youngsimi.tistory.com
해당 글을 따라서 작성했다면 기본적인 크롬 확장프로그램을 위한 준비는 끝났습니다.
이번 글에서는 manifest.json 파일을 좀더 보고 스토어에 등록하는 과정을 간단히 기록하려 합니다.
manifest.json
자세한 내용은 크롬 개발자 공식 문서에 나와있지만 제가 작성한 manifest.json을 보면서 다시한면 이야기 하려고 합니다.
확장 프로그램 | Extensions | Chrome for Developers
확장 프로그램 개발 방법 알아보기
developer.chrome.com
기본적인 프로젝트 구조
내가 작성한 manifest.json 은 다음과 같다. 프로젝트 구조와 함께 살펴보자.
- 기본적으로 manifest.json 파일은 프로젝트 루트에 위치해야한다.
- 필수값
- manifest_version : manifest 파일의 버전을 명시하는 것으로 크롬에서 지정한 숫자를 사용해야한다. 작성일 기준 manifest버전은 3이므로 3을 작성해주면 된다.
- name : 확장프로그램 명, 최대 75자
- description : 확장프로그램 설명, 최대 132자
- version : 내가 작성한 확장프로그램 버전
- icons : 하나 이상의 아이콘을 등록해야한다. png 확장자를 가장 추천하지만 다른 확장자도 가능하다. 단 svg나 webp는 지원하지 않는다.
- 옵션
- action : 크롬 확장프로그램 툴바에서 동작할 경우 어떻게 동작하는지 지정하는 값으로 따로 툴바에서 아이콘으로 동작할 경우가 아니면 지정하지 않아도 된다. 하지만 내 확장프로그램은 팝업 형태로 눌렀을 경우 동작하기 위해서 아이콘과 default_popup을 지정해주었다. 만약 팝업형태로 동작하지 않는 서비스라면 default_popup 은 별도로 필요하지 않다.
- content_security_policy : 보안 정책에 관한 키, script-src는 스크립트 자원을 어디서 로드하고 실행할 수 있는지를 지정한다. 여기서는 'self'만 허용하고 있으므로 내가 작성한 확장 프로그램 내에서만 스크립트를 로드한다고 한다.
- content_Scripts : Chrome 확장 프로그램이 특정 웹 페이지에서 실행할 스크립트나 스타일 시트를 정의한다. matches는 해당 스크립트들이 어떤 url 내에서 동작할지 지정하는 키 이며, js같은 경우는 실행할 스크립트를 추가할수 있다. 외부 라이브러리를 사용하게 될 경우 CDN으로 입력하지 않고 js 파일을 다운로드 한 다음 프로젝트 경로에 추가하고 해당 경로를 추가해주면 사용할 수 있다.
- permissions : 내가 작성한 확장 프로그램의 권한을 지정하는 키, activeTab 같은 경우 활성화된 탭에서만 권한을 가진다. 나같은 경우는 권한을 명시하고 축소하기 위해서 사용했지만 탭의 이름을 가져온다거나 탭과 관련되서 특정 작업을 수행할수도 있다.
옵션이나 보안정책, 권한 같은 경우는 정말 필요한 경우에 최소한만으로 작성하는게 좋다... 보안적으로도 당연한 문제지만.. 스토어에 등록할때 하나하나 사용해야하는 이유를 작성해야하므로..너무 귀찮다...
확장프로그램 스토어 등록하기
준비물 : 내가 작성한 manifast.json 파일의 옵션들에 대한 타당한 이유, 구글 계정, 해외결제카드(5달러)
1. 확장프로그램 스토어 개발자 대시보드로 이동한다.
https://chrome.google.com/webstore/developer/dashboard
Chrome Web Store
로그인 Chrome 웹 스토어로 이동
accounts.google.com
2. 약관 동의 및 크롬 개발자 등록하기( 5달러)
이때 5달러는 한번만 내면 추가 지불은 하지 않아도 된다..
결제를 할때 카드 번호 외에 국가, 우편번호 등 결제를 위한 정보를 입력해야하는데 여기서 좀 해맸다. 암만 눈씻고 찾아봐도 대한민국이 없다.한국인 특, 외국사이트에서 가입할때 Republic of Korea, South Korea, Korea 다 찾아봐야함.
(알고보니 그냥 결제를 위한 정보이므로 임의로 입력해도 된다고 하더라..; 임의 입력이 가능한게 말이되나... 그렇게 보안보안 하더니.. )
카드 정보를 입력하게 되면 0달러가 결제되고 ( 결제가능한 카드인지 확인) 이후 5달러가 빠져나간다....후.....
3. 판매자인지 아닌지 선택하라함.
나는 사업자도 없고 걍 내가 만든거 내가 쓰고 싶은 일반인 이므로 판매자 아니라고 선택함. ( 추후 계정정보에서 변경 가능하다!)
4. 대시보드 두둥탁!
5. 내 프로젝트 패키지 올리기
열심히 만들었던 프로젝트를 묶어서 올려주면 된다.
6. 시키는거 다 입력하기.
앱 설명, 사용 목적, 수집 정보, 개인정보 어떻게 사용할건지.. 기타등등.. 시키는거 다 입력하면 된다. 친절하게 지금 뭐가 입력이 안됬으니까 얼런 입력해라 라고 알려준다.
TIPS
- 아이콘, 서비스 캡처 이미지, 썸네일(미니/ 큰버전) 올릴때 사이즈 짤 없다. 적당히 늘려주고 적당히 줄여주는거 없다. 안올라가니까 사이즈 맞춰서 올려야 함동!
- 내가 입력한 퍼미션에 대한 사용근거
- 호스트 권한 같은 경우 퍼미션의 작성된 activeTab 의 근거, content_scripts의 matches에 작성된 url에서 사용되어야 하는 이유를 작성해주면 된다.
(나같은 경우는 웹 서핑을 하다가 아이디나 생각이 떠올랐을때 언제든지 활성화 된 탭에서 내 아이콘에 접근해서 확장프로그램을 사용하여야 하기 때문에 이런식으로 영어로 작성했다... ) - 원격 코드 같은경우는 manifast.json 파일에서 작성한 js 키 내의 외부 스크립트 파일을 사용해야 하는 이유를 작성해주면된다.
- 호스트 권한 같은 경우 퍼미션의 작성된 activeTab 의 근거, content_scripts의 matches에 작성된 url에서 사용되어야 하는 이유를 작성해주면 된다.
7. 마지막으로 게시하면 심사를 통해 스토어에 게시가 된다!!
미세 꿀팁!
- 처음 게시할때 게시가 안되는 이유 중에 자꾸 계정 탭에서 이메일을 등록하고 인증하라고 나온다.
그래서 열심히 내 구글 계정 가서 이메일, 서브 이메일 등록하고 인증했는데도 계속 인증하라고 나와서 열뻗쳤다....
알고보니 내 구글 계정의 계정 정보가 아니라...
개발자 대시보드 내의 계정 탭에서 등록하고 확인하면 되는것!
8. 심사 후 이상이 없으면 스토어에 등록되고 메일이 온다!
나같은 경우 이틀 정도 걸렸다. 아무래도 개인정보를 사용하지도 않고 딱히 탭 화면에 접근 하는 내용도 없어서 심사가 빨리 이루어진것 같다.
thumbnail wizard
You can create blog and social media thumbnails with just click. Simply input your desired text and select your options.
chromewebstore.google.com
ㅎㅎㅎ 스토어에 올라가있다니 신기하당...
'개발 > ETC' 카테고리의 다른 글
| 크롬 확장프로그램 만들기 part.1 (계기, 디자인&기획, 기본 준비 단계, 참고 문서) (0) | 2024.04.13 |
|---|---|
| npm vs yarn (2) | 2023.04.14 |
| 맥북 M2, yarn 설치하기🔧 (🖥️terminal, 🍺Homebrew, npm) (0) | 2023.04.14 |
| 웹 브라우저 탭 메모장 (0) | 2023.04.03 |
| git GUI 소스트리 (SourceTree) 설치 및 환경설정 - mac, GitHub, token 사용, git 프로젝트 설정 (0) | 2023.03.25 |