How to Create a Chrome Extension

Frontend

Background

외주를 받았는데 web application과 chrome extension을 만들어야 했다. 고등학생 때부터 크롬과 크롬의 다양한 익스텐션을 사용하고 있었기에 내가 익스텐션을 직접 만들 기회가 생겨서 반가웠다.

익스텐션은 처음 만들어 보기 때문에 코딩을 시작하기 전 여러개의 튜토리얼를 찾아보았는데 대부분이 생 자바스크립트나 jQuery를 사용하는 거였다. 하지만 이번 프로젝트에서는 리액트를 사용해서 만들기로 했다.

Create a react app

npm install -g create-react-app
create-react-app chrome-extension
cd chrome-extension

Modify maniest.json

public 폴더에 이미 manifest.json가 있다. 이걸 이렇게 수정해 보자

{
  "manifest_version": 2,

  "name": "My Chrome Extension",
  "description": "This is my first chrome extension.",
  "version": "0.0.1",

  "browser_action": {
    "default_popup": "index.html",
    "default_title": "Open the popup"
  },
  "icons": {
    "16": "logo.png",
    "48": "logo.png",
    "128": "logo.png"
  },
  "content_security_policy": "script-src 'self' 'sha256-GgRxrVOKNdB4LrRsVPDSbzvfdV4UqglmviH9GoBJ5jk='; object-src 'self'",
  "permissions": [
  ]
}

logo.png는 128x128 사이즈의 이미지를 저장해서 public 폴더에 넣으면 된다.

로고를 추가한 후 yarn build로 빌드 버전을 생성한다.

Add your extension to Chrome

  • chrome://extensions/ 주소로 출동
  • 오른쪽 상단의 [Developer mode] 슬라이드를 오른쪽으로 민다
  • 왼쪽 상단의 [Load unpacked] 버튼을 누른 후, 생성한 build 폴더를 올린다
  • 완성!

button1 button2

GitHubGitHubLinkedin