[Copy Stack] 배포하기

배포 주소

https://store.whale.naver.com/detail/pinkglbbkjkdcmcagonkaofijjpmohdi
https://chrome.google.com/webstore/detail/copy-stack/hbankbfbknfophpnhcadjfkcbeppbmfl?hl=ko&authuser=0

사실 배포는 별거 없긴 합니다. 공식 문서들이 워낙 잘나와있어서 잘 따라하면 됩니다.

배포 준비물

빌드한 앱의 zip 파일을 만들어야합니다. 매번 dist를 zip으로 압축하는 것은 귀찮으니 빌드시 zip을 만들어주는 vite 플러그인을 설치해서 사용하겠습니다.

https://www.npmjs.com/package/vite-plugin-zip-pack

npm i -D vite-plugin-zip-pack

위 플러그인을 설치하고

import { resolve } from "path";
import { defineConfig } from "vite";
import { crx } from "@crxjs/vite-plugin";
import zipPack from "vite-plugin-zip-pack";
import manifest from "./manifest";

export default defineConfig({
  resolve: {
    alias: {
      "@": resolve(__dirname, "src"),
      "@mock": resolve(__dirname, "__mocks__"),
    },
  },
  plugins: [crx({ manifest }), zipPack()], // zipPack 추가
});

vite.config.js 파일에 zipPack을 추가합니다.

이제 빌드하면

이렇게 dist 폴더와 dist-zip 폴더 2가지가 생깁니다. dist 폴더는 브라우저에 익스텐션을 올려 테스트하는데 사용합니다. dist-zip 폴더 안엔 dist.zip 파일이 생기는데, 이 dist.zip을 업로드하면 됩니다.

크롬 웹 스토어 배포

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

문서에 나온대로 잘 따라하면 됩니다.
배포전 몇 가지 확인해야하는 사항이 있긴 한데, 별거아닙니다.

크롬은 배포하는데 2~3일 걸렸습니다.

버전 확인하기

manifest.json에 버전을 적어줘야합니다.

한번 배포한 버전은 다운그레이드할 수 없습니다. 새 패키지를 올릴 때마다 버전을 올려줘야합니다. 버전은 x.y.z 형식이어야합니다.

permission 확인하기

마찬가지로 manifest에 불필요한 permission을 적진 않았는지 확인합니다. 불필요한 권한들을 적어놓으면 배포가 빠꾸먹을 수도 있습니다.

개발자 등록

크롬 웹 스토어는 개발자 등록비 5달라를 내야합니다. 비자카드가 필요하구요.
한가지, 등록할 때 국가를 선택하게 되어있는데, 한국이 없습니다. 그래서 미국 고르고 우편번호는 되는거 아무거나 때려박아서 등록합니다.

웨일 웹 스토어 배포

https://developers.whale.naver.com/distribution/

웨일은 더 쉽습니다.

개발자 등록비도 낼 필요가 없고, 크롬에서 등록하던거랑 똑같습니다.

웨일은 앱이 배포되는데 3일 걸렸습니다.

번외 - 아이콘 만들기

https://icon.ray.so/?q=clip

그래픽 디자인을 직접 할 수도 있는데, 저는 대충 여기서 만들어서 썼습니다.