Parcel이 포함된 Vue 브라우저 확장

10849 단어 vueextensionparcelweb
Vue CLI는 대부분의 웹 앱에 훌륭한 워크플로우를 제공합니다. 명령을 실행하고 활성화할 플러그인을 선택하면 경주가 시작됩니다. 그러나 구타를 벗어난 무언가를 원한다면 조금 더 어렵습니다. 나는 웹팩을 설정하는 것이 빠른 프로젝트에 기꺼이 소비하는 것보다 더 오래 걸린다는 것을 알게 되었습니다. 대신 (거의) 구성이 필요하지 않은 Parcel을 사용합니다.

오늘은 브라우저 확장에서 Vue(또는 React, Typescript 또는 빌드 단계가 필요한 모든 것)를 사용하는 방법을 살펴보겠습니다. 우리의 브라우저 확장은 Chrome과 Firefox에서 모두 작동합니다(webextension-polyfill 프로젝트 사용).

어려운 부분은 무엇을 구축할지 결정하는 것입니다. 우리는 그것을 펀트하고 날짜에 따라 색상을 표시하는 위젯을 만들 것입니다.

시작하려면 프로젝트를 초기화하고 몇 가지 종속 항목을 설치하세요.

npm init -y # set up a package.json, accepting all default
# (drop the '-y' if you want to choose a name, license, etc, by hand)
npm install --save-dev parcel parcel-plugin-web-extension


다음으로 릴리스 빌드에 필요한 몇 가지 스크립트( scripts/remove-evals.js 및 scripts/build-zip.js )를 빌리십시오. 나는 원래 다른 상용구에서 이것을 얻었지만 종속성을 제거하기 위해 약간 변경했습니다. 크롬 확장 프로그램이 eval를 허용하지 않는 콘텐츠 보안 정책과 함께 제공되기 때문에 remove-evals.js가 사용된 것 같습니다. build-zip.js는 확장의 프로덕션 빌드를 패키징하는 데 사용됩니다.

다음으로 확장의 진입점을 설명하는 매니페스트 파일을 만듭니다. 확장 프로그램은 팝업만 있는 상당히 간단하지만 사용자의 확장 프로그램에는 콘텐츠 스크립트, 배경 스크립트 또는 옵션 페이지가 있을 수 있습니다.

{
  // src/manifest.json
  "browser_action": {
    "default_popup": "./popup.html"
  },
  "description": "Color of the Day",
  "manifest_version": 2,
  "name": "color-of-the-day",
  "permissions": [],
  "version": "1.0.0",
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}


다음으로 default_popup의 이름(popup.html)과 일치하는 작은 파일을 만듭니다. 이것은 구획 진입점으로 사용되므로 구획은 이 파일에서 찾은 모든 리소스를 묶습니다.

<!-- src/popup.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app"></div>
    <script src="./popup.js"></script>
  </body>
</html>


소포가 <script src="./popup.js"></script> 를 확인하면 해당 파일을 방문하여 번들링해야 하는 다른 코드를 확인합니다. 그것이 우리의 Vue 진입점이 될 것입니다.

// src/popup.js
import Vue from "vue";
import App from "./App.vue";

new Vue({
  el: "#app",
  render: (h) => h(App),
});


마찬가지로 소포는 이제 vue 및 App.vue 모두를 가져옵니다.

<template>
  <div
    class="color-of-the-day"
    :style="{ 'background-color': backgroundColor }"
  ></div>
</template>
<script>
export default {
  computed: {
    hue() {
      return Math.floor(Math.random() * 360);
    },
    backgroundColor() {
      return `hsl(${this.hue}, 100%, 50%)`;
    },
  },
};
</script>
<style>
.color-of-the-day {
  width: 200px;
  height: 200px;
}
</style>


마지막으로 package.json의 스크립트 섹션에 몇 가지 항목을 추가해야 합니다.

{ // package.json
  // ...
  "scripts": {
    "build": "npm run pack && npm run remove-evals && npm run zip",
    "dev": "parcel watch src/manifest.json --out-dir dist --no-hmr",
    "pack": "parcel build src/manifest.json --out-dir dist",
    "remove-evals": "node scripts/remove-evals.js",
    "zip": "node scripts/build-zip.js"
  }
  // ...
}


이제 npm run dev를 실행하여 확장을 빌드하십시오. 이것을 처음 실행하면 소포는 Vue로 작업하고 있음을 인식하고 필요한 일부 패키지를 다운로드합니다(예: vue , vue-template-compiler ). "Built in 14.03s"라고 표시되면 브라우저에서 확장 프로그램을 로드할 수 있습니다.

브라우저에 따라 chrome://extensions 또는 about:debugging#/runtime/this-firefox를 방문하십시오. 이 컴퓨터의 파일에서 확장 프로그램을 처음 로드하는 경우 개발자 모드를 켜야 할 수 있습니다. dist 폴더(chrome) 또는 manifest.json 파일(firefox)을 로드하면 확장 프로그램이 준비됩니다!



이 게시물의 모든 코드는 https://github.com/bgschiller/vue-parcel-web-extension에서 사용할 수 있습니다.

더 많은 혜택



Parcel은 거의 모든 웹 기술을 처리할 수 있을 만큼 똑똑합니다. Typescript를 사용하려면 변경하십시오.popup.js에서 popup.ts로 변경하고 tsconfig.json 파일을 만듭니다. scss를 사용하시겠습니까? Vue 구성 요소의 lang="scss" 태그에 <style>를 추가합니다. 보도에 따르면 Rust 코드도 처리할 수 있지만 시도하지는 않았습니다.
실시간 JavaScript 시계
Gson 복합 객체 사용자 정의 시리얼화 클래스

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage