{"id":181,"date":"2020-10-20T23:13:11","date_gmt":"2020-10-20T14:13:11","guid":{"rendered":"http:\/\/localhost:8000\/?p=181"},"modified":"2021-03-20T10:39:45","modified_gmt":"2021-03-20T01:39:45","slug":"vue-vuetify-firebase-chrome-extension","status":"publish","type":"post","link":"http:\/\/localhost:8000\/2020\/10\/vue-vuetify-firebase-chrome-extension.html","title":{"rendered":"Vue.js+TypeScript+Firebase\u3067Chrome Extension\u3092\u4f5c\u3063\u305f"},"content":{"rendered":"<p>\u4efb\u610f\u306eWEB\u30b5\u30a4\u30c8\u306b\u81ea\u5206\u7528\u306e\u30e1\u30e2\u3092\u6b8b\u3059\u3053\u3068\u304c\u3067\u304d\u308b Chrome Extension  \u3092\u4f5c\u3063\u3066\u516c\u958b\u3057\u307e\u3057\u305f\u3002<br \/>\nplaintext\u30e2\u30fc\u30c9 or markdown\u30e2\u30fc\u30c9\u3067\u30e1\u30e2\u3092\u53d6\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u3088\u3051\u308c\u3070\u4f7f\u3063\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<br \/>\n\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001\u3053\u306eChrome\u62e1\u5f35\u958b\u767a\u306e\u30b3\u30a2\u306a\u90e8\u5206\u304c\u51fa\u6765\u4e0a\u304c\u308b\u307e\u3067\u306b\u3064\u3044\u3066\u7d39\u4ecb\u3057\u3066\u3044\u3053\u3046\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<p><b>Web Store\u30ea\u30f3\u30af<\/b><br \/>\n<a href=\"https:\/\/chrome.google.com\/webstore\/detail\/memorun\/lhkibcggoojcpjmigjohdlgfgjdbjkpb\">https:\/\/chrome.google.com\/webstore\/detail\/memorun\/lhkibcggoojcpjmigjohdlgfgjdbjkpb<\/a><\/p>\n<p><b>\u7d39\u4ecb\u52d5\u753b<\/b><br \/>\n<iframe loading=\"lazy\" title=\"memorun demo\" width=\"640\" height=\"480\" src=\"https:\/\/www.youtube.com\/embed\/ujT2miGO5wk?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<h1>\u4f7f\u7528\u3057\u3066\u3044\u308b\u6280\u8853<\/h1>\n<ul>\n<li>Chrome Extension<\/li>\n<li>Vue.js + Vuetify<\/li>\n<li>TypeScript<\/li>\n<li>Firebase\n<ul>\n<li>Authentication<\/li>\n<li>Cloud Firestore<\/li>\n<li>Cloud Function\uff08\u3053\u306e\u8a18\u4e8b\u3067\u306f\u51fa\u3066\u304d\u307e\u305b\u3093\uff09<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2>Vue.js\u3092\u4f7f\u3063\u305fChrome Extension\u306e\u96db\u5f62\u4f5c\u6210<\/h2>\n<p>\u30bc\u30ed\u304b\u3089\u69cb\u7bc9\u3057\u3088\u3046\u304b\u3068\u601d\u3063\u305f\u306e\u3067\u3059\u304c\u3001\u305d\u3082\u305d\u3082Chrome\u62e1\u5f35\u306e\u3053\u3068\u3092\u3088\u304f\u5206\u304b\u3063\u3066\u304a\u3089\u305a\u3001\u6a19\u6e96\u7684\u306a\u69cb\u6210\u3092\u77e5\u308b\u305f\u3081\u306b\u3082\u3001 <a href=\"https:\/\/github.com\/Kocal\/vue-web-extension\">vue-web-exetnsion<\/a> \u3092\u4f7f\u3063\u3066\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210\u3092\u3059\u308b\u3053\u3068\u306b\u3057\u307e\u3057\u305f\u3002<\/p>\n<h3>npm\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h3>\n<p><a href=\"https:\/\/rinoguchi.net\/2019\/05\/node-npm.html\">\u3053\u3061\u3089<\/a> \u3092\u53c2\u8003\u306b\u3001npm\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n<h3>vue-cli\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h3>\n<p>vue-web-extension\u306fvue-cli\u304c\u4e8b\u524d\u306b\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3055\u308c\u3066\u3044\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u306e\u3067\u3001vue-cli\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-sh\">npm install -g @vue\/cli\nnpm install -g @vue\/cli-init<\/code><\/pre>\n<h3>\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u4f5c\u6210<\/h3>\n<p>1\u30b3\u30de\u30f3\u30c9\u3067\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u304c\u4f5c\u6210\u3055\u308c\u307e\u3059\u3002TypeScript\u3092\u6307\u5b9a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u306a\u3044\u306e\u3067\u3001\u3053\u306e\u6642\u70b9\u3067\u306fJavaScript\u304c\u51fa\u529b\u3055\u308c\u307e\u3059\u3002<\/p>\n<pre><code>vue init kocal\/vue-web-extension memorun_extension\n\n? Project name memorun_extension\n? Project description A Extension to take a memo.\n? Author rinoguchi\n? License \n? Use Mozilla&#039;s web-extension polyfill? (https:\/\/github.com\/mozilla\/webextension-polyfill) Yes\n? Provide an options page? (https:\/\/developer.chrome.com\/extensions\/options) Yes\n? Install vue-router? No\n? Install vuex? No\n? Install axios? No\n? Install ESLint? Yes\n? Pick an ESLint preset Standard\n? Install Prettier? No\n? Automatically install dependencies? npm<\/code><\/pre>\n<p>\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u30d5\u30a9\u30eb\u30c0\u306b\u79fb\u52d5\u3057\u3066\u3001development\u7528\u306bExtension\u3092build\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-bash\">cd memorun_extension\nnpm run build:dev<\/code><\/pre>\n<p>\u3053\u308c\u306b\u3088\u308a\u3001<code>\/dist\/<\/code>\u306bExtension\u30b3\u30fc\u30c9\u304c\u51fa\u529b\u3055\u308c\u307e\u3059\u3002<\/p>\n<h3>\u958b\u767a\u4e2d\u306e\u62e1\u5f35\u6a5f\u80fd\u3092\u52d5\u4f5c\u3055\u305b\u308b<\/h3>\n<p><a href=\"http:\/\/chrome:\/\/extensions\/\">chrome:\/\/extensions\/<\/a><br \/>\n\u306b\u30a2\u30af\u30bb\u30b9\u3057\u3001\u53f3\u4e0a\u306e<code>\u30c7\u30d9\u30ed\u30c3\u30d1\u30fc\u30e2\u30fc\u30c9<\/code>\u3092ON\u306b\u3059\u308b\u3068\u3001<code>\u30d1\u30c3\u30b1\u30fc\u30b8\u5316\u3055\u308c\u3066\u3044\u306a\u3044\u62e1\u5f35\u6a5f\u80fd\u3092\u8aad\u307f\u8fbc\u3080<\/code>\u30dc\u30bf\u30f3\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n<p>\u305d\u306e\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u3001\u3055\u304d\u307b\u3069\u4f5c\u6210\u3055\u308c\u305f<code>dist<\/code>\u30d5\u30a9\u30eb\u30c0\u3092\u6307\u5b9a\u3059\u308b\u3068\u3001\u958b\u767a\u4e2d\u306e\u62e1\u5f35\u6a5f\u80fd\u304c\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3055\u308c\u307e\u3059\u3002<br \/>\n<img src=\"http:\/\/localhost:8000\/wp-content\/uploads\/2020\/10\/20200504161239-600x266.png\" alt=\"\" \/><\/p>\n<p>\u62e1\u5f35\u6a5f\u80fd\u306e\u30a2\u30a4\u30b3\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u3001\u300cHello world!\u300d\u3068\u8868\u793a\u3055\u308c\u307e\u3059\u3002<br \/>\n<img src=\"http:\/\/localhost:8000\/wp-content\/uploads\/2020\/10\/20200504161535.png\" alt=\"\" \/><\/p>\n<h3>Hot Reload<\/h3>\n<p>vue-web-extension\u3067\u4f5c\u3063\u305f\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u306f\u3001<code>npm run watch:dev<\/code>\u3067\u5909\u66f4\u3092\u691c\u77e5\u3057\u3066\u30ea\u30e9\u30f3\u3057\u3066\u304f\u308c\u307e\u3059\u3002\u3055\u3089\u306b\u3001<a href=\"https:\/\/github.com\/rubenspgcavalcante\/webpack-extension-reloader\">webpack-extension-reloader<\/a>\u3092\u4f7f\u3063\u3066\u3001\u30d6\u30e9\u30a6\u30b6\u306b\u767b\u9332\u3057\u3066\u3044\u308bExtension\u3092\u66f4\u65b0\u3057\u3066\u304f\u308c\u307e\u3059\u3002<br \/>\n\u3053\u308c\u3092\u6bce\u56de\u624b\u4f5c\u696d\u3067\u3084\u308b\u306e\u306f\u3084\u308b\u6c17\u304c\u8d77\u304d\u306a\u304b\u3063\u305f\u306e\u3067\u3068\u3066\u3082\u52a9\u304b\u308a\u307e\u3059\u3002<\/p>\n<h2>TypeScript\u5316<\/h2>\n<p>vue-cli\u3067TypeScript\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210\u3057\u3066\u307f\u3066\u3001\u5dee\u5206\u3092\u6bd4\u8f03\u3057\u306a\u304c\u3089TypeScript\u5316\u3057\u3066\u3044\u304d\u307e\u3057\u305f\u3002\u5909\u66f4\/\u8ffd\u52a0\u3057\u305f\u30d5\u30a1\u30a4\u30eb\u306e\u5909\u66f4\u70b9\u3092\u5217\u6319\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n<h3>package.json<\/h3>\n<ul>\n<li><code>webextension-polyfill<\/code>\u306f\u3001W3 Browser Extensions group\u3067\u6a19\u6e96\u5316\u3055\u308c\u305fWebExtension API\u3092\u4f7f\u7528\u3059\u308bExtension\u3092\u3001\u6700\u5c0f\u9650\u306e\u5909\u66f4\u3067\u5404\u30d6\u30e9\u30a6\u30b6\u4e0a\u3067\u52d5\u304b\u3059\u305f\u3081\u306e\u3082\u306e\u3089\u3057\u3044\u3067\u3059\u304c\u3001\u3053\u308c\u306fTypeScript\u7248\u306b\u5909\u3048\u3066\u3044\u307e\u3059<\/li>\n<li>class-style syntax\u3067Vue Component\u3092\u8a18\u8f09\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b\u305f\u3081\u306b<a href=\"https:\/\/github.com\/vuejs\/vue-class-component\">vue-class-component<\/a>\u3092\u3001props\u306a\u3069\u3092\u30c7\u30b3\u30ec\u30fc\u30bf\u3067\u8a18\u8f09\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b\u305f\u3081\u306b<a href=\"https:\/\/github.com\/kaorun343\/vue-property-decorator\">vue-property-decorator<\/a>\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3066\u3044\u307e\u3059\u3002\n<ul>\n<li>vue-property-decorator\u306fvue-class-component\u306b\u4f9d\u5b58\u3057\u3066\u3044\u308b\u305f\u3081package.json\u306b\u306f\u8a18\u8f09\u4e0d\u8981<\/li>\n<li><a href=\"https:\/\/github.com\/vuejs\/rfcs\/pull\/17#issuecomment-494242121\">Class API\u306fVue 3\u306eRFC\u304b\u3089\u843d\u3061\u305f<\/a>\u305f\u3081\u3001Vue 3\u306b\u30d0\u30fc\u30b8\u30e7\u30f3\u30a2\u30c3\u30d7\u3059\u308b\u969b\u306f\u5909\u66f4\u304c\u5fc5\u8981\n<pre><code class=\"language-json\">   &quot;dependencies&quot;: {\n-    &quot;webextension-polyfill&quot;: &quot;^0.3.1&quot;\n+    &quot;webextension-polyfill-ts&quot;: &quot;^0.15.0&quot;,\n+    &quot;vue-property-decorator&quot;: &quot;^8.4.2&quot;\n   },\n  &quot;devDependencies&quot;: {\n+    &quot;ts-loader&quot;: &quot;^7.0.2&quot;,\n+    &quot;typescript&quot;: &quot;^3.8.3&quot;\n  },<\/code><\/pre>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3>webpack.config.js<\/h3>\n<ul>\n<li>entry\u306e\u30d5\u30a1\u30a4\u30eb\u540d\u3092<code>*.js<\/code>\u3092<code>*.ts<\/code>\u306b\u5909\u66f4\u3057\u3066\u3044\u307e\u3059<\/li>\n<li>import\u6587\u3067\u62e1\u5f35\u5b50\u3092\u66f8\u304b\u306a\u304f\u3066\u6e08\u3080\u3088\u3046\u306bresolve\u306b<code>.ts<\/code>\u3092\u8ffd\u52a0\u3057\u307e\u3059<\/li>\n<li><code>ts-loader<\/code>\u3067TypeScript\u3092compile\u3057\u307e\u3059\u3002\u307e\u305f\u3001<code>.vue<\/code>\u3092ts\u30e2\u30b8\u30e5\u30fc\u30eb\u3068\u3057\u3066compile\u5bfe\u8c61\u306b\u3057\u3066\u3044\u307e\u3059\n<pre><code class=\"language-javascript\"> const config = {\n   entry: {\n-    &#039;background&#039;: &#039;.\/background.js&#039;,\n-    &#039;popup\/popup&#039;: &#039;.\/popup\/popup.js&#039;,\n-    &#039;options\/options&#039;: &#039;.\/options\/options.js&#039;,\n+    &#039;background&#039;: &#039;.\/background.ts&#039;,\n+    &#039;popup\/popup&#039;: &#039;.\/popup\/popup.ts&#039;,\n+    &#039;options\/options&#039;: &#039;.\/options\/options.ts&#039;,\n   },\n   output: {\n     path: __dirname + &#039;\/dist&#039;,\n     filename: &#039;[name].js&#039;,\n   },\n   resolve: {\n-    extensions: [&#039;.js&#039;, &#039;.vue&#039;],\n+    extensions: [&#039;.js&#039;, &#039;.vue&#039;, &#039;.ts&#039;],\n   },\n   module: {\n     rules: [\n       {\n         test: \/\\.vue$\/,\n         loader: &#039;vue-loader&#039;,\n       },\n+      {\n+        test: \/\\.ts$\/,\n+        use: [\n+          {\n+            loader:&#039;ts-loader&#039;,\n+            options: {\n+              appendTsSuffixTo: [\/\\.vue$\/]\n+            }\n+          }\n+        ],\n+        exclude: \/node_modules\/\n+      },\n      ]\n  }<\/code><\/pre>\n<\/li>\n<\/ul>\n<h3>tsconfig.json<\/h3>\n<ul>\n<li>typescript\u306ecompile\u8a2d\u5b9a\u3067\u3059\u3002\u57fa\u672c\u306fVue.js\u306e<a href=\"https:\/\/jp.vuejs.org\/v2\/guide\/typescript.html\">\u63a8\u5968\u69cb\u6210<\/a>\u306b\u5408\u308f\u305b\u3066\u3042\u308a\u307e\u3059<\/li>\n<li><code>experimentalDecorators<\/code>\u306f<code>vue-property-decorator<\/code>\u3092\u4f7f\u3063\u305f\u30c7\u30b3\u30ec\u30fc\u30b7\u30e7\u30f3\u3067\u30ef\u30fc\u30cb\u30f3\u30b0\u304c\u767a\u751f\u3057\u306a\u3044\u3088\u3046\u306b\u3059\u308b\u305f\u3081\u306e\u30aa\u30d7\u30b7\u30e7\u30f3\u3067\u3059\n<pre><code class=\"language-json\">{\n  &quot;compilerOptions&quot;: {\n    &quot;target&quot;: &quot;es5&quot;,\n    &quot;strict&quot;: true,\n    &quot;module&quot;: &quot;es2015&quot;,\n    &quot;moduleResolution&quot;: &quot;node&quot;,\n    &quot;experimentalDecorators&quot;: true,\n  }\n}<\/code><\/pre>\n<\/li>\n<\/ul>\n<h3>shims-vue.d.ts<\/h3>\n<p>eslint\u3067<code>Cannot find module<\/code>\u30a8\u30e9\u30fc\u304c\u51fa\u308b\u3053\u3068\u3092\u56de\u907f\u3059\u308b\u76ee\u7684\u3067\u8ffd\u52a0\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-typescript\">declare module &#039;*.vue&#039; {\n  import Vue from &#039;vue&#039;\n  export default Vue\n}<\/code><\/pre>\n<h3>App.vue<\/h3>\n<ul>\n<li>\u307b\u307c\u540c\u3058\u5b9f\u88c5\u306epopup\/App.vue\u3068options\/App.vue\u304c\u3042\u308a\u307e\u3059\u304c\u3001\u540c\u69d8\u306b\u5909\u66f4\u3057\u307e\u3059\u3002<\/li>\n<li>\n<p>Vue\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30fc\u30b9\u3092\u7d99\u627f\u3059\u308b\u5f62\u3067class\u3092\u5b9a\u7fa9\u3057\u3001@Component\u3067\u88c5\u98fe\u3057\u3066\u3044\u307e\u3059\u3002\u3082\u3068\u3082\u3068<code>data()<\/code>\u3067\u7ba1\u7406\u3057\u3066\u305f\u30d7\u30ed\u30d1\u30c6\u30a3\u306fclass\u30d7\u30ed\u30d1\u30c6\u30a3\u3068\u3057\u3066\u5b9a\u7fa9\u3057\u307e\u3059\uff08\u4eca\u56de\u306fmessage\u3068\u3044\u3046\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u8ffd\u52a0\u3057\u3066\u307e\u3059\u304c\uff09\u3002<\/p>\n<pre><code class=\"language-typescript\"> &lt;template&gt;\n   &lt;div&gt;\n-    &lt;p&gt;Hello world!&lt;\/p&gt;\n+    &lt;p&gt;{{ message }}&lt;\/p&gt;\n   &lt;\/div&gt;\n &lt;\/template&gt;\n\n-&lt;script&gt;\n-export default {\n-  data () {\n-    return {}\n-  }\n+&lt;script lang=&quot;ts&quot;&gt;\n+import { Component, Vue } from &#039;vue-property-decorator&#039;\n+\n+@Component\n+export default class App extends Vue {\n+  message = &#039;Hello world with TypeScript!&#039;\n }\n &lt;\/script&gt;<\/code><\/pre>\n<\/li>\n<\/ul>\n<h3>popup.ts, options.ts<\/h3>\n<ul>\n<li>\u62e1\u5f35\u5b50\u3092<code>*.js<\/code>\u304b\u3089<code>*.ts<\/code>\u306b\u5909\u66f4\u3057\u3066\u3001\u578b\u3092\u8a18\u8f09\u3057\u307e\u3059<\/li>\n<li>\n<p>\uff12\u30d5\u30a1\u30a4\u30eb\u3068\u3082\u540c\u69d8\u306b\u3001browser\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092webextension-polyfill-ts\u306e\u3082\u306e\u306b\u5909\u66f4\u3057\u307e\u3059<\/p>\n<pre><code class=\"language-typescript\"> import Vue from &#039;vue&#039;\n-import App from &#039;.\/App&#039;\n+import App from &#039;.\/App.vue&#039;\n+import { browser } from &quot;webextension-polyfill-ts&quot;\n\n-global.browser = require(&#039;webextension-polyfill&#039;)\n-Vue.prototype.$browser = global.browser\n+Vue.prototype.$browser = browser\n\n \/* eslint-disable no-new *\/\n new Vue({\n   el: &#039;#app&#039;,\n\n-   render: h =&gt; h(App)\n+  render: (h: CreateElement): VNode =&gt; h(App),\n })<\/code><\/pre>\n<\/li>\n<\/ul>\n<h3>background.js<\/h3>\n<p>\u3068\u308a\u3042\u3048\u305a\u3001\u3053\u306e\u6642\u70b9\u3067\u306f\u3084\u308a\u305f\u3044\u51e6\u7406\u3082\u306a\u3044\u306e\u3067\u3001\u62e1\u5f35\u5b50\u3060\u3051'.ts'\u306b\u5909\u3048\u3066\u51e6\u7406\u306f\u5168\u524a\u9664\u3057\u307e\u3059\u3002<\/p>\n<h3>\u52d5\u4f5c\u78ba\u8a8d<\/h3>\n<p>\u3053\u3053\u307e\u3067\u5b9f\u88c5\u3059\u308c\u3070\u4e00\u65e6TypeScript\u5316\u5b8c\u4e86\u3067\u3059\u3002<br \/>\n<img src=\"http:\/\/localhost:8000\/wp-content\/uploads\/2020\/10\/20200506120651.png\" alt=\"\" \/><\/p>\n<h2>ESLint\u3068Prettier\u306e\u8a2d\u5b9a<\/h2>\n<p>\u672c\u683c\u7684\u306b\u958b\u767a\u3092\u958b\u59cb\u3059\u308b\u524d\u306b\u3001Linter\u3068Formatter\u3092\u8a2d\u5b9a\u3057\u3088\u3046\u3068\u601d\u3044\u307e\u3059\u3002<br \/>\n<a href=\"https:\/\/qiita.com\/markey\/items\/cfeb2a07e11d43676505\">\u3053\u3061\u3089<\/a>\u306e\u8a18\u4e8b\u3092\u3042\u308a\u304c\u305f\u304f\u53c2\u8003\u306b\u3055\u305b\u3066\u3044\u305f\u3060\u304d\u3064\u3064\u3001\u30a8\u30e9\u30fc\u304c\u51fa\u305f\u3068\u3053\u308d\u306a\u3069\u3092\u4fee\u6b63\u3057\u3066\u9069\u7528\u3057\u307e\u3057\u305f\u3002<\/p>\n<p>\u307e\u305a\u306f\u5fc5\u8981\u306a\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-sh\">npm install --save-dev eslint @typescript-eslint\/parser @typescript-eslint\/eslint-plugin eslint-plugin-vue\nnpm install --save-dev prettier eslint-plugin-prettier eslint-config-prettier<\/code><\/pre>\n<p>\u6b21\u306b<code>eslintrc.js<\/code>\u306e\u8a18\u8ff0\u3092\u4fee\u6b63\u3057\u307e\u3059\u3002\u4ee5\u4e0b\u306e\u8a2d\u5b9a\u306b\u3057\u3066\u3042\u308a\u307e\u3059\u3002<\/p>\n<ul>\n<li>\u6587\u5b57\u5217\u306f\u30b7\u30f3\u30b0\u30ea\u30af\u30a9\u30fc\u30c8\u3067\u56f2\u307f\u3001\u30bb\u30df\u30b3\u30ed\u30f3\u306f\u7701\u7565\u3059\u308b<\/li>\n<li>prettier\u5074\u306e\u8a2d\u5b9a\u306b\u5408\u308f\u305b\u3001attribute\u306f3\u3064\u307e\u30671\u884c\u306b\u8a18\u8f09OK\n<pre><code class=\"language-javascript\"> module.exports = {\n   root: true,\n+  parser:  &#039;vue-eslint-parser&#039;,\n   parserOptions: {\n-    parser: &#039;babel-eslint&#039;\n+    parser: &#039;@typescript-eslint\/parser&#039;\n   },\n   env: {\n     browser: true,\n     webextensions: true,\n   },\n   extends: [\n     \/\/ https:\/\/github.com\/vuejs\/eslint-plugin-vue#priority-a-essential-error-prevention\n     \/\/ consider switching to `plugin:vue\/strongly-recommended` or `plugin:vue\/recommended` for stricter rules.\n-    &#039;plugin:vue\/essential&#039;,\n+    &#039;plugin:vue\/recommended&#039;,\n     \/\/ https:\/\/github.com\/standard\/standard\/blob\/master\/docs\/RULES-en.md\n-    &#039;standard&#039;  ],\n+    &#039;standard&#039;,\n+    &#039;plugin:@typescript-eslint\/recommended&#039;,\n+    &#039;prettier\/@typescript-eslint&#039;,\n+    &#039;plugin:prettier\/recommended&#039;,\n+  ],\n   \/\/ required to lint *.vue files\n   plugins: [\n     &#039;vue&#039;\n   ],\n   \/\/ add your custom rules here\n   rules: {\n     \/\/ allow async-await\n     &#039;generator-star-spacing&#039;: &#039;off&#039;,\n     \/\/ allow debugger during development\n-    &#039;no-debugger&#039;: process.env.NODE_ENV === &#039;production&#039; ? &#039;error&#039; : &#039;off&#039;\n+    &#039;no-debugger&#039;: process.env.NODE_ENV === &#039;production&#039; ? &#039;error&#039; : &#039;off&#039;,\n+    &#039;prettier\/prettier&#039;: [\n+      &#039;error&#039;,\n+      {\n+        &#039;singleQuote&#039;: true,\n+        &#039;semi&#039;: false\n+      }\n+    ],\n+    &quot;vue\/max-attributes-per-line&quot;: [&quot;error&quot;, {\n+      &quot;singleline&quot;: 3,\n+    }],\n   }\n }<\/code><\/pre>\n<\/li>\n<\/ul>\n<p>\u3053\u308c\u3067ES Lint\u306f\u6709\u52b9\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u304c\u3001Prettier\u306b\u3088\u308bautofix\u304c\u307e\u3060\u6709\u52b9\u306b\u306a\u3063\u3066\u306a\u3044\u306e\u3067\u3001\u6700\u5f8c\u306bVS Code\u306esettings.json\u3092\u4fee\u6b63\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-json\">{\n    &quot;editor.formatOnSave&quot;: false,\n    &quot;editor.codeActionsOnSave&quot;: {\n        &quot;source.fixAll.eslint&quot;: true\n    },\n    &quot;eslint.validate&quot;: [\n        &quot;javascript&quot;,\n        &quot;typescript&quot;,\n        &quot;vue&quot;,\n    ]\n}<\/code><\/pre>\n<p>\u3053\u308c\u3067\u8a2d\u5b9a\u5b8c\u4e86\u3067\u3059\u3002\u5927\u91cf\u306berror\u3084warning\u304c\u3067\u307e\u3059\u304c\u3001\u30d5\u30a1\u30a4\u30eb\u958b\u3044\u3066\u4fdd\u5b58\u3057\u76f4\u3059\u3068autofix\u3055\u308c\u3066\u7dba\u9e97\u306a\u30b3\u30fc\u30c9\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<h2>\u30e1\u30e2\u8868\u793a\u30fb\u7de8\u96c6\u753b\u9762\u3092\u4f5c\u6210<\/h2>\n<p>\u30de\u30c6\u30ea\u30a2\u30eb\u30c7\u30b6\u30a4\u30f3\u306eVue\u7528UI\u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u3042\u308b<a href=\"https:\/\/vuetifyjs.com\/en\/\">Vuetify<\/a>\u3092\u4f7f\u3063\u3066\u753b\u9762\u3092\u4f5c\u3063\u3066\u3044\u3053\u3046\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<h3>Vuetify\u3092\u5c0e\u5165<\/h3>\n<p><a href=\"https:\/\/vuetifyjs.com\/en\/getting-started\/installation\/#webpack-install\">\u3053\u3061\u3089<\/a>\u306b\u3057\u305f\u304c\u3063\u3066\u5c0e\u5165\u3092\u3057\u307e\u3059\u3002<\/p>\n<p>Vuetify\u306eUI Component\u3092\u5229\u7528\u3059\u308b\u7b87\u6240\u3067\u6bce\u56demodule\u3092import\u305b\u305a\u3001\u81ea\u52d5\u7684\u306bimport\u3057\u3066\u304f\u308c\u308b<a href=\"https:\/\/github.com\/vuetifyjs\/vuetify-loader\">vuetify-loader<\/a>\u3092\u5229\u7528\u3059\u308b\u30b1\u30fc\u30b9\u306b\u3064\u3044\u3066\u8a18\u8f09\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\u4f9d\u5b58\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u8ffd\u52a0\u3057\u3066\u3001<\/p>\n<pre><code class=\"language-sh\">npm install --save vuetify\nnpm install --save-dev sass sass-loader fibers deepmerge -D\nnpm install --save-dev vuetify-loader\nnpm install --save @mdi\/font -D # Material Design Icons\u3092\u4f7f\u3046\u5834\u5408<\/code><\/pre>\n<p>webpack.config.js\u306e<code>rules<\/code>\u3068<code>plugins<\/code>\u3092\u5909\u66f4\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-javascript\">+const VuetifyLoaderPlugin = require(&#039;vuetify-loader\/lib\/plugin&#039;)\n\n const config = {\n   module: {\n     rules: [\n       {\n-        test: \/\\.css$\/,\n-        use: [MiniCssExtractPlugin.loader, &#039;css-loader&#039;],\n-      },\n-      {\n-        test: \/\\.scss$\/,\n-        use: [MiniCssExtractPlugin.loader, &#039;css-loader&#039;, &#039;sass-loader&#039;],\n-      },\n-      {\n-        test: \/\\.sass$\/,\n-        use: [MiniCssExtractPlugin.loader, &#039;css-loader&#039;, &#039;sass-loader?indentedSyntax&#039;],\n+        test: \/\\.(css|scss|sass)$\/,\n+        use: [\n+          &#039;vue-style-loader&#039;,\n+          &#039;css-loader&#039;,\n+          {\n+            loader: &#039;sass-loader&#039;,\n+            \/\/ Requires sass-loader@^7.0.0\n+            options: {\n+              implementation: require(&#039;sass&#039;),\n+              fiber: require(&#039;fibers&#039;),\n+              indentedSyntax: true \/\/ optional\n+            },\n+            \/\/ Requires sass-loader@^8.0.0\n+            options: {\n+              implementation: require(&#039;sass&#039;),\n+              sassOptions: {\n+                fiber: require(&#039;fibers&#039;),\n+                indentedSyntax: true \/\/ optional\n+              },\n+            },\n+          },\n+        ],\n       },\n     ]\n   },\n   plugins: [\n+     new VuetifyLoaderPlugin(),\n   ],\n }<\/code><\/pre>\n<p>\u307e\u305f\u3001<code>\/src\/plugins\/<\/code>\u306b<code>vuetify.ts<\/code>\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002Material Design Icons\u3092\u4f7f\u3046\u5834\u5408\u306e\u8a2d\u5b9a\u306b\u306a\u3063\u3066\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-typescript\">import &#039;@mdi\/font\/css\/materialdesignicons.css&#039; \/\/ mdi\u306eicon\u3092\u4f7f\u3046\u5834\u5408\nimport Vue from &#039;vue&#039;\nimport Vuetify from &#039;vuetify\/lib&#039;\n\nVue.use(Vuetify)\n\nexport default new Vuetify({\n  icons: { \/\/ mdi\u306eicon\u3092\u4f7f\u3046\u5834\u5408\n    iconfont: &#039;mdi&#039;,\n  },\n})<\/code><\/pre>\n<p>\u3053\u306e\u307e\u307e\u3060\u3068\u3001<code>Could not find a declaration file for module &#039;vuetify\/lib&#039;. <\/code>\u3068\u6012\u3089\u308c\u308b\u306e\u3067\u3001<code>tsconfig.json<\/code>\u306e<code>compilerOptions<\/code>\u306b\u4ee5\u4e0b\u306e\u8a2d\u5b9a\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-json\">{\n  &quot;compilerOptions&quot;: {\n+    &quot;types&quot;: [\n+      &quot;vuetify&quot;\n+    ],\n  }\n}<\/code><\/pre>\n<p>\u3053\u3053\u307e\u3067\u3067\u4e00\u65e6Vuetify\u305d\u306e\u3082\u306e\u306e\u5c0e\u5165\u306f\u5b8c\u4e86\u3067\u3059\u3002<\/p>\n<h3>\u30e1\u30e2\u8868\u793a\u30fb\u7de8\u96c6\u753b\u9762\u3092\u4f5c\u6210<\/h3>\n<p>\u3053\u306e\u6642\u70b9\u3067\u306f\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u753b\u9762\u3092\u4f5c\u6210\u3057\u307e\u3057\u305f\u3002<br \/>\n<img src=\"http:\/\/localhost:8000\/wp-content\/uploads\/2020\/10\/20200507142533.gif\" alt=\"\" \/><\/p>\n<p><code>\/src\/components\/<\/code>\u306b<code>Memo.vue<\/code>\u3092\u4f5c\u6210\u3057\u3001Vue\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f5c\u308a\u307e\u3059\u3002<\/p>\n<p><a href=\"https:\/\/vuetifyjs.com\/ja\/components\/api-explorer\/\">Vuetify\u306eUI\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8<\/a>\u3092\u4f7f\u3063\u3066\u4f5c\u6210\u3057\u3066\u307e\u3059\u3002\u30b7\u30f3\u30d7\u30eb\u306a\u5185\u5bb9\u306a\u306e\u3067\u898b\u308c\u3070\u308f\u304b\u308b\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-typescript\">&lt;template&gt;\n  &lt;v-container fluid&gt;\n    &lt;v-row&gt;\n      &lt;v-col cols=&quot;12&quot;&gt;\n        &lt;v-card height=&quot;500&quot;&gt;\n          &lt;v-card-text&gt;\n            &lt;template v-if=&quot;memo&quot;&gt;\n              &lt;div v-show=&quot;editing&quot;&gt;\n                &lt;v-form v-show=&quot;editing&quot;&gt;\n                  &lt;v-textarea\n                    v-model=&quot;memo.body&quot;\n                    full-width\n                    rows=&quot;16&quot;\n                    dense\n                    filled\n                    no-resize\n                    placeholder=&quot;Input memo here.&quot;\n                  \/&gt;\n                &lt;\/v-form&gt;\n              &lt;\/div&gt;\n              &lt;div v-show=&quot;!editing&quot;&gt;\n                &lt;pre v-show=&quot;memo.body&quot;&gt;{{ memo.body }}&lt;\/pre&gt;\n                &lt;pre v-show=&quot;!memo.body&quot;&gt;\nClick &lt;v-icon&gt;mdi-pencil&lt;\/v-icon&gt; and take a memo.\n                &lt;\/pre&gt;\n              &lt;\/div&gt;\n              &lt;v-btn\n                small\n                fab\n                absolute\n                top\n                style=&quot;right: 60px;&quot;\n                color=&quot;info&quot;\n                :disabled=&quot;editing&quot;\n                @click=&quot;handleEditBtn&quot;\n              &gt;\n                &lt;v-icon&gt;mdi-pencil&lt;\/v-icon&gt;\n              &lt;\/v-btn&gt;\n              &lt;v-btn\n                small\n                fab\n                absolute\n                top\n                right\n                color=&quot;success&quot;\n                :disabled=&quot;!editing&quot;\n                @click=&quot;handleSaveBtn&quot;\n              &gt;\n                &lt;v-icon&gt;mdi-content-save&lt;\/v-icon&gt;\n              &lt;\/v-btn&gt;\n            &lt;\/template&gt;\n          &lt;\/v-card-text&gt;\n        &lt;\/v-card&gt;\n      &lt;\/v-col&gt;\n    &lt;\/v-row&gt;\n  &lt;\/v-container&gt;\n&lt;\/template&gt;\n\n&lt;script lang=&quot;ts&quot;&gt;\nimport { Component, Prop, Vue } from &#039;vue-property-decorator&#039;\n\nclass MemoModel {\n  id: string | null = null\n  body = &#039;&#039;\n  mode = &#039;plane&#039; \/\/ TODO: \u5c06\u6765\u7684\u306bmarkdown\u3084wysiwyg\u3092\u9078\u3079\u308b\u3088\u3046\u306b\n}\n\n@Component\nexport default class Memo extends Vue {\n  @Prop() private uid!: string \/\/ \u3053\u306e\u6642\u70b9\u3067\u306f\u4f7f\u308f\u306a\u3044\n  @Prop() private url!: string \/\/ \u3053\u306e\u6642\u70b9\u3067\u306f\u4f7f\u308f\u306a\u3044\n  private memo: MemoModel | null = null\n  private editing = false\n\n  created(): void {\n    this.memo = new MemoModel() \/\/ TODO: DB\u304b\u3089\u53d6\u5f97\n  }\n\n  handleEditBtn(): void {\n    this.editing = true\n  }\n\n  handleSaveBtn(): void {\n    this.editing = false\n    \/\/ TODO: DB\u306b\u4fdd\u5b58\n  }\n}\n&lt;\/script&gt;<\/code><\/pre>\n<p>\u6700\u5f8c\u306b\u3001<code>\/src\/popup\/<\/code>\u306e<code>App.vue<\/code>\u3067\u5148\u307b\u3069\u4f5c\u6210\u3057\u305fMemo\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u5229\u7528\u3059\u308b\u3088\u3046\u306b\u5909\u66f4\u3057\u307e\u3059\u3002<code>&lt;v-app&gt;<\/code>\u914d\u4e0b\u3067Vuetify\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u4f7f\u3048\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-typescript\"> &lt;template&gt;\n-  &lt;p&gt;{{ message }}&lt;\/p&gt;\n+  &lt;v-app&gt;\n+    &lt;Memo :uid=&quot;&#039;dummy&#039;&quot; :url=&quot;&#039;dummy&#039;&quot; \/&gt;\n+  &lt;\/v-app&gt;\n &lt;\/template&gt;\n\n &lt;script lang=&quot;ts&quot;&gt;\n import { Component, Vue } from &#039;vue-property-decorator&#039;\n+import Memo from &#039;..\/components\/Memo.vue&#039;\n\n-@Component\n+@Component({\n+  components: { Memo }\n+})\n export default class App extends Vue {\n-  message = &#039;Hello world with TypeScript!&#039;\n }\n &lt;\/script&gt;<\/code><\/pre>\n<h2>Firebase Authentication\u3067Google OAuth\u8a8d\u8a3c<\/h2>\n<p>\u30e1\u30e2\u306e\u5185\u5bb9\u3092\u30e6\u30fc\u30b6\u6bce\u306b<a href=\"https:\/\/firebase.google.com\/docs\/firestore?hl=ja\">Cloud Firestore<\/a>\u306b\u4fdd\u5b58\u3057\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002\u305d\u306e\u305f\u3081\u306b\u306f<a href=\"https:\/\/firebase.google.com\/docs\/auth?hl=ja\">Firebase Authentication<\/a>\u3067\u8a8d\u8a3c\u3092\u884c\u3046\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002Chrome\u62e1\u5f35\u306a\u306e\u3067Google OAuth\u8a8d\u8a3c\u3092\u5229\u7528\u3059\u308b\u3053\u3068\u306b\u3057\u307e\u3057\u305f\u3002<\/p>\n<h3>\u51e6\u7406\u306e\u6d41\u308c<\/h3>\n<p><a href=\"https:\/\/rinoguchi.net\/2020\/05\/chrome-extension-firebase-google-authentication.html\">hrome\u62e1\u5f35\uff0bFirebase\u3067Google\u8a8d\u8a3c\u3059\u308b\u3044\u304f\u3064\u304b\u306e\u65b9\u6cd5<\/a> \u3067\u3082\u66f8\u3044\u305f\u306e\u3067\u3059\u304c\u3001\u8272\u3005\u306a\u65b9\u6cd5\u304c\u3042\u3063\u3066\u60a9\u307f\u307e\u3057\u305f\u304c\u3001<a href=\"https:\/\/github.com\/firebase\/quickstart-js\/tree\/master\/auth\/chromextension\">\u3053\u3061\u3089<\/a>\u306e\u30b5\u30a4\u30c8\u306e\u65b9\u6cd5\u304c\u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\u753b\u9762\u3082\u8868\u793a\u3055\u308c\u305a\u3001\u30e6\u30fc\u30b6\u4f53\u9a13\u304c\u4e00\u756a\u30b9\u30de\u30fc\u30c8\u3060\u3068\u601d\u3046\u306e\u3067\u3001\u3053\u308c\u3092\u63a1\u7528\u3055\u305b\u3066\u3082\u3089\u3044\u307e\u3057\u305f\u3002<\/p>\n<p>\u5177\u4f53\u7684\u306b\u306f\u3001\u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\u30da\u30fc\u30b8\u306ecreated\u30d5\u30c3\u30af\u3067\u3001<a href=\"https:\/\/developer.chrome.com\/extensions\/identity#method-getProfileUserInfo\">chrome.identity<\/a> API\u3092\u4f7f\u3063\u3066access token\u3092\u53d6\u5f97\u3057\u3001access token\u3092\u5143\u306bFirebase Authentication\u3092\u4f7f\u3063\u3066Google OAuth\u8a8d\u8a3c\u3092\u884c\u3046\u5f62\u3067\u3059\u3002<\/p>\n<h3>Firebase\u30b3\u30f3\u30bd\u30fc\u30eb\u3067\u306e\u8a2d\u5b9a<\/h3>\n<ol>\n<li>Firebase \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u4f5c\u6210\n<ul>\n<li><a href=\"https:\/\/console.firebase.google.com\/?hl=ja\">\u3053\u3061\u3089<\/a>\u304b\u3089\u4f5c\u6210\u3057\u307e\u3059\u3002\u3068\u308a\u3042\u3048\u305a\u3001Google Analytics\u306fOFF\u306b\u3057\u307e\u3057\u305f\u3002<\/li>\n<\/ul>\n<\/li>\n<li>\u30a2\u30d7\u30ea\u3092\u767b\u9332\n<ul>\n<li>Firebase\u30b3\u30f3\u30bd\u30fc\u30eb\u306e<code>\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u6982\u8981<\/code>\u30da\u30fc\u30b8\u306eWEB\u30a2\u30a4\u30b3\u30f3\uff08<b>&lt;&gt;<\/b>\uff09\u304b\u3089\u30a2\u30d7\u30ea\u3092\u767b\u9332\u3057\u307e\u3059\u3002Hosting\u306f\u4eca\u56de\u5229\u7528\u3057\u306a\u3044\u306e\u3067OFF\u306b\u3057\u307e\u3057\u305f\u3002<\/li>\n<\/ul>\n<\/li>\n<li>Google \u30ed\u30b0\u30a4\u30f3\u3092\u6709\u52b9\u5316\n<ul>\n<li>Firebase\u30b3\u30f3\u30bd\u30fc\u30eb\u306e Authentication -&gt; Sign-in method \u3067 Google \u3092\u6709\u52b9\u306b\u3057\u307e\u3059<\/li>\n<\/ul>\n<\/li>\n<li>Chrome\u62e1\u5f35\u3092\u627f\u8a8d\u6e08\u307fDomain\u306b\u8ffd\u52a0\n<ul>\n<li><a href=\"https:\/\/firebase.google.com\/docs\/auth\/web\/google-signin?hl=ja#authenticate_with_firebase_in_a_chrome_extension\">\u3053\u3061\u3089<\/a>\u306b\u66f8\u3044\u3066\u3042\u308b\u901a\u308a\u3001Authentication -&gt; Sign-in method -&gt; \u627f\u8a8d\u6e08\u307f\u30c9\u30e1\u30a4\u30f3 \u306b<code>chrome-extension:\/\/CHROME_EXTENSION_ID<\/code>\u306e\u5f62\u5f0f\u3067\u30c9\u30e1\u30a4\u30f3\u3092\u8ffd\u52a0\u3057\u307e\u3059<\/li>\n<li><code>CHROME_EXTENSION_ID<\/code>\u306fChrome\u62e1\u5f35\u306e\u7ba1\u7406\u30da\u30fc\u30b8\u3067\u78ba\u8a8d\u3067\u304d\u307e\u3059<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h3>\u30a2\u30d7\u30ea\u3067Firebase\u3092\u4f7f\u3048\u308b\u3088\u3046\u306b\u3059\u308b<\/h3>\n<p><a href=\"https:\/\/firebase.google.com\/docs\/web\/setup?hl=ja#add-sdks-initialize\">\u3053\u3061\u3089<\/a>\u3092\u307f\u306a\u304c\u3089\u4f5c\u696d\u3092\u9032\u3081\u307e\u3059\u3002<\/p>\n<p>\u307e\u305a\u306f\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u8ffd\u52a0\u3057\u307e\u3059<\/p>\n<pre><code class=\"language-sh\">npm install --save firebase<\/code><\/pre>\n<p>\u6b21\u306b<code>\/src\/plugins\/<\/code>\u306b<code>firebase.ts<\/code>\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<code>firebaseConfig<\/code>\u306e\u8a2d\u5b9a\u5185\u5bb9\u306f\u3001Firebase\u30b3\u30f3\u30bd\u30fc\u30eb\u3067 \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u6982\u8981 -&gt; \u5bfe\u8c61\u306e\u30a2\u30d7\u30ea \u306eSetting\u753b\u9762\u3092\u958b\u304f\u3068\u305d\u306e\u4e2d\u307b\u3069\u306b\u8868\u793a\u3055\u308c\u3066\u3044\u308b\u306e\u3067\u3001\u305d\u308c\u3092\u30b3\u30d4\u30da\u3057\u307e\u3059\u3002<br \/>\nFirebase\u5074\u3067\u627f\u8a8d\u6e08\u307f\u30c9\u30e1\u30a4\u30f3\u3092\u8a2d\u5b9a\u3057\u3066\u3044\u308b\u3082\u306e\u306e\u3001\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u4e0a\u306bapiKey\u304c\u9732\u51fa\u3057\u3066\u3044\u308b\u3053\u3068\u306b\u4e0d\u5b89\u3092\u611f\u3058\u307e\u3059\u304c\u3001<a href=\"https:\/\/stackoverflow.com\/questions\/37482366\/is-it-safe-to-expose-firebase-apikey-to-the-public\">\u3053\u3061\u3089<\/a>\u3092\u53c2\u7167\u3059\u308b\u3068\u5927\u4e08\u592b\u306a\u3088\u3046\u3067\u3059\u3002\u305f\u3060\u3057\u3001Firestore\u3092\u4f7f\u3046\u6642\u306b\u306f<a href=\"https:\/\/firebase.google.com\/docs\/rules\">\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u30eb\u30fc\u30eb<\/a>\u3092\u3061\u3083\u3093\u3068\u8a2d\u5b9a\u3059\u308b\u5fc5\u8981\u306f\u3042\u308a\u305d\u3046\u3067\u3059\u3002<\/p>\n<pre><code class=\"language-typescript\">import * as firebase from &#039;firebase\/app&#039;\nimport &#039;firebase\/auth&#039;\nimport &#039;firebase\/firestore&#039;\n\nconst firebaseConfig = {\n  apiKey: &#039;xxxxx&#039;,\n  authDomain: &#039;xxxxx.firebaseapp.com&#039;,\n  databaseURL: &#039;https:\/\/xxxxx.firebaseio.com&#039;,\n  projectId: &#039;xxxxx&#039;,\n  storageBucket: &#039;xxxxx.appspot.com&#039;,\n  messagingSenderId: &#039;xxxxx&#039;,\n  appId: &#039;xxxxx&#039;\n}\n\nfirebase.initializeApp(firebaseConfig)\n\nexport default firebase<\/code><\/pre>\n<p>\u6700\u5f8c\u306b\u3001<code>webpack.config.js<\/code>\u5185\u3067build\u6642\u306b<code>content_security_policy<\/code>\u3092\u4e0a\u66f8\u304d\u3059\u308b\u51e6\u7406\u304c\u3042\u308b\u306e\u3067\u3001\u305d\u3053\u3092\u66f8\u304d\u63db\u3048\u307e\u3059\u3002\uff08vue-web-extension\u3092\u4f7f\u3063\u3066\u3044\u306a\u3044\u5834\u5408\u306f\u3001\u3053\u306ewebpack.config.js\u306e\u51e6\u7406\u306f\u5b58\u5728\u3057\u306a\u3044\u306e\u3067\u3001manifest.json\u3092\u76f4\u63a5\u66f8\u304d\u63db\u3048\u308c\u3070\u826f\u3044\u3067\u3059\uff09<\/p>\n<pre><code class=\"language-javascript\">     if (config.mode === &#039;development&#039;) {\n-      jsonContent[&#039;content_security_policy&#039;] = &quot;script-src &#039;self&#039; &#039;unsafe-eval&#039;; object-src &#039;self&#039;&quot;;\n+      jsonContent[&#039;content_security_policy&#039;] = &quot;script-src &#039;self&#039; https:\/\/apis.google.com &#039;unsafe-eval&#039;; object-src &#039;self&#039;&quot;;\n+    } else {\n+      jsonContent[&#039;content_security_policy&#039;] = &quot;script-src &#039;self&#039; https:\/\/apis.google.com; object-src &#039;self&#039;&quot;;\n     }<\/code><\/pre>\n<p>\u3053\u3053\u307e\u3067\u3067\u3001Firebase\u306e\u6a5f\u80fd\u3092\u30a2\u30d7\u30ea\u5185\u3067\u4f7f\u3046\u3053\u3068\u304c\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n<h3>OAuth \u30af\u30e9\u30a4\u30a2\u30f3\u30c8ID\u3092\u4f5c\u6210<\/h3>\n<p><a href=\"https:\/\/console.developers.google.com\/apis\/credentials\">\u3053\u3061\u3089<\/a>\u304b\u3089\u3001<\/p>\n<ul>\n<li>\u8a8d\u8a3c\u60c5\u5831\u3092\u4f5c\u6210 <\/li>\n<li>OAuth \u30af\u30e9\u30a4\u30a2\u30f3\u30c8ID<\/li>\n<li>Chrome \u30a2\u30d7\u30ea<\/li>\n<li>\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3ID\u306bCHROME_EXTENSION_ID\u3092\u6307\u5b9a<\/li>\n<\/ul>\n<p>\u3092\u884c\u3044\u3001OAuth \u30af\u30e9\u30a4\u30a2\u30f3\u30c8ID\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n<h3>manifest.json\u306b\u8a2d\u5b9a\u8ffd\u52a0<\/h3>\n<p>\u3055\u3089\u306b\u3001<code>manifest.json<\/code>\u306e\u8a18\u8ff0\u3092\u8ffd\u52a0\u3057\u3066\u3001chrome.identity API\u3068OAuth2\u8a8d\u8a3c\u3092\u6709\u52b9\u306b\u3057\u307e\u3059\u3002<br \/>\n\u8a8d\u8a3c\u3068\u306f\u76f4\u63a5\u95a2\u4fc2\u306a\u3044\u306e\u3067\u3059\u304c\u3001\u5f8c\u307b\u3069\u958b\u3044\u3066\u3044\u308b\u30bf\u30d6\u306eURL\u3092\u53d6\u5f97\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u306e\u3067\u3001chrome.tabs API\u3082\u6709\u52b9\u306b\u3057\u3066\u3044\u307e\u3059\u3002<br \/>\n\u5229\u7528\u53ef\u80fd\u306achrome\u306eAPI\u306e\u7a2e\u985e\u306f<a href=\"https:\/\/developer.chrome.com\/extensions\/devguide\">\u3053\u3061\u3089<\/a>\u3092\u3001Google OAuth2 \u8a8d\u8a3c\u306e\u30b9\u30b3\u30fc\u30d7\u306f<a href=\"https:\/\/developers.google.com\/identity\/protocols\/oauth2\/scopes#oauth2\">\u3053\u3061\u3089<\/a>\u3092\u53c2\u7167\u304f\u3060\u3055\u3044\u3002<\/p>\n<pre><code class=\"language-json\">+  },\n+  &quot;permissions&quot;: [\n+    &quot;identity&quot;,\n+    &quot;tabs&quot;\n+  ],\n+  &quot;oauth2&quot;: {\n+    &quot;client_id&quot;: &quot;********************************.apps.googleusercontent.com&quot;,\n+    &quot;scopes&quot;: [&quot;https:\/\/www.googleapis.com\/auth\/userinfo.email&quot;]\n   }\n }<\/code><\/pre>\n<p>\u3061\u306a\u307f\u306b\u3001manifest.json\u306b&quot;key&quot;\u3092\u6307\u5b9a\u3059\u308b\u3068\u3001Chrome\u62e1\u5f35\u306eID\u3092\u56fa\u5b9a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u3089\u3057\u304f\u3001<a href=\"https:\/\/github.com\/firebase\/quickstart-js\/tree\/master\/auth\/chromextension\">\u3053\u3061\u3089<\/a>\u306e\u30b5\u30a4\u30c8\u3067\u3082\u305d\u3046\u3057\u308d\u3068\u66f8\u3044\u3066\u3042\u308b\u306e\u3067\u3059\u304c\u3001webpack-extension-reloader\u3068\u306e\u76f8\u6027\u304c\u826f\u304f\u306a\u3044\u3089\u3057\u304f\u3069\u3093\u3069\u3093\u65b0\u3057\u304f\u5225ID\u306eChrome\u62e1\u5f35\u304cChrome\u306b\u767b\u9332\u3055\u308c\u3066\u3044\u304f\u306e\u3067\u3001\u81ea\u5206\u306f\u8a2d\u5b9a\u3057\u3066\u3044\u307e\u305b\u3093\u3002<\/p>\n<h3>\u8a8d\u8a3c\u51e6\u7406\u3092\u8ffd\u52a0<\/h3>\n<p>\u307e\u305a\u306f\u3001chrome.identity\u3092\u5229\u7528\u3059\u308b\u305f\u3081\u3001<code>chrome<\/code>\u30e2\u30b8\u30e5\u30fc\u30eb\u306e\u578b\u5b9a\u7fa9\u3092\u8ffd\u52a0\u3057\u3066<\/p>\n<pre><code class=\"language-sh\">npm install --save-dev @types\/chrome<\/code><\/pre>\n<p><code>tsconfig.json<\/code>\u306b\u4ee5\u4e0b\u3092\u8ffd\u8a18\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-json\">     &quot;types&quot;: [\n-      &quot;vuetify&quot;\n+      &quot;vuetify&quot;, &quot;chrome&quot;\n     ],<\/code><\/pre>\n<p>\u6700\u5f8c\u306b\u3001<code>\/src\/popup\/<\/code>\u306e<code>App.vue<\/code>\u3092\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u4fee\u6b63\u3057\u3001\u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\u30da\u30fc\u30b8\u3067\u8a8d\u8a3c\u3092\u884c\u3046\u3088\u3046\u306b\u3057\u307e\u3057\u305f\u3002<\/p>\n<ul>\n<li>uid\u304c\u53d6\u5f97\u3067\u304d\u3066\u306a\u3051\u308c\u3070\uff08\uff1d\u672a\u8a8d\u8a3c\u306a\u3089\uff09\u30ed\u30fc\u30c7\u30a3\u30f3\u30b0icon\u3092\u8868\u793a\u3059\u308b<\/li>\n<li>created\u30d5\u30c3\u30af\u3067\u3001<a href=\"https:\/\/developer.chrome.com\/extensions\/tabs\">chrome.tabs<\/a> API\u3092\u4f7f\u3063\u3066\u958b\u3044\u3066\u3044\u308b\u30bf\u30d6\u306eURL\u3092\u53d6\u5f97\u3057\u3001\u3055\u3089\u306b\u3001<code>firebase.auth().onAuthStateChanged<\/code>\u3092\u4f7f\u3063\u3066Firebase Authentication\u306e\u8a8d\u8a3c\u72b6\u614b\u3092\u76e3\u8996\u30b9\u30bf\u30fc\u30c8\u3057\u305f\u4e0a\u3067\u3001\u5b9f\u969b\u306e\u8a8d\u8a3c\u51e6\u7406\uff08<code>startAuth<\/code>\uff09\u3092\u5b9f\u884c\u3059\u308b<\/li>\n<li>\n<p><code>startAuth<\/code>\u306e\u4e2d\u3067\u306f\u3001\u307e\u305a<code>chrome.identity.getAuthToken<\/code>\u3067access token\u3092\u53d6\u5f97\u3059\u308b\uff08\u3082\u3057\u30d6\u30e9\u30a6\u30b6\u304cGoogle\u30ed\u30b0\u30a4\u30f3\u3057\u3066\u306a\u3044\u72b6\u614b\u3067\u3042\u308c\u3070Google\u8a8d\u8a3c\u753b\u9762\u304c\u5225\u30bf\u30d6\u3067\u8868\u793a\u3055\u308c\u3001Google\u8a8d\u8a3c\u3092\u884c\u3063\u305f\u4e0a\u3067\u3001access token\u3092\u53d6\u5f97\u3059\u308b\uff09\u3002\u53d6\u5f97\u3057\u305faccess token\u3092\u5143\u306bFirebase\u30ed\u30b0\u30a4\u30f3\u3092\u5b9f\u884c\u3059\u308b<\/p>\n<pre><code class=\"language-typescript\"> &lt;template&gt;\n   &lt;v-app&gt;\n-    &lt;Memo :uid=&quot;&#039;dummy&#039;&quot; :url=&quot;&#039;dummy&#039;&quot; \/&gt;\n+    &lt;template v-if=&quot;uid &amp;&amp; url&quot;&gt;\n+      &lt;Memo :uid=&quot;uid&quot; :url=&quot;url&quot; \/&gt;\n+    &lt;\/template&gt;\n+    &lt;template v-else&gt;\n+      &lt;v-container fluid&gt;\n+        &lt;v-row&gt;\n+          &lt;v-col cols=&quot;12&quot; class=&quot;text-center&quot;&gt;\n+            &lt;v-progress-circular\n+              :size=&quot;100&quot;\n+              :width=&quot;15&quot;\n+              color=&quot;grey&quot;\n+              indeterminate\n+            \/&gt;\n+          &lt;\/v-col&gt;\n+        &lt;\/v-row&gt;\n+      &lt;\/v-container&gt;\n+    &lt;\/template&gt;\n   &lt;\/v-app&gt;\n &lt;\/template&gt;\n\n &lt;script lang=&quot;ts&quot;&gt;\n import { Component, Vue } from &#039;vue-property-decorator&#039;\n import Memo from &#039;..\/components\/Memo.vue&#039;\n+import firebase from &#039;..\/plugins\/firebase&#039;\n+\n\n @Component({\n   components: { Memo }\n })\n export default class App extends Vue {\n-  message = &#039;Hello world with TypeScript!&#039;\n+  private uid: string | null = null\n+  private url: string | null = null\n+  \n+  created(): void {\n+    chrome.tabs.getSelected((tab: chrome.tabs.Tab) =&gt; {\n+      if (!tab.url) {\n+        throw new Error(&#039;Could not get tab url.&#039;)\n+      }\n+      this.url = encodeURIComponent(tab.url.split(\/[?#]\/)[0])\n+    })\n+\n+    firebase.auth().onAuthStateChanged((authUser: firebase.User | null) =&gt; {\n+      if (authUser === null) {\n+        this.uid = null\n+      } else {\n+        this.uid = authUser.uid\n+      }\n+    })\n+  \n+    this.startAuth(true)\n+  }\n+  \n+  startAuth(interactive: boolean): void {\n+    chrome.identity.getAuthToken(\n+      { interactive: !!interactive },\n+      (token: string) =&gt; {\n+        if (chrome.runtime.lastError &amp;&amp; !interactive) {\n+          console.log(&#039;It was not possible to get a token programmatically.&#039;)\n+        } else if (chrome.runtime.lastError) {\n+          console.error(chrome.runtime.lastError)\n+        } else if (token) {\n+          const credential = firebase.auth.GoogleAuthProvider.credential(\n+            null,\n+            token\n+          )\n+          firebase\n+            .auth()\n+            .signInWithCredential(credential)\n+            .catch((error: any) =&gt; {\n+              if (error.code === &#039;auth\/invalid-credential&#039;) {\n+                chrome.identity.removeCachedAuthToken({ token: token }, () =&gt; {\n+                  this.startAuth(interactive)\n+                })\n+              }\n+            })\n+        } else {\n+          console.error(&#039;The OAuth Token was null&#039;)\n+        }\n+      }\n+    )\n+  }\n }\n &lt;\/script&gt;<\/code><\/pre>\n<\/li>\n<\/ul>\n<p>\u3053\u308c\u3067\u3084\u3063\u3068Firebase Authentication\u3092\u4f7f\u3063\u3066Google OAuth\u8a8d\u8a3c\u3092\u884c\u3046\u3053\u3068\u304c\u3067\u304d\u307e\u3057\u305f\u3002<\/p>\n<h2>Firestore\u306b\u30c7\u30fc\u30bf\u4fdd\u5b58<\/h2>\n<p><a href=\"https:\/\/firebase.google.com\/docs\/firestore?hl=ja\">Cloud Firestore<\/a>\u306b\u30c7\u30fc\u30bf\u3092\u4fdd\u5b58\u3059\u308b\u3088\u3046\u306b\u3057\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002LocalStorage\u3084IndexedDB\u306b\u4fdd\u5b58\u3059\u308b\u304b\u306f\u3060\u3044\u3076\u8ff7\u3063\u305f\u306e\u3067\u3059\u304c\u3001\u540c\u3058Google\u30a2\u30ab\u30a6\u30f3\u30c8\u3067\u5225\u30de\u30b7\u30f3\u3067\u3082\u5229\u7528\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u305f\u3044\u306e\u3067\u3001Firestore\u306b\u3059\u308b\u3053\u3068\u306b\u3057\u307e\u3057\u305f\u3002<\/p>\n<h3>\u30c7\u30fc\u30bf\u30e2\u30c7\u30eb<\/h3>\n<p><a href=\"https:\/\/firebase.google.com\/docs\/firestore\/data-model?hl=ja#node.js\">\u3053\u3061\u3089<\/a>\u3092\u53c2\u7167\u3057\u3064\u3064\u30c7\u30fc\u30bf\u30e2\u30c7\u30eb\u3092\u6c7a\u3081\u307e\u3057\u305f\u3002<code>users<\/code>\u306e\u4e0b\u306b<code>memos<\/code>\u304c\u4f4d\u7f6e\u3059\u308b\u3088\u3046\u306a\u30b7\u30f3\u30d7\u30eb\u306a\u5f62\u3067\u3059\u3002<br \/>\n<code>document<\/code>\u3068\u306f\u5024\u306b\u30de\u30c3\u30d4\u30f3\u30b0\u3055\u308c\u308b\u30d5\u30a3\u30fc\u30eb\u30c9\u3092\u542b\u3080\u8efd\u91cf\u306a\u30ec\u30b3\u30fc\u30c9\u3001<code>collection<\/code>\u3068\u306fdocument\u306e\u30b3\u30f3\u30c6\u30ca\u3067\u3059\u3002document\u306e\u4e2d\u306bsub collection\u3092\u6301\u3064\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-javascript\">collection: users \/\/ \u30e6\u30fc\u30b6\u3092\u683c\u7d0d\u3059\u308bcollection\n\u2523 document id: &quot;xxxxx1&quot;\n\u2517 document id: &quot;xxxxx2&quot; \/\/ Google OAuth\u8a8d\u8a3c\u3067\u53d6\u5f97\u3057\u305fuid\u3092document id\u3068\u3057\u3066\u5229\u7528\n\u3000\u3000\u2523 defaultMode: &quot;plain&quot; \/\/ \u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u8a18\u8f09\u30e2\u30fc\u30c9\u3002\u3044\u305a\u308cmarkdown\u3084wysiwyg\u30e2\u30fc\u30c9\u3092\u8ffd\u52a0\u4e88\u5b9a\n\u3000\u3000\u2517 sub collection: memos \/\/ \u30e1\u30e2\u3092\u683c\u7d0d\u3059\u308bsub_collection\n\u3000\u3000\u3000\u3000\u2523 document id: &quot;https%3A%2F%2Fhoge.com&quot;\n\u3000\u3000\u3000\u3000\u2517 document id: &quot;https%3A%2F%2Ffuga.com&quot; \/\/ \u30a8\u30f3\u30b3\u30fc\u30c9\u3057\u305fURL\u3092id\u3068\u3057\u3066\u5229\u7528\n\u3000\u3000\u3000\u3000\u3000\u3000\u2523 mode: &quot;plain&quot;: \/\/ \u8a18\u8f09\u30e2\u30fc\u30c9\n\u3000\u3000\u3000\u3000\u3000\u3000\u2517 body: &quot;xxxxx&quot; \/\/ \u30e1\u30e2\u672c\u6587<\/code><\/pre>\n<h3>\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u4f5c\u6210<\/h3>\n<p><a href=\"https:\/\/firebase.google.com\/docs\/firestore\/quickstart?hl=ja\">\u3053\u3061\u3089<\/a>\u3092\u53c2\u8003\u306b\u8a2d\u5b9a\u3092\u3057\u307e\u3057\u305f\u3002<br \/>\n\u307e\u305a<a href=\"https:\/\/console.firebase.google.com\/?hl=ja\">\u30b3\u30f3\u30bd\u30fc\u30eb<\/a>\u304b\u3089\u5148\u307b\u3069\u4f5c\u6210\u3057\u305f\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u9078\u629e\u3057\u3001Database\u30bb\u30af\u30b7\u30e7\u30f3\u3067<code>\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u306e\u4f5c\u6210<\/code>\u3092\u884c\u3044\u307e\u3059\u3002<br \/>\n\u305d\u306e\u969b\u3001\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u30eb\u30fc\u30eb\u306f<code>\u672c\u756a\u74b0\u5883\u3067\u958b\u59cb<\/code>\u3001\u30ed\u30b1\u30fc\u30b7\u30e7\u30f3\u306f<code>asia-east2<\/code>\u3092\u9078\u629e\u3059\u308b\u3053\u3068\u306b\u3057\u307e\u3059\u3002<\/p>\n<p>\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u30eb\u30fc\u30eb\u3067<code>\u672c\u756a\u74b0\u5883\u3067\u958b\u59cb<\/code>\u3092\u9078\u3093\u3060\u5834\u5408\u3001\u5e38\u306bread\/write\u3067\u304d\u306a\u3044\u8a2d\u5b9a\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u306e\u3067\u3001<a href=\"https:\/\/firebase.google.com\/docs\/firestore\/security\/secure-data?hl=ja\">\u3053\u3061\u3089<\/a>\u3092\u53c2\u8003\u306b\u3001Authentication\u3067\u8a8d\u8a3c\u3057\u305f<code>uid<\/code>\u306b\u7d10\u3065\u304f\u30e1\u30e2\u3060\u3051\u3092read\/write\u3067\u304d\u308b\u3088\u3046\u306b\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u30eb\u30fc\u30eb\u3092\u5909\u66f4\u3057\u307e\u3057\u305f\u3002<\/p>\n<ul>\n<li>\u30ef\u30a4\u30eb\u30c9\u30ab\u30fc\u30c9\u5909\u6570\u306b\u306f\u8a72\u5f53\u3059\u308bdocument\u306eID\u304c\u30bb\u30c3\u30c8\u3055\u308c\u308b\u306e\u3067\u3001<code>uid<\/code>\u306b\u306fuser document\u306eID\u304c\u30bb\u30c3\u30c8\u3055\u308c\u307e\u3059<\/li>\n<li><code>request<\/code>\u5909\u6570\u306b\u306f\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u304b\u3089\u306e\u30ea\u30af\u30a8\u30b9\u30c8\u60c5\u5831\u304c\u30bb\u30c3\u30c8\u3055\u308c\u307e\u3059\u3002<code>request.auth<\/code>\u306b\u306f\u8a8d\u8a3c\u6e08\u307f\u3067\u3042\u308c\u3070\u8a8d\u8a3c\u60c5\u5831\u304c\u30bb\u30c3\u30c8\u3055\u308c\u307e\u3059<\/li>\n<li>\u4eca\u56de\u4f7f\u3063\u3066\u3044\u307e\u305b\u3093\u304c\u3001<code>resource<\/code>\u5909\u6570\u306b\u306f\u3001\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u306e\u30c7\u30fc\u30bf\u306e\u4e2d\u8eab\u304c\u30bb\u30c3\u30c8\u3055\u308c\u307e\u3059\u306e\u3067\u3001document\u306eID\u4ee5\u5916\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u3068\u4f55\u304b\u6bd4\u8f03\u3059\u308b\u5834\u5408\u306f\u5229\u7528\u3059\u308b\u3053\u3068\u306b\u306a\u308a\u305d\u3046\u3067\u3059\u3002\n<pre><code class=\"language-javascript\">rules_version = &#039;2&#039;;\nservice cloud.firestore {\n  match \/databases\/{database}\/documents {\n    match \/users\/{uid} {\n      allow create: if request.auth.uid != null;\n      allow read, update, delete: if request.auth.uid == uid;\n    }\n    match \/users\/{uid}\/memos\/{memo} {\n      allow read, create, update, delete: if request.auth.uid == uid;\n    }\n  }\n}<\/code><\/pre>\n<\/li>\n<\/ul>\n<h3>User Document\u304c\u5b58\u5728\u3057\u306a\u304b\u3063\u305f\u3089\u30c7\u30fc\u30bf\u8ffd\u52a0<\/h3>\n<p>\u8a8d\u8a3c\u304c\u5b8c\u4e86\u3057\u305f\u969b\u306b\u3001User Document\u304c\u5b58\u5728\u3057\u306a\u304b\u3063\u305f\u3089\u8ffd\u52a0\u3059\u308b\u3088\u3046\u306b\u3057\u307e\u3059\u3002\u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\u30da\u30fc\u30b8\u3067\u8a8d\u8a3c\u3092\u884c\u306a\u3063\u3066\u3044\u308b\u306e\u3067\u3001<code>\/src\/popup<\/code>\u306e<code>App.vue<\/code>\u306b\u51e6\u7406\u3092\u7d44\u307f\u8fbc\u3093\u3067\u3044\u304d\u307e\u3059\u3002  <\/p>\n<ul>\n<li>\u30ed\u30b0\u30a4\u30f3\u30e6\u30fc\u30b6\u306euid\u3092\u5143\u306bUser Document\u3092\u691c\u7d22\u3057\u3001\u5b58\u5728\u3057\u306a\u304b\u3063\u305f\u3089\u30c7\u30fc\u30bf\u3092\u8ffd\u52a0\u3057\u3066\u3044\u307e\u3059<\/li>\n<li>User\u60c5\u5831\u3092\u683c\u7d0d\u3059\u308b\u305f\u3081\u306e<code>UserModel<\/code>\u30af\u30e9\u30b9\u3068User Document\u306b\u30a2\u30af\u30bb\u30b9\u3059\u308b\u305f\u3081\u306e<code>UserRepository<\/code>\u30af\u30e9\u30b9\u3092\u4f5c\u6210\u3057\u3066\u3044\u307e\u3059\u3002\u500b\u4eba\u7684\u306b\u306f\u3053\u306e\u8fba\u306f\u30af\u30e9\u30b9\u5316\u3057\u3066\u304a\u3044\u305f\u65b9\u304c\u8cac\u52d9\u304c\u660e\u78ba\u306b\u306a\u308a\u898b\u901a\u3057\u304c\u3088\u304f\u306a\u308b\u6c17\u304c\u3057\u307e\u3059\u3002\u5c06\u6765\u7684\u306b\u306f\u5225\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u79fb\u52d5\u3059\u308b\u304b\u3082\u3057\u308c\u307e\u305b\u3093<\/li>\n<li><code>UserRepository<\/code>\u30af\u30e9\u30b9\u306f\u3001User Document\u3092\u53c2\u7167\u3059\u308b\u305f\u3081\u306e<code>DocumentReference <\/code>\u3092\u901a\u3058\u3066\u3001Document\u3092\u53d6\u5f97\u3057\u305f\u308a\u4fdd\u5b58\u3057\u305f\u308a\u3059\u308b\u95a2\u6570\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002<code>DocumentReference.set()<\/code>\u95a2\u6570\u306f\u3001\u30c7\u30fc\u30bf\u304c\u5b58\u5728\u3057\u306a\u3051\u308c\u3070\u8ffd\u52a0\u3001\u5b58\u5728\u3059\u308c\u3070\u66f4\u65b0\u3057\u3066\u304f\u308c\u308b\u306e\u304c\u4fbf\u5229\u3067\u3059<\/li>\n<li>\n<p>API\u547c\u3073\u51fa\u3057\u7cfb\u306f\u57fa\u672c\u3069\u308c\u3082\u975e\u540c\u671f\u3067\u52d5\u304f\u305f\u3081\u3001callback\u306enest\u304c\u6c17\u306b\u306a\u3063\u3066\u304f\u308b\u306e\u3067\u3001async\u3001await\u3092\u4f7f\u3063\u3066\u540c\u671f\u7684\u306b\u547c\u3073\u51fa\u3059\u5f62\u306b\u3057\u3066\u3042\u308a\u307e\u3059<\/p>\n<pre><code class=\"language-typescript\"> &lt;template&gt;\n   &lt;v-app&gt;\n-    &lt;template v-if=&quot;uid &amp;&amp; url&quot;&gt;\n-      &lt;Memo :uid=&quot;uid&quot; :url=&quot;url&quot; \/&gt;\n+    &lt;template v-if=&quot;user &amp;&amp; user.id &amp;&amp; url&quot;&gt;\n+      &lt;Memo :uid=&quot;user.id&quot; :url=&quot;url&quot; \/&gt;\n     &lt;\/template&gt;\n     &lt;template v-else&gt;\n\uff08\u4e2d\u7565\uff09\n import firebase from &#039;..\/plugins\/firebase&#039;\n+import DocumentReference = firebase.firestore.DocumentReference\n+import DocumentData = firebase.firestore.DocumentData\n+import DocumentSnapshot = firebase.firestore.DocumentSnapshot\n\n+class UserModel {\n+  id: string | null = null\n+  defaultMode = &#039;plane&#039; \/\/ TODO: \u5c06\u6765\u7684\u306bmarkdown\u3084wysiwyg\u3092\u9078\u3079\u308b\u3088\u3046\u306b\n+}\n+\n+class UserRepository {\n+  userRef: DocumentReference&lt;DocumentData&gt;\n+  constructor(uid: string) {\n+    this.userRef = firebase.firestore().collection(&#039;users&#039;).doc(uid)\n+  }\n+\n+  async get(): Promise&lt;UserModel&gt; {\n+    return this.userRef\n+      .get()\n+      .then((userData: DocumentSnapshot&lt;DocumentData&gt;) =&gt; {\n+        const user = new UserModel()\n+        if (userData.exists) {\n+          user.id = userData.id\n+          user.defaultMode = userData.get(&#039;defaultMode&#039;)\n+        }\n+        return user\n+      })\n+      .catch((error: any) =&gt; {\n+        throw new Error(`Error getting user:, ${error}`)\n+      })\n+  }\n+\n+  async save(user: UserModel): Promise&lt;UserModel&gt; {\n+    return this.userRef\n+      .set({\n+        defaultMode: user.defaultMode,\n+      })\n+      .then(() =&gt; {\n+        console.log(&#039;User successfully saved!&#039;)\n+        return this.get()\n+      })\n+      .catch((error: any) =&gt; {\n+        throw new Error(`Error saving memo:, ${error}`)\n+      })\n+  }\n+}\n\n @Component({\n   components: { Memo },\n })\n export default class App extends Vue {\n-  private uid: string | null = null\n+  private user: UserModel | null = null\n   private url: string | null = null\n\n-  created(): Promise&lt;void&gt; {\n+  async created(): Promise&lt;void&gt; {\n     chrome.tabs.getSelected((tab: chrome.tabs.Tab) =&gt; {\n       if (!tab.url) {\n         throw new Error(&#039;Could not get tab url.&#039;)\n       }\n       this.url = encodeURIComponent(tab.url.split(\/[?#]\/)[0])\n     })\n\n-    firebase.auth().onAuthStateChanged((authUser: firebase.User | null) =&gt; {\n+    firebase.auth().onAuthStateChanged(async (authUser: firebase.User | null) =&gt; {\n       if (authUser === null) {\n-         this.uid = null\n+         this.user = null\n       } else {\n-         this.uid = authUser.uid\n+        const userRepository = new UserRepository(authUser.uid)\n+        this.user = await userRepository.get()\n+        if (!this.user.id) {\n+          await userRepository.save(this.user)\n+        }\n+      } \n     })<\/code><\/pre>\n<\/li>\n<\/ul>\n<h3>Memo Document\u3092\u53d6\u5f97\u304a\u3088\u3073\u4fdd\u5b58<\/h3>\n<p>\u30e1\u30e2\u753b\u9762<code>Memo.vue<\/code>\u3082\u4f3c\u305f\u3088\u3046\u306a\u611f\u3058\u3067\u51e6\u7406\u3092\u8ffd\u52a0\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n<ul>\n<li><code>created<\/code>\u30d5\u30c3\u30af\u3067Firestore\u304b\u3089\u30e1\u30e2\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3057\u3001\u4fdd\u5b58\u30dc\u30bf\u30f3\u304c\u30af\u30ea\u30c3\u30af\u30af\u30ea\u30c3\u30af\u3055\u308c\u305f\u3089\u30c7\u30fc\u30bf\u3092\u4fdd\u5b58\u3057\u307e\u3059\u3002<\/li>\n<li>\n<p>User\u306e\u5834\u5408\u3068\u540c\u69d8\u306b<code>MemoModel<\/code>\u3068<code>MemoRepository<\/code>\u3092\u4f5c\u6210\u3057\u3066\u3001\u305d\u308c\u3089\u3092\u5229\u7528\u3057\u3066Memo\u306e\u53d6\u5f97\u3084\u4fdd\u5b58\u3092\u884c\u3046\u3088\u3046\u306b\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-typescript\"> &lt;script lang=&quot;ts&quot;&gt;\n import { Component, Prop, Vue } from &#039;vue-property-decorator&#039;\n+import firebase from &#039;..\/plugins\/firebase&#039;\n+import DocumentReference = firebase.firestore.DocumentReference\n+import DocumentData = firebase.firestore.DocumentData\n+import DocumentSnapshot = firebase.firestore.DocumentSnapshot\n\uff08\u4e2d\u7565\uff09\n\n+class MemoRepository {\n+  memoRef: DocumentReference&lt;DocumentData&gt;\n+  constructor(uid: string, url: string) {\n+    this.memoRef = firebase\n+      .firestore()\n+      .collection(&#039;users&#039;)\n+      .doc(uid)\n+      .collection(&#039;memos&#039;)\n+      .doc(url)\n+  }\n+\n+  async get(): Promise&lt;MemoModel&gt; {\n+    return this.memoRef\n+      .get()\n+      .then((memoData: DocumentSnapshot&lt;DocumentData&gt;) =&gt; {\n+        const memo = new MemoModel()\n+        if (memoData.exists) {\n+          memo.id = memoData.id\n+          memo.body = memoData.get(&#039;body&#039;)\n+          memo.mode = memoData.get(&#039;mode&#039;)\n+        }\n+        return memo\n+      })\n+      .catch((error: any) =&gt; {\n+        throw new Error(`Error getting memo:, ${error}`)\n+      })\n+  }\n+\n+  async save(memo: MemoModel): Promise&lt;MemoModel&gt; {\n+    return this.memoRef\n+      .set({\n+        body: memo.body,\n+        mode: memo.mode,\n+      })\n+      .then(() =&gt; {\n+        console.log(&#039;Memo successfully saved!&#039;)\n+        return this.get()\n+      })\n+      .catch((error: any) =&gt; {\n+        throw new Error(`Error saving memo:, ${error}`)\n+      })\n+  }\n+}\n\n @Component\n export default class Memo extends Vue {\n   @Prop() private uid!: string\n   @Prop() private url!: string\n   private memo: MemoModel | null = null\n   private editing = false\n+  private memoRepository: MemoRepository = new MemoRepository(\n+    this.uid,\n+    this.url\n+  ) \n\n-  created(): void {\n-    this.memo = new MemoModel() \/\/ TODO: DB\u304b\u3089\u53d6\u5f97\n+  async created(): void {\n+    this.memo = await this.memoRepository.get()\n   }\n\n   handleEditBtn(): void {\n     this.editing = true\n   }\n\n   handleSaveBtn(): void {\n     this.editing = false\n-    \/\/ TODO: DB\u306b\u4fdd\u5b58\n+    if (this.memo) this.memo = await this.memoRepository.save(this.memo)\n   }\n }\n &lt;\/script&gt;<\/code><\/pre>\n<\/li>\n<\/ul>\n<h3>\u4e0d\u6b63\u30a2\u30af\u30bb\u30b9\u30c6\u30b9\u30c8<\/h3>\n<p>\u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\u753b\u9762\u3092\u8868\u793a\u3057\u305f\u969b\u306e\u3001created\u30d5\u30c3\u30af\u3067\u81ea\u5206\u4ee5\u5916\u306euid(<code>test_user<\/code>)\u306b\u30a2\u30af\u30bb\u30b9\u3059\u308b\u5b9f\u88c5\u3092\u66f8\u3044\u3066\u307f\u3066\u52d5\u4f5c\u3055\u305b\u3066\u3001\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u30eb\u30fc\u30eb\u304c\u6a5f\u80fd\u3057\u3066\u3044\u308b\u304b\u78ba\u304b\u3081\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-typescript\">  created(): void {\n    firebase\n      .firestore()\n      .collection(&#039;users&#039;)\n      .doc(&#039;other users uid&#039;)\n      .get()\n      .then((doc) =&gt; {\n        console.log(doc)\n      })\n      .catch((error: any) =&gt; {\n        console.log(&#039;Error getting document:&#039;, error)\n      })\n  }<\/code><\/pre>\n<p>\u4e0a\u8a18\u5b9f\u88c5\u3057\u3066\u3001\u753b\u9762\u3092\u8868\u793a\u3057\u305f\u3068\u3053\u308d\u3001\u3061\u3083\u3093\u3068\u6a29\u9650\u304c\u8db3\u308a\u306a\u3044\u3068\u3044\u3046\u30a8\u30e9\u30fc\u30e1\u30c3\u30bb\u30fc\u30b8\u304c\u51fa\u529b\u3055\u308c\u307e\u3057\u305f\u306e\u3067\u3001\u5927\u4e08\u592b\u305d\u3046\u3067\u3059\u3002<\/p>\n<blockquote>\n<p>Error getting document: FirebaseError: Missing or insufficient permissions.<\/p>\n<\/blockquote>\n<h2>Chrome\u62e1\u5f35\u306e\u516c\u958b<\/h2>\n<p>\u3053\u3053\u307e\u3067\u3067\u6700\u4f4e\u9650\u306e\u6a5f\u80fd\u306f\u3067\u304d\u305f\u306e\u3067\u3001Chrome Web Store\u306b\u516c\u958b\u3059\u308b\u3053\u3068\u306b\u3057\u307e\u3057\u305f\u3002\u516c\u958b\u624b\u9806\u306b\u3064\u3044\u3066\u306f\u3001\u5225\u3067\u8a18\u4e8b\u3092\u8d77\u3053\u3057\u307e\u3057\u305f\u306e\u3067\u3001\u305d\u3061\u3089\u3092\u53c2\u7167\u304f\u3060\u3055\u3044\u3002<br \/>\n<a href=\"https:\/\/rinoguchi.net\/2020\/10\/publish-chrome-extension.html\">Chrome Extension\u3092Web Store\u306b\u516c\u958b\u3059\u308b<\/a><\/p>\n<h2>\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0<\/h2>\n<p>\u4e0a\u8a18\u306e\u8a18\u4e8b\u3067\u306f\u89e3\u6c7a\u5f8c\u306e\u7d50\u679c\u3060\u3051\u66f8\u3044\u3066\u307e\u3059\u304c\u3001\u89e3\u6c7a\u306b\u6642\u9593\u304c\u304b\u304b\u3063\u305f\u3084\u3064\u306f\u30a8\u30e9\u30fc\u306e\u5185\u5bb9\u3084\u539f\u56e0\u3082\u542b\u3081\u3066\u307e\u3068\u3081\u3066\u304a\u304d\u307e\u3059\u3002<\/p>\n<h3>.vue \u30e2\u30b8\u30e5\u30fc\u30eb\u304cNot Found\u306b\u306a\u3063\u3066\u3057\u307e\u3046<\/h3>\n<p><b>TS2307: Cannot find module '.\/App.vue'<\/b><\/p>\n<p><code>import App from &#039;.\/App.vue&#039;<\/code>\u306e\u3088\u3046\u306a\u611f\u3058\u3067<code>.vue<\/code>\u30d5\u30a1\u30a4\u30eb\u3092import\u3057\u3088\u3046\u3068\u3059\u308b\u3068module\u304c\u898b\u3064\u304b\u3089\u306a\u3044\u3068\u3044\u3046\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3059\u3002\u3053\u308c\u306fts-loader\u304c<code>.vue<\/code>\u3092ts\u30d5\u30a1\u30a4\u30eb\u3068\u3057\u3066\u8a8d\u8b58\u3055\u305b\u308b\u3088\u3046\u306b\u3059\u308c\u3070\u826f\u3044\u307f\u305f\u3044\u3059\u3002<\/p>\n<p><a href=\"https:\/\/www.npmjs.com\/package\/ts-loader#appendtssuffixto\">\u3053\u3061\u3089<\/a>\u3092\u53c2\u8003\u306bwebpack.config.js\u306b<\/p>\n<pre><code class=\"language-json\">  module: {\n    rules: [\n      {\n        test: \/\\.ts$\/,\n        loader: &quot;ts-loader&quot;,\n        options: { appendTsSuffixTo: [\/\\.vue$\/] },\n        exclude: \/node_modules\/\n      }\n    ]\n  }<\/code><\/pre>\n<p>\u306e\u3088\u3046\u306b\u5b9f\u88c5\u3059\u308b\u3068\u4eca\u5ea6\u306f\u3001\u6b21\u306e\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3059\u3002<\/p>\n<p><b>Error: options\/query provided without loader (use loader + options)<\/b><\/p>\n<p>loader\u3068options\u3092\u4e00\u7dd2\u306b\u6307\u5b9a\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u3063\u307d\u3044\u3067\u3059\u3002<code>use<\/code>\u3092\u4f7f\u3063\u3066\u4ee5\u4e0b\u306e\u3088\u3046\u306bloader\u3068options\u3092\u307e\u3068\u3081\u3066\u30bb\u30c3\u30c8\u3059\u308b\u3068\u56de\u907f\u3067\u304d\u307e\u3057\u305f\u3002<\/p>\n<pre><code class=\"language-json\">  module: {\n    rules: [\n      {\n        test: \/\\.ts$\/,\n        use: [\n          {\n            loader:&#039;ts-loader&#039;,\n            options: {\n              appendTsSuffixTo: [\/\\.vue$\/]\n            }\n          }\n        ],\n        exclude: \/node_modules\/\n      }\n    ]\n  }<\/code><\/pre>\n<p><b>VS Code\u4e0a\u306e\u30a8\u30e9\u30fc\u304c\u6d88\u3048\u306a\u3044<\/b><\/p>\n<p>\u4e0a\u8a18\u5bfe\u5fdc\u3092\u3059\u308b\u3068\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306f\u6b63\u5e38\u306b\u52d5\u304f\u3088\u3046\u306b\u306a\u308b\u306e\u3067\u3059\u304c\u3001VS Code\u4e0a\u306e\u30a8\u30e9\u30fc\u304c\u6d88\u3048\u3066\u304f\u308c\u307e\u305b\u3093\u3002<br \/>\n<img src=\"http:\/\/localhost:8000\/wp-content\/uploads\/2020\/10\/20200504192154.png\" alt=\"\" \/><\/p>\n<p>\u3053\u308c\u3092\u89e3\u6c7a\u3059\u308b\u305f\u3081\u306b\u3001\u578b\u5b9a\u7fa9\u30d5\u30a1\u30a4\u30eb<code>shims-vue.d.ts<\/code>\u3092\u4f5c\u6210\u3057\u307e\u3057\u305f\u3002<\/p>\n<pre><code class=\"language-javascript\">declare module &#039;*.vue&#039; {\n  import Vue from &#039;vue&#039;\n  export default Vue\n}<\/code><\/pre>\n<h3>content_security_policy\u306e\u8a2d\u5b9a\u304c\u304a\u304b\u3057\u304f\u3066Chrome\u62e1\u5f35\u304b\u3089\u5916\u90e8\u30b9\u30af\u30ea\u30d7\u30c8\u3092\u8aad\u307f\u8fbc\u3081\u306a\u3044<\/h3>\n<p><code>manifest.json<\/code>\u306b<\/p>\n<pre><code class=\"language-json\">&quot;content_security_policy&quot;: &quot;script-src &#039;self&#039; https:\/\/apis.google.com\/; object-src &#039;self&#039;&quot;,<\/code><\/pre>\n<p>\u3068\u8a18\u8f09\u3057\u3066\u3044\u308b\u306b\u3082\u95a2\u308f\u3089\u305a\u3001\u4ee5\u4e0b\u306e\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3057\u305f\u3002<\/p>\n<pre><code>Refused to load the script &#039;https:\/\/apis.google.com\/js\/api.js&#039; because it violates the following Content Security Policy directive: &quot;script-src &#039;self&#039; &#039;unsafe-eval&#039;&quot;. Note that &#039;script-src-elem&#039; was not explicitly set, so &#039;script-src&#039; is used as a fallback.<\/code><\/pre>\n<p>\u5b9f\u969b\u52d5\u3044\u3066\u3044\u308b\u3082\u306e\u306f\u3069\u3046\u306a\u3063\u3066\u308b\u306e\u304b\u3068\u3001<code>npm run build:dev<\/code>\u3067<code>\/dist\/<\/code>\u306bcopy\u3055\u308c\u305fmanifest.json\u3092\u53c2\u7167\u3059\u308b\u3068\u3001\u306a\u3093\u3068<\/p>\n<pre><code class=\"language-json\">&quot;content_security_policy&quot;: &quot;script-src &#039;self&#039; &#039;unsafe-eval&#039;; object-src &#039;self&#039;&quot;<\/code><\/pre>\n<p>\u306b\u7f6e\u304d\u63db\u308f\u3063\u3066\u3057\u307e\u3063\u3066\u3044\u307e\u3057\u305f\u3002<\/p>\n<p>\u8ab0\u304c\u3053\u308c\u3092\u7f6e\u304d\u63db\u3048\u3066\u3044\u308b\u306e\u304b\u3068\u3044\u3046\u3068\u3001<code>webpack.config.js<\/code>\u306e<\/p>\n<pre><code class=\"language-javascript\">if (config.mode === &#039;development&#039;) {\n  jsonContent[&#039;content_security_policy&#039;] = &quot;script-src &#039;self&#039; &#039;unsafe-eval&#039;; object-src &#039;self&#039;&quot;;\n}<\/code><\/pre>\n<p>\u3068\u3044\u3046\u51e6\u7406\u3060\u3063\u305f\u306e\u3067\u3001\u3044\u3089\u3093\u3053\u3068\u3059\u308b\u306a\uff01\u3068\u3053\u306e\u51e6\u7406\u3092\u6d88\u3057\u3066\u307f\u308b\u3068\u4eca\u5ea6\u306f<\/p>\n<pre><code>Uncaught EvalError: Refused to evaluate a string as JavaScript because &#039;unsafe-eval&#039; is not an allowed source of script in the following Content Security Policy directive: &quot;script-src &#039;self&#039; https:\/\/apis.google.com&quot;.<\/code><\/pre>\n<p>\u3068\u3044\u3046\u5225\u306e\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3059\u3002development\u30e2\u30fc\u30c9\u3067\u306f\u6587\u5b57\u5217\u3092<code>eval<\/code>\u3057\u3066\u308b\u307f\u305f\u3044\u3067\u3059\u3002<\/p>\n<p>\u3068\u3044\u3046\u308f\u3051\u3067\u6700\u7d42\u7684\u306b\u306f\u3001<code>manifest.json<\/code>\u304b\u3089\u306f<code>content_security_policy<\/code>\u306e\u8a2d\u5b9a\u306f\u524a\u9664\u3057\u3001<code>webpack.config.js<\/code>\u3092\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u66f8\u304d\u63db\u3048\u3001development\u30e2\u30fc\u30c9\u3067\u306feval\u3092\u8a31\u53ef\u3059\u308b\u3088\u3046\u306b\u307e\u3057\u305f\u3002<\/p>\n<pre><code class=\"language-javascript\">if (config.mode === &#039;development&#039;) {\n  jsonContent[&#039;content_security_policy&#039;] = &quot;script-src &#039;self&#039; https:\/\/apis.google.com &#039;unsafe-eval&#039;; object-src &#039;self&#039;&quot;;\n} else {\n  jsonContent[&#039;content_security_policy&#039;] = &quot;script-src &#039;self&#039; https:\/\/apis.google.com; object-src &#039;self&#039;&quot;;\n}<\/code><\/pre>\n<p>\u3061\u306a\u307f\u306b\u3001content_security_policy\u306e\u8a2d\u5b9a\u306e\u4ed5\u65b9\u306f<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/Headers\/Content-Security-Policy\/script-src\">\u3053\u3061\u3089<\/a>\u304c\u308f\u304b\u308a\u3084\u3059\u304b\u3063\u305f\u3067\u3059\u3002<code>script-src &#039;self&#039; https:\/\/apis.google.com &#039;unsafe-eval&#039;;<\/code>\u306e\u90e8\u5206\u306f\u3001script\u306esource\u306f\u3001\u4ee5\u4e0b\u306e\u4e09\u3064\u3092\u8a31\u53ef\u3059\u308b\u3068\u3044\u3046\u3088\u3046\u306a\u610f\u5473\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<ul>\n<li><code>self<\/code>: \u81ea\u5206\u81ea\u8eab\uff08\u540c\u4e00\u30aa\u30ea\u30b8\u30f3\uff09\u304c\u63d0\u4f9b\u3059\u308bsource<\/li>\n<li><code>https:\/\/apis.google.com<\/code>: \u3053\u306e\u30c9\u30e1\u30a4\u30f3\u304c\u63d0\u4f9b\u3059\u308bsource<\/li>\n<li><code>unsafe-eval<\/code>: eval()\u3092\u4f7f\u3063\u3066\u6587\u5b57\u5217\u304b\u3089source code\u3092\u4f5c\u308b<\/li>\n<\/ul>\n<h3>webpack-extension-reloader\u3067ChromeExtension\u3092\u30ea\u30ed\u30fc\u30c9\u3059\u308b\u969b\u306bbackground.js\u3067WebSocket \u63a5\u7d9a\u30a8\u30e9\u30fc<\/h3>\n<p><a href=\"https:\/\/github.com\/ALiangLiang\/vue-webpack-chrome-extension-template\/issues\/9\">ISSUE<\/a>\u306b\u3082\u4e0a\u304c\u3063\u3066\u3044\u308b\u306e\u3067\u3059\u304c\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3059\u3002<\/p>\n<blockquote>\n<p>WebSocket connection to 'ws:\/\/localhost:9090\/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED<\/p>\n<\/blockquote>\n<p><code>npm run watch:dev<\/code>\u3067\u30d3\u30eb\u30c9\u3057\u305fbackground.js\u306b\u306f\u3001Chrome\u5074\u3067<code>ws:\/\/localhost:9090<\/code>\u3092\u76e3\u8996\u3057\u3066\u3001\u5909\u66f4\u304c\u3042\u3063\u305f\u3089\u62e1\u5f35\u3092\u30ea\u30ed\u30fc\u30c9\u3059\u308b\u3088\u3046\u306a\u51e6\u7406\u304c\u7d44\u307f\u8fbc\u307e\u308c\u3066\u3044\u308b\u306e\u3067\u3059\u304c\u3001<code>npm run watch:dev<\/code>\u3092\u505c\u6b62\u3057\u3066\u3044\u308b\u6642\u306f<code>ws:\/\/localhost:9090<\/code>\u3082\u505c\u6b62\u3059\u308b\u305f\u3081\u3001\u4e0a\u8a18\u306e\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3059\u3002\u306a\u306e\u3067\u3053\u306e\u30a8\u30e9\u30fc\u306f\u6c17\u306b\u3057\u306a\u304f\u3066\u5927\u4e08\u592b\u3067\u3059\u3002<\/p>\n<p>\u3061\u306a\u307f\u306b\u3001<code>npm run build:dev<\/code>\u3067\u30d3\u30eb\u30c9\u3057\u305f\u30b3\u30fc\u30c9\u306b\u306f\u3001\u4e0a\u8a18\u306e\u76e3\u8996\u51e6\u7406\u306f\u542b\u307e\u308c\u306a\u3044\u306e\u3067\u3053\u306e\u30a8\u30e9\u30fc\u306f\u767a\u751f\u3057\u307e\u305b\u3093\u3002<\/p>\n<h3>\u30d0\u30f3\u30c9\u30eb\u30b5\u30a4\u30ba\u304c\u5927\u304d\u3059\u304e\u308b<\/h3>\n<p>\u672c\u756a\u7528\u30b3\u30fc\u30c9\u3092<code>npm run build<\/code>\u3067\u51fa\u529b\u3057\u305f\u3068\u3053\u308d\u3001\u30d0\u30f3\u30c9\u30eb\u30b5\u30a4\u30ba\u304c\u5927\u304d\u3059\u304e\u308b\u3088\u3068\u3044\u3046\u8b66\u544a\u304c\u51fa\u307e\u3057\u306e\u3067\u3001\u30d0\u30f3\u30c9\u30eb\u30b5\u30a4\u30ba\u3092\u524a\u6e1b\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<pre><code>WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). This can impact web performance.\nWARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.<\/code><\/pre>\n<p>\u3053\u3061\u3089\u306b\u95a2\u3057\u3066\u306f\u3001\u9577\u304f\u306a\u308b\u306e\u3067\u5225\u8a18\u4e8b\u3067\u307e\u3068\u3081\u307e\u3057\u305f\u3002<br \/>\n<a href=\"https:\/\/rinoguchi.net\/2020\/05\/vue-firebase-reduce-bundle-size.html\">Vue+Firebase\u3067\u4f5c\u3063\u305f\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u30a2\u30d7\u30ea\u306e\u30d0\u30f3\u30c9\u30eb\u30b5\u30a4\u30ba\u3092\u524a\u6e1b\u3059\u308b<\/a><\/p>\n<h3>TS2705: An async function or method in ES5\/ES3 requires the 'Promise' constructor.  Make sure you have a declaration for the 'Promise' constructor<\/h3>\n<p><a href=\"https:\/\/stackoverflow.com\/questions\/43555378\/ts-an-async-function-or-method-in-es5-es3-requires-the-promise-constructor\">\u3053\u3061\u3089<\/a>\u3092\u53c2\u8003\u306b\u3001<code>tsconfig.json<\/code>\u306b\u4ee5\u4e0b\u306e\u8a2d\u5b9a\u3092\u52a0\u3048\u308b\u3053\u3068\u3067\u30a8\u30e9\u30fc\u304c\u51fa\u306a\u304f\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n<pre><code class=\"language-json\">{\n  &quot;compilerOptions&quot;: {\n    &quot;lib&quot;: [\n      &quot;es2015&quot;\n    ]\n  }\n}<\/code><\/pre>\n<p>\u307e\u305f\u3001\u3053\u306e\u5bfe\u5fdc\u3092\u3057\u305f\u3068\u3053\u308d\u3001<code>console.log()<\/code>\u3092\u4f7f\u3063\u3066\u3044\u308b\u7b87\u6240\u3067<\/p>\n<pre><code>TS2584: Cannot find name &#039;console&#039;. Do you need to change your target library? Try changing the `lib` compiler option to include &#039;dom&#039;.<\/code><\/pre>\n<p>\u3068\u3044\u3046\u5225\u306e\u30a8\u30e9\u30fc\u304c\u51fa\u308b\u3088\u3046\u306b\u306a\u3063\u305f\u305f\u3081\u3001<code>dom<\/code>\u3082<code>lib<\/code>\u306b\u8ffd\u52a0\u3057\u307e\u3057\u305f\u3002<\/p>\n<pre><code class=\"language-json\">{\n  &quot;compilerOptions&quot;: {\n    &quot;lib&quot;: [\n      &quot;es2015&quot;, &quot;dom&quot;\n    ]\n  }\n}<\/code><\/pre>\n<h3>\u30aa\u30d7\u30b7\u30e7\u30f3\u30da\u30fc\u30b8\u3067<v-btn>\u306ecolor\u304c\u304a\u304b\u3057\u3044<\/h3>\n<p>\u3053\u306e\u8a18\u4e8b\u3067\u306f\u30aa\u30d7\u30b7\u30e7\u30f3\u30da\u30fc\u30b8\u306b\u3064\u3044\u3066\u66f8\u3044\u3066\u306a\u3044\u306e\u3067\u3059\u304c\u3001vuetify\u306e<v-btn>\u3092\u4f7f\u3063\u3066\u30dc\u30bf\u30f3\u3092\u8868\u793a\u3059\u308b\u3068\u3001\u6307\u5b9a\u3057\u305f\u8272\u306b\u306a\u3089\u305a\u3001\u5fc5\u305a\u7070\u8272\u306b\u306a\u3063\u3066\u3057\u307e\u3046\u73fe\u8c61\u306b\u898b\u821e\u308f\u308c\u307e\u3057\u305f\u3002chrome\u306edeveloper-tool\u3067\u6839\u6c17\u3088\u304f\u307f\u3066\u3044\u308b\u3068\u3001<br \/>\n<img src=\"http:\/\/localhost:8000\/wp-content\/uploads\/2020\/10\/20200605000533.png\" alt=\"\" \/><\/p>\n<p>\u306e\u3088\u3046\u306b\u3001<code>injected stylesheet<\/code>\u3067<code>background-image<\/code> \u304c\u6307\u5b9a\u3055\u308c\u3066\u3044\u308b\u306e\u304c\u539f\u56e0\u3067\u3057\u305f\u3002<\/p>\n<p>\u3067\u3001\u3053\u306estylesheet\u3092inject\u3057\u3066\u3044\u308b\u7b87\u6240\u3092\u63a2\u3057\u305f\u3068\u3053\u308d\u3001<code>manifest.json<\/code>\u306e\u30aa\u30d7\u30b7\u30e7\u30f3\u30da\u30fc\u30b8\u306e\u8a2d\u5b9a\u306e<code>chrome_style: true<\/code>\u304c\u72af\u4eba\u3067\u3057\u305f\u3002<\/p>\n<pre><code class=\"language-json\">  &quot;options_ui&quot;: {\n    &quot;page&quot;: &quot;options\/options.html&quot;,\n    &quot;chrome_style&quot;: true\n  },<\/code><\/pre>\n<p>\u3053\u306e\u8a2d\u5b9a\u306fchrome\u3063\u307d\u3044\u5916\u89b3\u306b\u3057\u305f\u3044\u5834\u5408\u306b\u8a2d\u5b9a\u3059\u308b\u3082\u306e\u3067\u30c7\u30d5\u30a9\u30eb\u30c8\u306f<code>false<\/code>\u3089\u3057\u3044\u306e\u3067\u3059\u304c\u3001<code>vue-web-extension<\/code>\u3092\u4f7f\u3063\u305f\u5834\u5408<code>true<\/code>\u304c\u8a2d\u5b9a\u3055\u308c\u307e\u3059\u3002\u5c11\u306a\u304f\u3068\u3082vuetify\u3068\u306f\u76f8\u6027\u304c\u3088\u304f\u306a\u3044\u3053\u3068\u304c\u5224\u660e\u3057\u305f\u306e\u3067\u3001<code>false<\/code>\u306b\u8a2d\u5b9a\u3057\u554f\u984c\u3092\u89e3\u6c7a\u3057\u307e\u3057\u305f\u3002<\/p>\n<h2>\u95a2\u9023\u8a18\u4e8b<\/h2>\n<p>\u30b3\u30a2\u306a\u90e8\u5206\u3092\u4f5c\u308a\u8fbc\u307f\u306a\u304c\u3089\u3053\u306e\u8a18\u4e8b\u3092\u66f8\u3044\u3066\u3044\u305f\u306e\u3067\u3059\u304c\u3001\u305d\u306e\u5f8c\u30d6\u30e9\u30c3\u30b7\u30e5\u30a2\u30c3\u30d7\u3057\u3066\u3044\u304f\u4e2d\u3067\u3001\u5225\u8a18\u4e8b\u3092\u8d77\u3053\u3057\u305f\u3082\u306e\u304c\u3042\u308a\u307e\u3059\u306e\u3067\u3001\u7d39\u4ecb\u3057\u3066\u304a\u304d\u307e\u3059\u3002<\/p>\n<ul>\n<li><a href=\"https:\/\/rinoguchi.net\/2020\/10\/publish-chrome-extension.html\">Chrome Extension\u3092Web Store\u306b\u516c\u958b\u3059\u308b<\/a><\/li>\n<li><a href=\"https:\/\/rinoguchi.net\/2020\/08\/firestore-cost-risk.html\">Firestore\u306e\u30b3\u30b9\u30c8\u30ea\u30b9\u30af\u524a\u6e1b<\/a><\/li>\n<li><a href=\"https:\/\/rinoguchi.net\/2020\/06\/dexie-js.html\">IndexedDB\u3092\u3064\u304b\u3046\u306a\u3089Dexie.js\u304c\u4fbf\u5229<\/a><\/li>\n<li><a href=\"https:\/\/rinoguchi.net\/2020\/10\/vuetify-reset-css.html\">Vuetify\u306e\u30ea\u30bb\u30c3\u30c8CSS\u306e\u5f71\u97ff\u7bc4\u56f2\u3092Vuetify\u9069\u7528\u7bc4\u56f2\u5185\u306b\u9650\u5b9a\u3059\u308b<\/a><\/li>\n<li><a href=\"https:\/\/rinoguchi.net\/2020\/05\/vue-firebase-reduce-bundle-size.html\">Vue+Firebase\u3067\u4f5c\u3063\u305f\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u30a2\u30d7\u30ea\u306e\u30d0\u30f3\u30c9\u30eb\u30b5\u30a4\u30ba\u3092\u524a\u6e1b\u3059\u308b<\/a><\/li>\n<li><a href=\"https:\/\/rinoguchi.net\/2020\/08\/typescript-recaptcha-v2-v3.html\">typescript\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306breCAPTCHA v2 &amp; v3\u3092\u5c0e\u5165<\/a><\/li>\n<\/ul>\n<h2>\u3055\u3044\u3054\u306b<\/h2>\n<p>\u4eca\u56de\u3001\u958b\u767a\u30fb\u516c\u958b\u3057\u305fChrome\u62e1\u5f35\u306f\u3001\u3053\u3053\u306b\u8a18\u8f09\u3057\u305f\u3082\u306e\u304b\u3089\u591a\u5c11\u6a5f\u80fd\u8ffd\u52a0\u3057\u3066\u3044\u307e\u3059\u304c\u3001\u6839\u5e79\u306e\u90e8\u5206\u306f\u8aac\u660e\u3067\u304d\u305f\u304b\u306a\u3068\u601d\u3044\u307e\u3059\u3002\uff08\u30bd\u30fc\u30b9\u306f\u601d\u308f\u306c\u8106\u5f31\u6027\u3068\u304b\u898b\u3064\u3051\u3089\u308c\u3066\u653b\u6483\u3055\u308c\u308b\u3068\u6016\u3044\u306e\u3067\u3001\u516c\u958b\u3057\u307e\u305b\u3093\u3002\uff09<\/p>\n<p>Chrome\u62e1\u5f35\uff0bFirebase\u3092\u4f7f\u3046\u3053\u3068\u3067\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u30b5\u30fc\u30d0\u3082\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u30b5\u30fc\u30d0\u3082\u4e0d\u8981\u306b\u306a\u308a\u3001\u30b5\u30fc\u30d0\u30ec\u30b9\u3067\u30b5\u30fc\u30d3\u30b9\u3092\u69cb\u7bc9\u3067\u304d\u305f\u3053\u3068\u306f\u975e\u5e38\u306b\u3042\u308a\u304c\u305f\u304b\u3063\u305f\u3067\u3059\u3002Vue + Vuetify\u3082\u7279\u306b\u9055\u548c\u611f\u306a\u304f\u4f7f\u3044\u3084\u3059\u304b\u3063\u305f\u3067\u3059\u3057\u3001\u4eca\u56de\u306e\u6280\u8853\u9078\u5b9a\u306f\u7d50\u69cb\u3042\u305f\u308a\u3060\u3063\u305f\u304b\u306a\u3001\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u4efb\u610f\u306eWEB\u30b5\u30a4\u30c8\u306b\u81ea\u5206\u7528\u306e\u30e1\u30e2\u3092\u6b8b\u3059\u3053\u3068\u304c\u3067\u304d\u308b Chrome Extension \u3092\u4f5c\u3063\u3066\u516c\u958b\u3057\u307e\u3057\u305f\u3002 plaintext\u30e2\u30fc\u30c9 or markdown\u30e2\u30fc\u30c9\u3067\u30e1\u30e2\u3092\u53d6\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u3088\u3051\u308c\u3070\u4f7f\u3063\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002 \u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001\u3053\u306eChrome\u62e1\u5f35\u958b\u767a\u306e\u30b3\u30a2\u306a\u90e8\u5206\u304c\u51fa\u6765\u4e0a\u304c\u308b\u307e\u3067\u306b\u3064\u3044\u3066\u7d39\u4ecb\u3057\u3066\u3044\u3053\u3046\u3068\u601d\u3044\u307e\u3059\u3002 Web Store\u30ea\u30f3\u30af https:\/\/chrome.google.com\/webstore\/detail\/memorun\/lhkibcggoojcpjmigjohdlgfgjdbjkpb \u7d39\u4ecb\u52d5\u753b \u4f7f\u7528\u3057\u3066\u3044\u308b\u6280\u8853 Chrome Extension Vue.js + Vuetify TypeScript Firebase Authentication Cloud Firestore Cloud Function\uff08\u3053\u306e\u8a18\u4e8b\u3067\u306f\u51fa\u3066\u304d\u307e\u305b\u3093\uff09 Vue.js\u3092\u4f7f\u3063\u305fChro <a href=\"http:\/\/localhost:8000\/2020\/10\/vue-vuetify-firebase-chrome-extension.html\" class=\"read-more button-fancy -red\"><span class=\"btn-arrow\"><\/span><span class=\"twp-read-more text\">Continue Reading<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[23,3,21,22],"tags":[],"_links":{"self":[{"href":"http:\/\/localhost:8000\/wp-json\/wp\/v2\/posts\/181"}],"collection":[{"href":"http:\/\/localhost:8000\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/localhost:8000\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/localhost:8000\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/localhost:8000\/wp-json\/wp\/v2\/comments?post=181"}],"version-history":[{"count":1,"href":"http:\/\/localhost:8000\/wp-json\/wp\/v2\/posts\/181\/revisions"}],"predecessor-version":[{"id":190,"href":"http:\/\/localhost:8000\/wp-json\/wp\/v2\/posts\/181\/revisions\/190"}],"wp:attachment":[{"href":"http:\/\/localhost:8000\/wp-json\/wp\/v2\/media?parent=181"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/localhost:8000\/wp-json\/wp\/v2\/categories?post=181"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/localhost:8000\/wp-json\/wp\/v2\/tags?post=181"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}