새오의 개발 기록

1. Vue + 크롬 확장프로그램 구현: 개발환경 세팅 및 manifest 설정 본문

Javascript/Vue.js

1. Vue + 크롬 확장프로그램 구현: 개발환경 세팅 및 manifest 설정

새오: 2022. 9. 16. 00:41

개요

사이드 프로젝트로 웹 서비스를 개발하고 있는데 

이를 크롬 확장 프로그램으로도 개발하여 제공하고자 합니다.

 

 

 

 

Vue.js로 크롬 확장 프로그램 만들기 강의 - 1부 - peterkimzz

제가 최근 우연히 크롬 확장 프로그램을 개발했는데, 이게 생각보다 꽤 괜찮은 시장이라는 걸 알게 되었습니다. 크롬 확장 프로그램은 이미 여러분들에게 익숙한 웹 기술로 쉽게 개발할 수 있고

www.peterkimzz.com

이 분의 글을 참고하였습니다.

 

 

개발환경 세팅

 

  • Node.js 현재 LTS 버전인 16.17.0 설치합니다.
nvm i 16.17.0

 

 

 

 

  • npm init은 Node 프로젝트를 현재 디렉토리에 만들겠다는 뜻인데, -y를 입력하면 여러 설정 값들에 전부 yes로 하겠다는 의미입니다.
npm init -y

 

 

 

 

설치하고 난 뒤의 파일 구조

README.md는 깃 레포 생성 시 설정해서 자동으로 생긴 파일이고

npm init -y를 통해 package.json이 생성되었습니다.

package.json은 패키지들의 버전, 설정 등을 관리하는 파일이라고 보면 됩니다.

 

 

 

 

 

 

첫 화면 만들기

 

 

화면을 보면서 진행하는게 더 쉽게 느껴지기 때문에 우선 index.html을 생성합니다.

파일명을 index로 짓는 것은 배포된 후에 컴퓨터가 index.html을 가장 먼저 찾아가게 되어있기 때문입니다.

 

 

 

 

사실 위 블로그 글을 그대로 따라가 보고 있는데

npm init 없이 바로 vue-cli 생성해서 하면

node 설정이랑 index.html 생성도 가능한거 아닌가 싶지만

우선 도전해볼 시간이 없으므로 도전 없이 따라 가보겠습니다.

 

 

 

 

 

 

화면에 잘 출력이 되는지 확인해보기 위해 index.html에 간단히 코드를 작성합니다.

// index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Quickchive</title>
  </head>
  <body>
    <div>
      <h1>퀵카이브</h1>
    </div>
  </body>
</html>

 

 

 

 

index.html을 실행해보면 잘 출력이 되는 것을 확인해볼 수 있습니다.

이 프로젝트 디렉토리에 가서 index.html을 더블클릭해서 실행하면 바로 열립니다.

 

 

 

manifest.json 파일 만들기

 

확장 프로그램을 만들기 위해선 프로젝트에 manifest.json 이라는 파일이 필요합니다.

크롬, 웨일, 엣지 등 크로미움 기반 브라우저라면 모두 이 파일 하나로 확장 프로그램을 실행시킬 수 있다고 합니다.

json 형식으로 작성하면 됩니다.

 

manifest.json 파일은, 버전이라는 게 있는데

크롬 웹스토어에만 올라갈 예정이라면, 버전 3으로 작성해도 되지만 웨일 등 다른 브라우저의 자체 스토어에도 올릴 예정이라면,

버전 2로 작성해야 한다고 합니다.

 

이유는 manifest version 3 (MV3)는 Chrome 88 버전 이상에서만 동작하기 때문입니다.

최신 버전의 웨일은 현재 88 버전 아래이기 때문에 MV3로 작성한 확장 프로그램은 인식하지 못합니다.

 

저희는 실사용자를 유치해보는게 목표이므로 여러 사용자를 고려하여 

mv2를 사용해보겠습니다.

 

 

 

manifest.json을 작성합니다.

// manifest.json

{
  "name": "Quickchive",
  "description": "퀵카이브",
  "version": "0.0.1",
  "manifest_version": 2,
  "action": {
    "default_popup": "index.html"
  }
}
  • name: 배포 후 웹 스토어에 노출, 검색되는 항목
  • action.default_popup: 확장 프로그램을 눌렀을 때, 기본적으로 뜨게 될 팝업 

 

여기까지 설정하면 이 프로젝트가 확장프로그램으로 동작한다고 합니다.

 

 

 

 

 

 

 

 

확장프로그램에서 내 프로젝트 실행

 

 

 

테스트를 위해 chrome://extensions페이지로 이동 후 개발자 모드를 활성화시켜 줍니다.

 

 

 

 

 

 

 

 

 

 

그러면 세 개의 버튼이 활성화 되는데 <압축해제된 확장 프로그램을 로드합니다>를 클릭해줍니다.

 

 

 

 

 

 

 

 

제가 만든 프로그램 디렉토리를 선택해줍니다.

 

 

 

 

 

그러면 제 프로젝트가 나옵니다.

저는 바로 오류가 있네요..

수정하면 됩니다.

 

 

 

 

이게 문제였습니다.

mv2은 23년에 서비스 종료라고 하네요..

mv3로 수정해줍니다.

 

 

 

이제 확장프로그램 버튼을 눌렀을 때 사용이 가능합니다.

 

 

 

 

 

 

짠 이렇게 확인할 수 있습니다.

다만 확장 프로그램은 브라우저 위에 있는 브라우저이기 때문에 사이즈가 작습니다.

최대로 설정 가능한 크기는 width: 800px, height: 600px로 그 이상의 크기는 무시됩니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

오늘은 확장 프로그램을 실행하는 것 까지 해보았습니다.

다음번에는 vue를 이용하여 본격적으로

저희 프로젝트를 확장프로그램 버전으로 개발해보겠습니다.

저작자표시

'Javascript > Vue.js' 카테고리의 다른 글

Vue 기본 기능(디렉티브와 템플릿)  (0) 2023.01.13
Vue 리소스 사이트  (0) 2023.01.13
Vue를 사용하는 이유  (0) 2023.01.13
2. Vue + 크롬 확장프로그램 구현: Vite로 프로젝트 구성  (1) 2022.09.16
Vue.js 난독화  (0) 2022.09.13
'Javascript/Vue.js' Related Articles more