包みを持つVueブラウザの拡張子

10542 ワード
vue extension parcel web テキストリンク
VueのCLIはほとんどのWebアプリのための素晴らしいワークフローを提供しています.コマンドを実行し、どのプラグインを有効にするかを選択し、レースに出ます.しかし、あなたが殴られた経路から何かを望むならば、それはもう少し難しいです.私は、webpackをセットアップすることが速いプロジェクトに費やす気があるより長くかかるとわかりました.代わりに、私は小包を使います.
今日では、ブラウザの拡張子でVue(またはReaction、またはTypesScript、またはビルドステップを必要とする何か)を使用する方法を説明します.ブラウザの拡張機能はChromeとFirefoxの両方で動作します.
ハードな部分は、何を構築するかを決定している.私たちは、その1つにパンチし、ちょうど日付に応じて色を示すウィジェットを作る.
開始するには、プロジェクトを初期化し、カップルの依存関係をインストールします.
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
次に、リリースを構築するために必要なスクリプトを2つ借りるscripts/remove-evals.js and scripts/build-zip.js . 私はもともと別のBoilerplateからこれらを得たが、依存関係を削除するためにいくつかの変更を行った.それは削除evalsのようです.は、Chrome Extensionsが禁止する内容セキュリティ方針で出荷するので、JSが使われますeval . ビルドジップ.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 'S :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 and 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>
最後に、パッケージのスクリプトセクションにいくつかの項目を追加する必要があります.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 ). 一旦「14.03 sに建てられた」と言うならば、あなたのブラウザーで拡張をロードすることができます.
訪問chrome://extensions or about:debugging#/runtime/this-firefox , ブラウザによって異なります.このコンピュータ上のファイルから拡張モジュールをロードしたのは初めてです.ロードするdist フォルダまたはマニフェスト.JSONファイル(Firefox)、および拡張機能は準備ができている!

この投稿からのすべてのコードはhttps://github.com/bgschiller/vue-parcel-web-extension

より多くのグッズ


小包は、ほぼすべてのWeb技術を処理するのに十分スマートです.あなたがtypescriptを使いたいならばpopup.js to popup.ts とtsconfigを作ります.JSONファイル.scssを使用しますか?追加lang="scss" に<style> Vueコンポーネントのタグ.私はそれを試していないが、伝えられるところでは、それは錆びコードを扱うことさえできます.
[tvOS]最初にフォーカスされるビューを指定する
シーケンス/組合せ