Chrome extensionのoptionページをVue.js(vue-cli)で構築する際のメモ

何度も忘れるのでメモ。
chrome側のポリシー設定とvue-clieのビルドコンフィグをいじる。

詳細

manifest.json

chrome extensionのmanifest.jsonにてcontent_security_policyにてevalを許可する

参考

developer.mozilla.org

vue-cli構成のconfig/index.js

buildするとdist/index.htmlとdist/staticのpathが合わなくなる。buildconfigで相対参照に変更する。
具体的にはassetsPublicPathをコメントアウトする。
(4/21: 追記) コメントアウトだとwebpackの動作がおかしくなるのでブランクを設定する。

assetsPublicPath : '',

参考

• Vue.js入門記事

qiita.com

デバッグ実行

npm run buildしてdist以下のファイルをchrome用のプロジェクトフォルダに入れる。
manifest.jsonのoptions参照先にindex.htmlを指定する。

🎉動作確認完了🎉

その他

時間無いので雑なメモ。
時間できたら参考ソースをGitHubに上げてノウハウをQiitaに書く。