vue를 사용하여 팝업이 있는 Chrome 플러그인을 빠르게 개발하기

앞에서 말하기

일반적으로 Chrome 플러그인을 사용하는 것은 일반적으로 간단한 js 주입 스크립트를 작성하는 데 사용되며 팝업 창을 주입하기 위해 페이지에 플러그인이 필요하지 않습니까? 예를 들어, 바로 가기 키를 통해 ChatGPT 패널을 빠르게 불러 오거나 번역 패널을 빠르게 불러올 수 있기를 바라며 이번에는 페이지에 바로 가기 키를 삽입해야 팝업 패널을 불러 오는 데 사용할 수있는 다음 플러그인 개발에서 팝업 패널 개발을 위해 vue 프레임 워크를 사용하는 방법을 사용해야합니까?

프레젠테이션

뷰 래피드 개발 크롬 플러그인 템플릿.

기능

뷰 개발 팝업 팝업 페이지

vue로 팝업 페이지 개발하기

바로 가기 키를 사용하여 팝업 창의 표시 및 숨기기를 제어할 수 있습니다.

원클릭 패키징

패키지 스크립트, npm run build 클릭 한 번으로 플러그인 배포 패키지를 생성합니다.

카탈로그 소개

popup

플러그인 아이콘 클릭 가능 팝업 페이지는 vue 프레임워크를 사용하여 개발할 수 있습니다.

panel

vue 프레임워크를 사용하여 개발할 수 있는 브라우저 내 탭 팝업입니다.

Dist

패키징 생성된 플러그인 배포 패키지는 플러그인을 직접 가져올 때 배포 디렉터리를 선택할 수 있습니다.

script

페이지에 동적으로 삽입해야 하는 스크립트는 js 스크립트로 디렉토리에 추가할 수 있으며, 이는 플러그인으로 패키징된 후 페이지에 동적으로 삽입됩니다(즉, <script src="xxx.js"></script> 통해 페이지에 삽입됨).

init.js

각 디렉토리에 필요한 종속성을 설치하는 템플릿 초기화 스크립트입니다.

build.js

패키징 스크립트를 npm run build 플러그인 배포 패키지를 생성합니다.

contentScript.js

js 파일을 동적으로 삽입해야 하며, 패키징 중에 자동으로 생성됩니다.

manifest.json

플러그인 구성 정보는 필요에 따라 구성하기만 하면 됩니다.

사용

템플릿 다운로드

명령줄 빠른 생성

• 다운로드 도구 설치

  npm i -g jyeontu
  

  

  버전 1.2.3 이상 필요

• 템플릿 만들기

  jyeontu create
  

명령을 입력한 다음 메시지가 표시되면 입력하거나 선택합니다.

• 플러그인 초기화

  cd .\chrome플러그인 빠른 개발\
  npm run init
  

  

  종속성 설치가 완료될 때까지 기다리세요.

• 플러그인 패키징

  npm run build

• 브라우저 가져오기 플러그인

• 플러그인 효과

  • 플러그인 아이콘을 클릭하면 팝업 팝업 창이 나타납니다.
  • alt + v 호출 페이지 팝업 번역 및 ChatGPT가 내장된 템플릿 팝업

개발 및 디버깅

팝업 페이지가 개발 및 디버깅되었습니다.

cd .\popup\
npm run serve

팝업 팝업 패널은 vue 프레임워크로 작성되었으며, 프로젝트를 직접 시작하여 페이지를 직접 변경하도록 변경할 수 있습니다 플러그인 루트 디렉토리를 변경하여 패키징 명령을 실행하여 업데이트할 수 있습니다.

패널 페이지 개발 및 디버깅

팝업 페이지에서와 마찬가지로 프로젝트를 직접 시작하여 디버그하고 변경한 후 다시 패키징하면 됩니다.

소스 코드

웰컴 스타, 웰컴 홍보

작성자에게 문의하기