[SSAFYcial] Vite + React + Typescript로 chrome extension을 만들어보자!

라니·2024년 2월 29일

SSAFY SSAFYcial extension 싸피

SSAFYcial

목록 보기

13/16

본 포스팅은 SSAFYcial 10기로서 포스팅하는 개인적인 견해임을 밝힙니다. 😄

이번 포스팅에서는 Vite + React + Typescript 세 조합으로 chrome extension을 만들는 초기 단계 세팅을 해보겠습니다!

STEP 0. Vite로 새 프로젝트 만들기

npm create vite@latest 로 새 프로젝트를 만듭니다!

이제 디렉토리를 생성된 폴더로 변경하고 dependencies를 설치합니다
또 정상적으로 실행되는지 테스트해봅시다!

cd [프로젝트명]
npm install
npm run dev

우리에게 익숙한 화면이 떴습니다!
이제 이 화면을 크롬 익스텐션으로 pop up 안에 들어갈 수 있도록 만들어봅시다!

STEP 1. 프로젝트 빌드하기

실행하고 있던 localhost를 'ctrl+c'로 종료하고
npm run build로 프로젝트를 빌드합니다.

그럼 아래와 같이 프로젝트 루트 폴더 밑에 dist 폴더가 생깁니다!

STEP 2. manifest.json 파일 만들기

public 디렉토리 밑에 extension의 구조와 동작에 관한 정보가 나열된 manifest.json을 생성합니다!

// manifest.json
{
  "manifest_version": 3,
  "name": "my-extension",
  "version": "1.0.0",
  "description": "",
  "action": {
      "default_popup": "index.html"
  },
  "permissions": [
      "scripting",
  ],
  "host_permissions": [
      "https://*/*",
      "http://*/*"
  ],
}

위의 manifest.json은 간단한 예시이며, 자세한 형식들은 공식문서를 참고하시길 바랍니다😎

⬇️⬇️⬇️ manifest.json 파일 형식에 관한 공식 문서 ⬇️⬇️⬇️
https://developer.chrome.com/docs/extensions/reference/manifest?hl=ko

그 다음 변경사항을 다시 빌드하기 위해 npn run build를 command에 입력합니다!

STEP 3. Load

이제 우리 프로젝트의 빌드 파일을 업로드할 준비가 되었습니다!!

chrome://extensions/에 접속해 오른쪽 상단에 위치한 개발자 모드를 켜줍니다

그럼 사진처럼 버튼 3개가 생깁니다.

이 중 "압축해제된 확장 프로그램을 로드합니다." 버튼을 누르고 우리 프로젝트의 dist 파일을 선택해줍니다

그럼 전체 확장 프로그램 목록에서 우리의 프로그램을 볼 수 있습니다 !! 👏👏👏

이제 우리 프로그램을 클릭해볼까요?

짜잔 !
index.html이 extension의 pop up으로 띄워지는 것을 보실 수 있으십니다 😎

Additional STEP. Scripting

추가적으로 Chrome API를 이용하여 웹 페이지의 배경색을 사용자가 지정한 색으로 변경하는 코드를 작성해보도록 하겠습니다!

우선 npm install -D @types/chrome으로 chrome API를 설치합니다.

이제 src/App.tsx에서 코드를 아래와 같이 변경합니다.

import { useState } from "react";
import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";

function App() {
  const [color, setColor] = useState("black");

  const onClick = async () => {
    const [tab] = await chrome.tabs.query({ active: true });
    chrome.scripting.executeScript<string[], void>({
      target: { tabId: tab.id! },
      args: [color],
      func: (color) => {
        document.body.style.backgroundColor = color;
      },
    });
  };

  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <input type="color" onChange={(e) => setColor(e.currentTarget.value)} />
        <button onClick={onClick}>Click Me</button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">Click on the Vite and React logos to learn more</p>
    </>
  );
}

export default App;