오픈소스 PR 날리기 vite-plugin-chrome-extension 오류해결

크롬 익스텐션을 프로그래밍 하면서 vite-plugin-chrome-extension을 사용하고 있었다. vite-plugin-web-extension과 어떤걸 사용할지 고민했었는데 어짜피 크롬 익스텐션에 집중해서 개발할 생각이라 다른 브라우저는 고려하지 않았고, 그만큼 사용법이 간단했기 때문이다. 다만 마지막 커밋이 3년전이라는 사실이 좀 불안했지만.. 그래도 별 문제없이 잘 동작했다.

// vite.config.ts
// 사용법은 이게 끝이다. 정말 간단하다.
import { chromeExtension } from "vite-plugin-chrome-extension"

export default defineConfig({
  plugins: [
    chromeExtension() as unknown as PluginOption,
  ],
  build: {
    rollupOptions: {
      input: "manifest.json",
    },
  }
}

그런데 문제가 생겼다. 내 manifest의 content_scripts를 아래처럼 구성했는데 빌드시에 에러가 발생한다.

// manifest.json
{
  ...
  "content_scripts": [
    {
      "matches": ["*://*.instagram.com/*"],
      "js": ["src/content.ts"],
      "world": "MAIN"
    }
  ]
}

error during build:
[chrome-extension] There were problems with the extension manifest.
    at validateManifest ({project_path}/node_modules/vite-plugin-chrome-extension/src/manifest-input/manifest-parser/validate.ts:47:1)
    ...

 

플러그인 개발 당시 익스텐션에 없던 프로퍼티가 생겼나보다. world 프로퍼티를 사용하지 않았을때는 에러가 나지 않은걸보니 world가 문제인것같다. 해당 리포지토리에 PR을 올리기위해 fork를 떴다.

예상대로 manifest를 파싱하는 로직에서 manifest schema를 검사하는데 world프로퍼티에 대한 처리가 없어서 에러가 난 것이었다.

이렇게 추가해주고 로컬에서 잘 동작하는지 테스트 해본다.

 

✘ [ERROR] Failed to resolve entry for package "vite-plugin-chrome-extension". The package may have incorrect main/module/exports specified in its package.json. [plugin externalize-deps]
...

예? 아 라이브러리도 따로 빌드해야지 사용할수 있나보다. vite-plugin-chrome-extension의 package.json을 살펴보니 아래와같다.

그래서 npm install을 통해 우선 vite-plugin-chrome-extension에서 필요한 라이브러리를 설치해준다. 그런데...라이브러리 설치가 진행이 안된다.

뭐함?

package-lock.json에서 다운로드 하는 위치를 살펴봤다.

저 주소를 브라우저에 입력해봤다.

아마 해당 미러 레지스트리가 너무 오래돼서 보안 문제가 있는것같다. 그렇다면 package-lock을 리셋해줘야겠다. 아래처럼 명령어를 순서대로 실행했다.

rm -rf node_modules package-lock.json
npm cache clean --force
npm install

그런데 npm install에서 종속성 문제가 발생한다.

이건 어쩔수없다. 내가 이걸 하나하나 맞춰줄수가 없다. 아몰랑 npm install  --legacy-peer-deps 시전해준다.

이렇게하고 원본 리포지토리에 PR을 올렸다. 그런데 마지막 커밋이 3년전인데 이거 머지해줄지 모르겠다.

그래서 결국 최근까지 잘 관리되고 있는 vite-plugin-web-extension으로 마이그레이션 했다. 그냥 진작에 이거 쓸걸!

// vite.config.ts

import webExtension, { readJsonFile } from "vite-plugin-web-extension"

const generateManifest = () => {
  const manifest = readJsonFile("manifest.json")
  const pkg = readJsonFile("package.json")
  return {
    name: pkg.name,
    description: pkg.description,
    version: pkg.version,
    ...manifest,
  }
}

export default defineConfig({
  plugins: [
    vue(),
    webExtension({
      manifest: generateManifest,
    }),
  ]
}