使用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文件之間的通訊會有些繁瑣。

CPS版本下載：https://github.com/vuejs/vue/blob/csp/dist/vue.min.js