今天，我們要來使用vue開發我們的浮動頁面(Popup page)，正常狀況下會這樣使用
<body>
<script src="./vue.min.js"></script>
<!--other code-->
</body>
可是畫面還是不會跑出來，而且console還沒有任何的錯誤，後來上網研究了一下，
才發現是因為 Chrome Extension 的 安全性策略 - Content Security Policy (CSP) 的關係
在此簡單的介紹一下，安全性策略就是為了限制與保護擴充功能的一種機制，而默認的安全性策略為下：
script-src 'self'; object-src 'self'
會影響到的功能為：
而 Vue 裡面的 template 功能就是依賴eval達成高效率的編譯，所以會被阻止，於是我從偉大的GOOGLE找到了幾種解法
非常簡單，直接在manifest裡面加上 unsafe-eval
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
（註：官方極度不建議此做法，會提升系統被XSS攻擊的風險。）
既然不能用vue template，那使用createElement就可以了吧！
沒錯！所以我們可以直接使用createElement，但這個又太難用了，所以直接用JSX來寫吧！
//disable
new Vue({
template: ``
})
//enable
new Vue({
render(){
<div></div>
}
})
(需載入其他套件編譯,ex:vue/babel-preset-jsx)
既然我們不能在編譯時載入，那我們先編譯完再載入總可以吧！
就回到寫vue的大家們很熟悉的cli了，而 vue cli 有一個插件叫做vue-cli-plugin-chrome-ext，可以讓大家建立專案的manifest.json，而且還會分為dev以及prod的兩種版本，打包以後也會匯出manifest.json以及其他檔案，有興趣的人可以嘗試看看
因為開發時程的關係，我們就直接用第一種吧，然後把codepen裡的程式碼都匯入empty project中
解決囉！明天就讓我們來看後台腳本吧！
iThome鐵人賽
看影片追技術