Google Chrome Extension 만들어보기

Open Source Software

Google Chrome Extension 만들어보기

Somaz 2025. 1. 14. 17:05

728x90

Overview

Google Chrome Extension 개발 후 배포하는 방법에 대해서 알아본다.

Google Chrome Extension이란?

Google Chrome Extension은 Chrome 웹 브라우저의 기능을 확장하거나 사용자 경험을 개선하기 위해 설계된 소프트웨어 프로그램이다. 이 확장 프로그램은 사용자가 브라우저에서 추가적인 기능을 손쉽게 활용할 수 있도록 한다.

Google Chrome Extension의 구성

Google Chrome Extension의 주요 구성파일은 아래와 같다.

my-extension/
│
├── manifest.json        # Configuration file
├── background.js        # Background script
├── content.js           # Content script
├── popup.html           # Popup interface
├── popup.js             # Logic for popup
├── options.html         # Options page
├── options.js           # Logic for options
├── icon.png             # Extension icon
├── styles.css           # Styles for popup or options

`manifest.json`

확장 프로그램의 메타데이터 및 동작을 정의하는 핵심 구성 파일이다.

{
  "manifest_version": 3,               // Specifies the extension version (2 or 3; 3 is the latest).
  "name": "My Chrome Extension",       // Name of the extension.
  "version": "1.0",                    // Version of the extension.
  "description": "A sample extension", // Brief description of the extension.
  "permissions": ["storage"],          // Permissions required (e.g., storage, tabs).
  "action": {
    "default_popup": "popup.html",     // Popup interface shown when the extension icon is clicked.
    "default_icon": "icon.png"         // Icon for the extension.
  },
  "background": {
    "service_worker": "background.js"  // Background script for persistent operations.
  },
  "content_scripts": [
    {
      "matches": ["https://*.example.com/*"], // Pages where the content script is injected.
      "js": ["content.js"]                   // Content script file.
    }
  ]
}

Background Scripts

일반적으로 `Background.js` 로 정의된다.
장기 실행 작업, 이벤트 관리 및 백그라운드에서 확장 로직 처리에 사용돤다.

chrome.runtime.onInstalled.addListener(() => {
  console.log("Extension installed!");
});

Content Scripts

일반적으로 'content.js'로 정의된다.
웹페이지의 컨텍스트에서 실행되고 페이지의 DOM과 직접 상호작용한다.

document.body.style.backgroundColor = "yellow"; // Changes the background color of the page.

팝업 HTML

일반적으로 관련 CSS 및 JavaScript가 포함된 `popup.html` 로 정의된다.
확장 프로그램 아이콘을 클릭했을 때 나타나는 UI를 정의한다.

<!DOCTYPE html>
<html>
<head>
  <title>Popup</title>
  <script src="popup.js"></script>
</head>
<body>
  <h1>Extension Popup</h1>
  <button id="myButton">Click Me</button>
</body>
</html>

옵션 페이지

일반적으로 `options.html` 및 `options.js`
사용자가 확장 설정을 구성할 수 있다.
`options_page` 필드 아래의 `manifest.json` 파일이다.

{
  "options_page": "options.html"
}

Asset(아이콘, 이미지 등)

`icon.png` 와 같은 모든 이미지 파일이다.
UI의 확장 아이콘 및 시각적 요소에 사용된다.

기타 지원 파일

CSS 파일: 스타일 팝업, 옵션 또는 콘텐츠 스크립트 인터페이스용이다.
JavaScript 모듈: 모듈식 기능을 위한 재사용 가능한 추가 스크립트이다.

Google Chrome Extension 개발

간단하게 2개의 Extension을 개발해 보았다. 자세한 내용은 Github를 참고하길 바란다.

개발하면서 기능을 테스트 하는 방법에 대해서 설명하려고 한다.

`chrome://extensions/` 해당 링크에서 개발자 모드를 Enable 하면 압축해제된 확장 프로그램을 로드 할 수 있다.

로드를 하게 되면 내가 개발한 Extension을 테스트 해볼 수 있다.

이런식으로 간단하게 QR 코드를 생성하는 Extension을 만들어보았다.

또 하나의 Extension은 JSON, Base64, JWT, URL 값을 Formating, Encoding, Decoding 하는 Extension 이다.

이런식으로 테스트가 끝났다면, 이제 App을 Google 에 등록후에 검토를 받으면 된다.

주의할점 개발자 계정 등록 시에 국가에서 한국은 없다. 그 이유는 한국은 판매자 계정으로 전환하지 못한다. 필자는 그래서 미국 주소를 사용해서 계정을 등록했다. 아마 예상하건데, 대한민국의 전자상거래법을 준수하지 못하는 것 같다? 그래서 수익창출을 할 수 없다. 참고하길 바란다.

1. Chrome Web Store Developer Dashboard 접속
   https://chrome.google.com/webstore/devconsole

2. 개발자 계정 등록 ($5 일회성 비용)

3. 새 항목 추가
   - ZIP 파일 업로드 (프로젝트 전체를 ZIP으로 압축)
   - 스토어 등록 정보 입력:
     - 설명
     - 스크린샷
     - 아이콘
     - 개인정보 처리방침
     - 카테고리 선택

4. 제출 및 검토 대기 (보통 몇 일 소요)

App 등록이 끝났다면 개발자 대시보드에서 검토 중인 App을 확인할 수 있다.

그리고 거부됬을때는 친절하게 이유를 알려준다? Chrome 확장 프로그램은 필요한 최소한의 권한만 요청해야 한다.

따라서 `manifest.json` 파일에서 activeTab 권한을 삭제해주면 된다.

{
  "permissions": [
    "activeTab",  // <- 이 부분을 제거
    // 실제 필요한 다른 권한들...
  ]
}

공개가 된다면 아래의 사진과 같이 공개됨으로 바뀐다.

그리고 Chrome Web Store에서 확인 가능하다.

마무리

간단하게 Google Chrome Extension 을 생성해 보았다. 생각보다 간단하게 생성할 수 있고 AI를 사용해서 비 개발자들도 간단하게 Extension을 만들어 볼 수 있을 것 같다.

Reference

https://support.google.com/chrome/a/answer/2714278?hl=ko

728x90

'Open Source Software' 카테고리의 다른 글

Vaultwarden(Bitwarden)이란? (2)	2024.11.08
Harbor란? (4)	2024.10.08
Minio란? (Object Storage) (2)	2024.08.26
Habor Robot Account(하버 로봇 계정)란? (0)	2024.08.21
Cephadm-ansible이란? (3)	2024.02.29

현재글Google Chrome Extension 만들어보기

Somaz의 IT 공부 일지