브라우저 확장 프로그램 가이드
이 가이드에서는 Better Auth를 사용하여 Plasmo로 브라우저 확장 프로그램을 만드는 단계를 안내합니다.
완성된 예제를 보고 싶다면 브라우저 확장 프로그램 예제를 확인하세요.
Plasmo 프레임워크는 브라우저 확장 프로그램용 백엔드를 제공하지 않습니다. 이 가이드는 Better Auth의 백엔드 설정이 완료되었고 이에 연결할 브라우저 확장 프로그램을 만들 준비가 되었다고 가정합니다.
설정 및 설치
TailwindCSS와 src 디렉토리를 사용하여 새 Plasmo 프로젝트를 초기화하세요.
pnpm create plasmo --with-tailwindcss --with-src그런 다음 Better Auth 패키지를 설치하세요.
pnpm add better-authPlasmo 개발 서버를 시작하려면 다음 명령을 실행하세요.
pnpm devtsconfig 설정
tsconfig.json 파일을 구성하여 strict 모드를 포함하세요.
이 데모에서는 가져오기 별칭을 ~에서 @로 변경하고 src 디렉토리로 설정했습니다.
{
"compilerOptions": {
"paths": {
"@/_": [
"./src/_"
]
},
"strict": true,
"baseUrl": "."
}
}클라이언트 auth 인스턴스 생성
src/auth/auth-client.ts에 새 파일을 만들고 다음 코드를 추가하세요.
import { createAuthClient } from "better-auth/react"
export const authClient = createAuthClient({
baseURL: "http://localhost:3000" /* Better Auth 백엔드의 기본 URL. */,
plugins: [],
});manifest 설정
확장 프로그램이 Better Auth 백엔드의 URL을 알도록 해야 합니다.
package.json 파일로 이동하여 다음 코드를 추가하세요.
{
//...
"manifest": {
"host_permissions": [
"https://URL_TO_YOUR_BACKEND" // localhost도 작동합니다 (예: http://localhost:3000)
]
}
}이제 준비되었습니다!
브라우저 확장 프로그램용 Better Auth를 설정했습니다.
원하는 UI를 추가하고 꿈의 확장 프로그램을 만드세요!
클라이언트 Better Auth API에 대해 자세히 알아보려면 클라이언트 문서를 확인하세요.
다음은 간단한 예제입니다 😎
import { authClient } from "./auth/auth-client"
function IndexPopup() {
const {data, isPending, error} = authClient.useSession();
if(isPending){
return <>로딩 중...</>
}
if(error){
return <>오류: {error.message}</>
}
if(data){
return <>{data.user.name}(으)로 로그인됨</>
}
}
export default IndexPopup;확장 프로그램 번들링
프로덕션 빌드를 얻으려면 다음 명령을 실행하세요.
pnpm buildchrome://extensions로 이동하여 개발자 모드를 활성화하세요.
"압축해제된 확장 프로그램 로드"를 클릭하고 확장 프로그램의 build/chrome-mv3-dev (또는 build/chrome-mv3-prod) 디렉토리로 이동하세요.
팝업을 보려면 Chrome 툴바의 퍼즐 조각 아이콘을 클릭하고 확장 프로그램을 클릭하세요.
확장 프로그램 번들링에 대해 자세히 알아보기.서버 auth 인스턴스 설정
먼저 확장 프로그램 URL이 필요합니다.
확장 프로그램 URL은 다음과 같이 형성됩니다: chrome-extension://YOUR_EXTENSION_ID.
chrome://extensions에서 확장 프로그램 ID를 찾을 수 있습니다.
서버의 auth 파일로 이동하여 확장 프로그램의 URL이 trustedOrigins 목록에 추가되었는지 확인하세요.
import { betterAuth } from "better-auth"
import { auth } from "@/auth/auth"
export const auth = betterAuth({
trustedOrigins: ["chrome-extension://YOUR_EXTENSION_ID"],
})여러 확장 프로그램을 개발 중이거나 다른 ID를 가진 다른 브라우저 확장 프로그램을 지원해야 하는 경우 와일드카드 패턴을 사용할 수 있습니다:
export const auth = betterAuth({
trustedOrigins: [
// 특정 확장 프로그램 ID 지원
"chrome-extension://YOUR_EXTENSION_ID",
// 또는 와일드카드로 여러 확장 프로그램 지원 (보안성 낮음)
"chrome-extension://*"
],
})확장 프로그램 origin에 와일드카드(chrome-extension://*)를 사용하면 모든 확장 프로그램을 신뢰하여 보안이 감소합니다.
신뢰하는 각 확장 프로그램 ID를 명시적으로 나열하는 것이 더 안전합니다. 개발 및 테스트에만 와일드카드를 사용하세요.
완료되었습니다!
모든 설정이 완료되었습니다! 이제 확장 프로그램 개발을 시작할 수 있습니다. 🎉
마무리
축하합니다! Better Auth와 Plasmo를 사용하여 브라우저 확장 프로그램을 성공적으로 만들었습니다. 프레임워크에 대해 자세히 알아보려면 Plasmo 문서를 방문하는 것이 좋습니다.
완성된 예제를 보고 싶다면 브라우저 확장 프로그램 예제를 확인하세요.
질문이 있으시면 GitHub repo에 이슈를 열거나 지원을 위해 Discord 서버에 참여하세요.