olaf.kr

Plasmo 간단한 소개와 사용 후기

Photo by Nathan Dumlao on Unsplash

Plasmo 간단한 소개와 사용 후기

dong-jin ahn's photo
dong-jin ahn
·

3 min read

Plasmo는 멀티 브라우저를 지원하는 브라우저 확장(Browser Extension)을 만들기 위한 개발 SDK이다. Plasmo Itero는 브라우저 확장을 내부적으로 알파 테스트를 빠르게 돌릴 수 있도록 지원하는 TestBeds와 Github intergration을 통한 CI/CD 등을 지원하는 유료 플랫폼이다. Plasmo는 공짜로 이용할 수 있지만, Plasmo Itero을 유료모델로 사용해서 수익을 내는 BM인가보다.

최근 Plasmo를 이용해 간단한 브라우저 확장을 개발하고 런칭했다. 이 글에서는 Plasmo에 대한 간단한 소개와 개발하면서 느낀 간단한 사용 후기를 적어보려고 한다.

Content script, Popup, Background

세 가지의 독립적인 프로세스가 돌아간다. 현재 유저가 브라우징 중인 페이지에서 동작하는 콘텐트 스크립트, 브라우저 툴바에서 브라우저 확장 아이콘을 눌렀을 때 등장하는 팝업, 그리고 콘텐트 스크립트와 팝업과 무관하게 계속 실행되고 있는 백그라운드 세 가지의 프로세스가 존재한다. 크롬 브라우저 확장의 문서를 확인해보면 백그라운드를 "Service worker"라고 소개하는데, Plasmo에서 멀티 브라우저를 지원하기 위해 크롬과 약간 다른 명칭을 사용하는 것 같다.

콘텐트 스크립트는 현재 유저가 브라우징 중인 페이지의 HTML 엘리먼트로부터 정보를 읽거나, HTML 엘리먼트를 조작하고 싶은 경우 사용한다. 이미 동작하는 사이트에 새로운 기능을 add-on하고 싶은 경우에도 이 콘텐트 스크립트를 사용하면 되는데, 이는 Plasmo의 CSUI(Content Script UI) 문서를 참고하자.

팝업은 툴바에서 아이콘을 눌렀을 때 실행되는 프로세스이다. 해당 팝업이 닫히면 프로세스는 종료된다. 이전에 툴바 프로세스에서 점유한 변수값은 매번 초기화된다. 이를 방지하기 위해서는 브라우저 확장의 로컬 스토리지에 정보를 저장하거나, 백그라운드에 이를 저장하는 것이 좋다.

백그라운드는 웹 브라우저가 실행된 후 계속 실행되는 프로세스다. 팝업이 뜨자마자 어떤 정보를 빠르게 불러와야하는 경우, 백그라운드에서 해당 데이터를 들고 있게 하고 팝업에서 그것을 가져가는 형식으로 짤 수도 있겠다. 또한 백그라운드는 CORS에 상관없는 HTTP 요청을 보낼 수 있는 영역이기 때문에 브라우저 확장에서 외부 API를 호출하는 경우 외부와 직접적으로 소통하는 프로세스다.

Content script in Plasmo

content.js 또는 contents/ 디렉토리의 하위 모든 .js , .ts 파일들을 콘텐트 스크립트로 간주한다.

/** @type {import('plasmo').PlasmoCSConfig} */
export const config = {
  run_at: 'document_idle',
  matches: ['https://*.linkedin.com/in/*', 'https://linkedin.com/in/*'],
};

위와 같이 js파일의 config 변수를 export하면, 이 콘텐트 스크립트가 어떤 조건으로 동작하는지를 기술할 수 있다. Plasmo doc에서 이를 확인할 수 있고, Chrome extension doc도 확인하자.

Popup in Plasmo

popup.vue 를 entry point로 간주한다. Vue가 아닌 다른 프론트엔드 프레임워크를 지원하기 때문에 다른 확장자들 또한 지원한다. 여기부터는 거의 plain front-end web-app을 만든다고 생각하면 된다.

Background in Plasmo

background.js 또는 background.ts를 entry point로 간주한다.

사용하며 느낀 점

1. defineOptions in popup.vue

plasmo가 내부적으로 사용하는 parcel에서 마운트를 하기 때문에 app 객체가 노출되지 않는다. vue의 경우에는 다음과 같이 app 객체를 받아서 플러그인 설치 및 설정들을 할 수 있다.

defineOptions({
  prepare(app) {
    // NOTE: install plugins here
  },
});

2. 팝업에서 vuex가 꼭 필요할까?

vuex 또는 redux, recoil, zustand, pinia가 꼭 필요할까? 위에서도 언급했지만, 팝업은 짧은 생명주기를 가진 프로세스다. 브라우저 확장에서 state managing에 더 적합한 프로세스는 백그라운드라고 생각한다.

3. 생각보다 Plasmo의 추상 범위는 적다.

chrome 객체를 가지고 직접 Chrome Extension API를 참조해가며 개발한 부분이 더 많다. Plasmo가 멀티 브라우저를 지원하는 것은 사실이지만, 추상화해서 여러 브라우저를 지원할 수 있도록 개발이 끝나지 않은 부분이 더 많다. Plasmo를 사용하더라도 멀티 브라우저 지원이 자연스럽게 이뤄지는 수준은 아직 아니다. 이미 많은 부분 설정되고 패키징할 수 있다는 점에서 개발환경 세팅을 하지 않아도 되는 점과, Plasmo에서 정한 컨벤션들을 따르며 비교적 고민 없이 빠르게 개발 할 수 있다는 점에서 Plasmo 사용을 추천한다.

여담으로, plasmo package 명령어는 정말 "패키징"만 해주기 때문에 plasmo build && plasmo package 명령어를 사용해야 최신 코드로 브라우저 확장 zip 파일이 생성된다.

4. Plasmo Itero

Plasmo에서 수익을 내기 위해 운영하는 플랫폼이다. 사용중 문의가 발생한 경우 Plasmo에서 커뮤니티로 사용하는 디스코드에 문의를 남기면 되는데, 위워크와 스파크플러스와 같은 공유 오피스에서는 디스코드에 대한 접근이 차단되어있다는 점, 그리고 문의를 남기면 다음 날 새벽 3시~5시 사이에 답변이 달려서 핑퐁이 엄청 길어진다는 것이 단점이다. 하지만 경험상 답변은 적당히 친절했으며 담당자의 높은 끈기(해결하고자 하는 의지)가 보였던 것 같다.

이외에도 Chrome Web Store에 제출하게 되면 아무래도 심사에 의해 늦어지는 것도 있고, 내부에서 테스트하기 위해는 빌드해서 zip파일을 나눠주는 방식이 기존 문제였는데, 이를 TestBeds로 단순화한 것이 매우 마음에 든다. 개인 개발자로서는 부담되는 가격일 수도 있지만 회사에 소속된 개발자로서는 합리적인 가격에 합리적인 기능을 제공한다고 느낀다.

5. Extensions Reloader

개발한 브라우저 확장을 크롬에서 확인/디버깅하는 경우 새로고침을 돕는 Extensions Reloader를 꼭 설치하자.

JavaScriptBrowser Extension