ビルドは、現在のコードのセットアップとクロム拡張機能

前の記事ではHow to set a chrome extension base code setup . この記事では、私はカバーするつもりですhow to use test it and publish to chrome extension marketplace app .
完了したら、すべての前の記事のステップを完了しました.あなたのコードディレクトリに以下のフォルダ構造があります.

├── public
│   ├── images
│   ├── background.js (Require for a chrome extension)
│   ├── index.html (Extension home file)
│   └── manifest.json (Detect as a chrome extension)
├── src
│   ├── assets
│   ├── App.vue (Main UI screen)
│   └── main.js (Vue main JS file)
├── dist (Build folder)
├── node_modules
├── README.md
├── package.json
├── babel.config.js
└── .gitignore

フォルダの上にはdist フォルダ.以下のコマンドをコードのメインディレクトリに使ってください

$ yarn build

したら、あなたはdist フォルダ.distフォルダはchrome拡張の主要な部分になります.ので、我々はローカルポートのアプリをテストします.しかし、我々は圧縮します.

上記の画面の手順に従ってdist を返します.Chrome拡張モジュールを開きます.
クロム拡張子の名前はCool chrome theme . 次に、Vueアプリでしたすべての機能をテストします.一度テストを行った.これは、アプリケーションを公開する時間です.
Chromeはすでにアプリケーションを公開する方法についていくつかの記事があります.調べてください.
Publish chrome extension
参考
なぜ私はVueをクロム拡張子に使用しましたか?
私たちはプレーンHTML、JS、およびCSSを使用してUIの画面を開発することができます.私たちは複雑な画面を構築するときにHTMLとJS.それは開発に多くの時間と複雑さがかかります.
投稿をいただきありがとうございます😀.
Code URL
Demo extension