Vue Chrome Extension : vue.js로 브라우저 애드온을 구축하십시오

이 자습서는 새 탭 페이지를 수정하는 간단한 vue 크롬 확장을 구축하는 것을 보여줍니다. 우리는 빠른 개발과 즐거운 코딩을 위해 vue.js를 사용합니다

브라우저 확장자는 브라우저 기능을 향상시키고 광고 차단, 암호 관리 및 탭 조직과 같은 작업을 수행합니다. 그들은 친숙한 웹 기술 (HTML, CSS, JavaScript)을 사용하여 구축되었지만 액세스 브라우저 별 API. 이 튜토리얼의 코드는 github에서 볼 수 있습니다 주요 개념 :

효율적인 크롬 확장 개발을 위해 vue.js를 활용하십시오 매니페스트 파일과 배경 스크립트로 기본 확장자를 만들어 개발자 모드로 설치하십시오. Manifest 파일에서

를 사용하여 새 탭 페이지를 대체하십시오. 핫 재 장전과 같은 기능을 위해

보일러 플레이트를 사용하여 vue를 통합합니다. VUE 구성 요소와 함께 동적 컨텐츠 (예 : API의 농담)를 가져오고 표시합니다. 크롬 스토리지를 업데이트하여 사용자 상호 작용을 저장합니다 (예 : 선호 농담). 아이콘의

와 같은 라이브러리로 UI를 향상시킵니다

기본 확장 제작 : 핵심 구성 요소는 매니페스트 파일 (JSON) 및 배경 스크립트입니다. 매니페스트는 확장 정보 (버전, 리소스, 권한)를 제공하는 반면, 배경 스크립트는 브라우저 이벤트 (새 탭 생성과 같은)를 처리합니다. "안녕하세요, 세계!" 확장 :

• 폴더 () 및 파일을 만듭니다 (,
:
• chrome_url_overrides
• vue-web-extension :
확장 설치 : Chrome ()에서 개발자 모드를 활성화하십시오. "포장되지 않은로드"를 클릭하고
• 폴더를 선택하고 "열기"를 클릭하십시오. "안녕하세요, 세상!" 경고가 나타나야합니다.
• vue-awesome 새 탭 오리 새 탭 페이지를 사용자 정의하려면
: 를 작성하십시오

업데이트 포함 : 변경 사항을 확인하려면 확장자를 다시로드하십시오

통합 vue :

보일러 플레이트를 사용하십시오 (Node.js 및 npm 필요) :

(axios 설치, 프롬프트 답변).
1. vue init kocal/vue-web-extension new-tab-page
2. cd new-tab-page (
폴더로 빌드)
3. 이 보일러 플레이트는 핫 재 장전 및 스크립트 번들링으로 개발을 단순화합니다. 구조에는 새 탭 페이지의 VUE 구성 요소를 빌드 할 수있는 가 포함됩니다. 원본 기사에 설명 된대로 npm install 및
를 조정하여 새 탭 페이지의 HTML 및 JavaScript 파일을 올바르게 가리 키십시오. 나머지 튜토리얼 세부 사항은 농담을 가져 오기, Chrome Storage를 사용한 데이터 지속 데이터 및 를 사용하여 스타일 개선을이 VUE 구성 요소의 맥락에서 모두 사용합니다. 마지막으로 Chrome 웹 스토어에 포장 및 업로드하는 과정에 대해 설명합니다.

위 내용은 Vue Chrome Extension : vue.js로 브라우저 애드온을 구축하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!