iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 7
0
Modern Web

弄點簡單的 Chrome Extension 讓生活更方便系列 第 7

Chrome Extension 07 – 不確定能不能用的 vue 採雷..2

  • 分享至 

  • xImage
  •  

續昨天的研究,修正 src 底下的檔案
index.js 修正成

  import Vue from 'vue'
  import App from './App.vue'
  
  new Vue({
    el: '#app',
    render: h => h(App)
  })
  

及在 src 目錄底下,增加 app.vue

<template>
  <div id="app">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Hello vue !'
    }
  }
}
</script>

執行 webpack 建置後,在 dist 直接建立 chrome extenion 相關檔案,測試是否能使用 vue
https://ithelp.ithome.com.tw/upload/images/20181022/20094223RZRoVOxYW9.png
manifest.json

{
    "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"
    },
    "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}

popup.html 部分

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="utf-8">
        <title>Title Page</title>
    </head>
    <body>
        <div id="app"></div>
        <script type="text/javascript"  src="bundle.js"></script>
    </body>
</html>

資料已經可以正常顯示到 Chrome Extension 的 popup 頁面上(灑花..
https://ithelp.ithome.com.tw/upload/images/20181022/200942231rMnyWxdL2.png

感謝收看,明天會開始用 vue 做一些功能,或繼續學 webpack 讓專案更好使用 :)


上一篇
Chrome Extension 06 – 不確定能不能用的 vue 採雷..
下一篇
Chrome Extension 08 – todolist : 新增儲存資料
系列文
弄點簡單的 Chrome Extension 讓生活更方便30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言