module.exports = {
  // evalが使えないのでdevtool設定を変更する
  devtool: "cheap-module-source-map",
  entry: {
　　// 閲覧してるページ上にVueアプリを差し込む
    main: "./src/main.ts",
　　// Firebase Authenticationを動かすために必要
    background: "./src/background.ts"
  },
  output: {
    path: path.resolve("dist"),
    filename: "[name].js"
  },
  .......
}

import Vue from "vue";
import App from "./App.vue";

// 見ているページのbodyにエレメント追加
const appId = "bc-app";
const appDiv = document.createElement("div");
appDiv.id = appId;
document.body.appendChild(appDiv);

new Vue({
  render: h => h(App)
}).$mount(`#${appId}`);

// あとはいつも通りVueでUIを作っていく

firebase.auth()
    .signInWithPopup(new firebase.auth.GoogleAuthProvider())
    .then(result => {
      var token = result.credential.accessToken
      // 取得したuser情報をchrome.storage.localに保存する
      // 丸ごと保存しようとするとデータが大きすぎて
      // Chrome拡張がフリーズするので変換が必要
      var user = result.user
    })

  mounted() {
    this.unsubscribe = firebase.firestore()
      .collection("channels")
      .doc(location.host)
      .collection("messages")
      .orderBy("date")
      .onSnapshot(snapshot => {
        let messages: any[] = []
        snapshot.docs.forEach(doc => {
          messages.push({
            id: doc.id,
            ...doc.data()
          })
        })
        this.messages = messages
     })
}

  db.collection("channels")
    .doc(location.host)
    .collection("messages")
    .add({
      text: this.text,
      date: Date.now(),
      userPhotoURL: this.user.photoURL,
      userName: this.user.displayName,
      uid: this.user.uid
    })