[Copy Stack] 프로젝트 세팅

Vite + Lit 프로젝트 생성

# vite 프로젝트 생성
$ npm create vite

# Lit 선택
# Typescript 선택

# vite를 실제 설치하기 위해 install 실행
$ npm install

그러고나면 아래같은 에러가 뜹니다.

관련해서 찾아보니
tsconfig.node.json 에 "target":"esnext" 를 추가해주면 해결된다고 합니다.

여기 참고 https://github.com/microsoft/vscode/issues/168420

Vite로 프로젝트를 구성하면 바로 생기는 폴더 구조는 위와 같습니다.
Copy Stack은 크롬 익스텐션 프로그램이기 때문에 popup, background, content 3개의 파일이 빌드 되도록 vite를 설정해야 합니다.

manifest.json

manifest.json은 데모를 만들면서 사용한 것에 타입스크립트만 적용해서 씁시다.

{
  "manifest_version": 3,
  "name": "Copy Stack Test",
  "description": "chrome extension that allow you to stack and recall copied content",
  "version": "0.3.0",
  "action": {
    "default_popup": "index.html", // 이 부분 변경
    "default_icon": "images/128.png"
  },
  "content_scripts": [
    {
      "matches": ["https://*/*", "http://*/*"],
      "js": ["src/content.ts"] // 이 부분 변경
    }
  ],
  "background": {
    "service_worker": "src/background.ts", // 이 부분 변경
    "type": "module"
  },
  "icons": {
    "16": "images/16.png",
    "48": "images/48.png",
    "128": "images/128.png"
  },
  "minimum_chrome_version": "92"
}

background.ts,content.ts 파일 생성

빌드에 사용할 background.ts와 content.ts 파일을 src 아래 만들어줍니다.
간단하게 타입스크립트가 잘 적용되는지 확인하는 용으로 각각 아래처럼 코드를 넣어줍시다.

// content.ts
const a: string = "hello content";

console.log(a);

// background.ts
const b: string = "hello background";

console.log(b);

//tsconfig.json
    "isolatedModules": false, // export 하지 않아도 동작하도록 함

background.ts와 content.ts 가 모듈이 아니기 때문에 ts가 에러를 냅니다. 따라서 위 옵션을 꺼줍니다.

vite로 chrome extension 빌드하기

일반적인 프로젝트와 다르게 background.js,content.js,popup.js 세 파일로 크게 나누어 빌드 해야 하므로 vite.config.ts를 조금 수정해야 합니다.

CRXJS 플러그인을 활용해 봅시다.

여기 참조 https://crxjs.dev/vite-plugin/getting-started/vanilla-js/create-project

npm i @crxjs/vite-plugin@beta -D

vite 4.0.0 버전을 사용할 예정이라 beta 버전으로 의존성을 설치합니다.
crxjs에 manifest를 넣어줘야 하는데, manifest.json를 그대로 넣으면 타입 에러가 납니다. 그래서 defineManifest를 사용해 manifest.js를 만들어줘야 합니다.

// manifest.js
import { defineManifest } from "@crxjs/vite-plugin";
import manifest from "./manifest.json";

export default defineManifest(manifest);

그리고 vite.config.ts 를 다음과 같이 수정합니다.

// vite.config.ts
import { defineConfig } from "vite";
import { crx } from "@crxjs/vite-plugin";
import manifest from "./manifest";

export default defineConfig({
  plugins: [crx({ manifest })],
});

vite.config.ts 파일에 처음엔 build에 external 옵션이 켜져있는데, 이걸 없애줘야 lit을 포함해서 프로젝트가 빌드됩니다.

이제 npm run build 를 실행하면

이렇게 빌드가 생성되고 dist/manifest.json을 열어보면

이런식으로 service-worker-loader가 background에, content.ts-loader가 content_scripts에 배치된 것을 확인할 수 있습니다. 불필요한 vite 로고나 lit 로고를 때고 빌드한 뒤에 익스텐션에 올려보면

이렇게 잘 업로드 되는 것을 확인할 수 있습니다.


content.ts와 background.ts 도 잘 동작하는 것을 확인할 수 있습니다.

package.json 수정

version은 데모에 이어서 0.3.0으로 수정합니다.
scripts는 개인 취향으로 아래처럼 바꿔줬습니다.

// 원래는 "build": "tsc && vite build"
    "prebuild": "tsc",
    "build": "vite build",