先嘗試使用 vue 建立簡單的 todolist

在 manifest.json 增加 permissions

{
    "manifest_version" : 2, 
    "name" : "Hello Vue", 
    "version" : "1.0",
    "description" : "A hello world for vue",
    "icons":{ 
        "128" : "icon128.png",
        "48"  : "icon48.png",
        "16"  : "icon16.png"
    },
    "browser_action" :{ 
        "default_icon" : "icon16.png",
        "default_popup" : "popup.html"
    },
    "permissions": [
        "storage"
    ],
    "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}

修正 app.vue ，增加 todolist 的相關程式碼 :

<template>
  <div id="app">
    <h1>{{ msg }}</h1>
    <div v-for="(item,index) in items">
        <span>{{item}} <button @click="deleteData(index)">刪除</button></span>
    </div>
    <div>
     <input type="text" v-model="inputData" />
     
     <button @click="addItem">新增資料</button>
    </div>
    <div>
    <button @click="loadData">讀取資料</button>
    <button @click="saveData">儲存資料</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Hello vue !',
      inputData : 'test',
      items : []
    }
  },
  methods: {
      addItem : function(){
          var item = this.inputData;
          this.items.push(item);
      },
      loadData : function(){
        var vm = this; 
        chrome.storage.local.get("tempData",function(result) {
        vm.items = result.tempData;
    });
      },
      saveData : function(){
        chrome.storage.local.set({"tempData" : this.items},function() {
          console.log('Value is set');
        });
    },
    deleteData : function(index){
        this.items.splice(index, 1);
    }

  }
}
</script>

執行結果 :

至少有基本功能，感謝大家收看 :)