使用 Vuejs 開發 chrome 插件
chrome 插件的開發其實並不難，web開發者可以使用 html, css, javascript 輕松的開發實用的 chrome 插件。
一個好的 chrome 插件可以提高我們的開發效率，甚至方便我們的生活。例如 Vue-devtools ，是 Vuejs 的開發者不可或缺的利器，再如最常見的谷歌翻譯插件，可以翻譯整個網頁中的英文內容，可以很方便的幫助我們查閱英文文檔。
chrome 插件使用前端技術開發，但是提供了一些高級的接口(文件操作，操作USB設備，系統信息等)，所以可以開發出一些桌面級別的應用。
chrome 插件開發文檔：Chrome擴展及應用開發（首發版）
分享一個本人使用 Vuejs 開發的一個 chrome 插件: Easy-todo
CSP
CSP（Content Security Policy），內容安全策略，CSP 通常是在 header 或者 HTML 的 meta 標簽中定義的，它聲明了一系列可以被當前網頁合法引用的資源，如果不在 CSP 聲明的合法范圍內，瀏覽器會拒絕引用這些資源，CSP 的主要目的是防止跨站腳本攻擊（XSS）。
為什么介紹 CSP 呢？因為 Chrome 擴展應用了 CSP ，嚴格的內容安全策略將導致不能在 javascript 中使用 eval , new Function 等方法，一些js框架或者庫不能正常工作。
Chrome擴展允許開發者放寬一點點CSP的限制，如果希望能在 Chrome 插件中使用 Vue ，需要在 manifest 中做一點配置：
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
更多關於 CSP 的描述：http://www.ituring.com.cn/book/miniarticle/73949
有些朋友可能會有疑問，能在 Chrome 插件中使用 vue-router， vuex 和一些組件庫嗎？只要你配置了上面的 CSP ,這些將都可以正常工作 。
如何本地存儲 todolist 中的數據呢？簡單的可以使用 html5 的 localStorage，或者使用 chrome 封裝的 chrome.storage API，兩者的區別及 chrome.storage 使用方法：http://www.ituring.com.cn/book/miniarticle/60274
總結
使用 Vuejs 開發 chrome 插件最重要的步驟就是配置 "content_security_policy" 了，其他的就是翻閱開發文檔了，一般過一遍就能知道個大概。雖然都是用 html css js 寫的，但是還是有一些區別，特別是js文件之間的通信會有些繁瑣。