NuxtでgenerateしたHTMLをChrome拡張機能のポップアップに使いたい

# あらまし

唐突にChrome Extensionを作ってみようと思いました。

アイコンをクリックするとポップアップするHTML上でいろいろやるExtensionです。

で、HTML部分に使い慣れたNuxtを使用しようと思ったのがそもそもの始まりでした。

`yarn generate`したdistフォルダをルートディレクトリに突っ込んで、

manifest.jsonで`"default_popup": "./dist/index.html"`と指定しただけでは**動きませんでした**。

jsを読み込む部分でいろいろエラーが出ているみたい。

そこで、以下の3つの手順を踏むことで**ワーニングは出るものの**実行できるようになったので、書いておきます。

# @benridane さんの記事を参考にGenerateの設定を変えておく

https://qiita.com/benridane/items/1ba70f32c1220a206423

上記の記事を参考に、nuxt.config.jsをいじっておきます。

これをしないと`This page could not be found`と言われます。

# インラインスクリプト、インラインスタイルの削除

`yarn generate`したファイルはローディング部分にスクリプトとスタイルをインラインでベタ書きしているようです。

しかしセキュリティポリシーの都合上、それだと拡張機能内で動かないので、

その部分はさっくり削除しました。

## フォーマッタをかける

ジェネレートしたてのファイルは一行がすごく長いものになっているので、

VSCodeに入っていたPretterでフォーマットして読みやすくしました。

## スタイルとJSを削る

```css
<style>
        #nuxt-loading {
          visibility: hidden;
          opacity: 0;
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          animation: nuxtLoadingIn 10s ease;
          -webkit-animation: nuxtLoadingIn 10s ease;
          animation-fill-mode: forwards;
          overflow: hidden;
        }
        @keyframes nuxtLoadingIn {
          0% {
            visibility: hidden;
            opacity: 0;
          }
          20% {
            visibility: visible;
            opacity: 0;
          }
          100% {
            visibility: visible;
            opacity: 1;
          }
        }
        @-webkit-keyframes nuxtLoadingIn {
          0% {
            visibility: hidden;
            opacity: 0;
          }
          20% {
            visibility: visible;
            opacity: 0;
          }
          100% {
            visibility: visible;
            opacity: 1;
          }
        }
        #nuxt-loading > div,
        #nuxt-loading > div:after {
          border-radius: 50%;
          width: 5rem;
          height: 5rem;
        }
        #nuxt-loading > div {
          font-size: 10px;
          position: relative;
          text-indent: -9999em;
          border: 0.5rem solid #f5f5f5;
          border-left: 0.5rem solid #fff;
          -webkit-transform: translateZ(0);
          -ms-transform: translateZ(0);
          transform: translateZ(0);
          -webkit-animation: nuxtLoading 1.1s infinite linear;
          animation: nuxtLoading 1.1s infinite linear;
        }
        #nuxt-loading.error > div {
          border-left: 0.5rem solid #ff4500;
          animation-duration: 5s;
        }
        @-webkit-keyframes nuxtLoading {
          0% {
            -webkit-transform: rotate(0);
            transform: rotate(0);
          }
          100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
          }
        }
        @keyframes nuxtLoading {
          0% {
            -webkit-transform: rotate(0);
            transform: rotate(0);
          }
          100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
          }
        }
      </style>
```
```js
      <script>
        window.addEventListener("error", function() {
          var e = document.getElementById("nuxt-loading");
          e && (e.className += " error");
        });
      </script>
```

この2つを削りました。

# マニフェストにcontent_security_policyを指定する

いろいろ試した結果、以下のに落ち着きました。

```json
  "content_security_policy":"default-src; script-src chrome-extension: 'self'; style-src 'unsafe-inline';"

```

chrome-extension:の部分はジェネレートしたindexファイルが他のフォルダを見に行っているので、

プロトコルとして記述しなければ動きません。

'unsafe-inline'の部分は、おそらくローダーの回転がインラインで記述されているのかなあと思いますが、定かにはできなかったです。

# 以上で動くはず

自分のChromeでは動きましたが、警告は出ているっぽいので完全に安心というわけではありません。

そもそもNuxtのgenerate機能を使ってポップアップ用のHTMLを作ること自体、あまりおすすめできない現状です…。