refactor: 测试storage存储功能

extension/.eslintrc.js

@@ -3,6 +3,9 @@ module.exports = {
   env: {
     node: true
   },
+  globals: {
+    chrome: 'readonly'
+  },
   extends: [
     'plugin:vue/essential',
     '@vue/standard'

extension/public/background.js

@@ -1,10 +0,0 @@
-chrome.runtime.onInstalled.addListener(function() {
-  // 扩展第一次安装时触发
-  // alert('安装完成')
-})
-
-chrome.bookmarks.onCreated.addListener(function() {
-  // alert('新增书签')
-})
-// chrome.browserAction.setBadgeText({text: '↑'})
-// chrome.browserAction.setBadgeText({text: '↓'})

extension/public/manifest.json

@@ -19,12 +19,6 @@
       "128": "images/bookmark128.png"
     }
   },
-  "background": {
-    "scripts": [
-      "background.js"
-    ],
-    "persistent": false
-  },
   "options_page": "options.html",
   "homepage_url": "https://github.com/alvisisme",
   "permissions": [

extension/src/components/vbutton.vue

@@ -1,5 +1,5 @@
 <template>
-  <button class="v-button">
+  <button class="v-button" @click="handleClick">
     <slot></slot>
   </button>
 </template>
@@ -9,6 +9,11 @@ export default {
   name: 'VButton',
   props: {
     msg: String
+  },
+  methods: {
+    handleClick (e) {
+      this.$emit('click', e)
+    }
   }
 }
 </script>

extension/src/pages/options/app.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="app">
     <v-row>
-      <h1>配置页面</h1>
+      <h1>{{name}}配置页面</h1>
     </v-row>
     <v-row>
       配置项
@@ -9,7 +9,7 @@
 
     <v-row>
       <v-col :span=12>
-        <v-button>保存</v-button>
+        <v-button @click="save()">保存</v-button>
       </v-col>
       <v-col :span=12>
         <v-button>取消</v-button>
@@ -22,6 +22,7 @@
 import vRow from '@/components/vrow.vue'
 import vCol from '@/components/vcol.vue'
 import vButton from '@/components/vbutton.vue'
+import dataService from '@/service/data-service'
 
 export default {
   name: 'App',
@@ -29,6 +30,30 @@ export default {
     vRow,
     vCol,
     vButton
+  },
+  data () {
+    return {
+      name: '',
+      num: 0
+    }
+  },
+  methods: {
+    save () {
+      const value = 'aaaa'
+      chrome.storage.local.set({ key: value }, function () {
+        console.log('Value is set to ' + value)
+      })
+
+      chrome.storage.local.get(['key'], function (result) {
+        console.log('Value currently is ' + result.key)
+      })
+      dataService.setUpdatetime(`${this.num++} : ${Date.now()}`)
+      // const bg = chrome.extension.getBackgroundPage()
+      // bg.setUpdateTime(`${this.num++} : ${Date.now()}`)
+    }
+  },
+  created () {
+    this.name = chrome.i18n.getMessage('name')
   }
 }
 </script>

extension/src/pages/popup/app.vue

@@ -13,7 +13,7 @@
 
     <v-row>
       <v-col :span=12>
-        <v-button>上传</v-button>
+        <v-button @click="upload()">上传</v-button>
       </v-col>
       <v-col :span=12>
         <v-button>下载</v-button>
@@ -27,6 +27,7 @@ import vLoading from '@/components/vloading.vue'
 import vRow from '@/components/vrow.vue'
 import vCol from '@/components/vcol.vue'
 import vButton from '@/components/vbutton.vue'
+import dataService from '@/service/data-service'
 
 export default {
   name: 'App',
@@ -41,6 +42,18 @@ export default {
       loading: false,
       updateTime: new Date()
     }
+  },
+  methods: {
+    upload () {
+      dataService.getUpdatetime().then(val => {
+        this.updateTime = val
+      })
+    }
+  },
+  created () {
+    dataService.getUpdatetime().then(val => {
+      this.updateTime = val
+    })
   }
 }
 </script>

extension/src/service/data-service.js

@@ -0,0 +1,20 @@
+function setUpdatetime (time) {
+  return new Promise((resolve, reject) => {
+    chrome.storage.local.set({
+      updateTime: time
+    }, resolve)
+  })
+}
+
+function getUpdatetime () {
+  return new Promise((resolve, reject) => {
+    chrome.storage.local.get(['updateTime'], function (result) {
+      resolve(result.updateTime)
+    })
+  })
+}
+
+export default {
+  setUpdatetime,
+  getUpdatetime
+}

extension/vue.config.js

@@ -1,5 +1,3 @@
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-
 module.exports = {
   publicPath: '',
   pages: {