從原型到源碼
本次要開(kāi)發(fā)的插件其實(shí)是很簡(jiǎn)單功能，顯示每天的待辦清單，能夠添加，能夠打勾，其它差不多就行了。之前對(duì)chrome插件開(kāi)發(fā)沒(méi)接觸，以為會(huì)有很多api和開(kāi)發(fā)模式需要學(xué)習(xí)，經(jīng)過(guò)大致的了解，發(fā)現(xiàn)要實(shí)現(xiàn)的大部分功能都在一個(gè)網(wǎng)頁(yè)里——點(diǎn)擊插件圖標(biāo)，展現(xiàn)一個(gè)本地網(wǎng)頁(yè)。所以應(yīng)該和web開(kāi)發(fā)差不多，只需要最后再稍微修飾下就可以。
選型
考慮到要實(shí)現(xiàn)的功能很簡(jiǎn)單，最終的插件包就要盡量的小，網(wǎng)頁(yè)的加載和顯示也該盡量快，對(duì)資源的占用也該小到忽略不計(jì)。
因而jQuery肯定是淘汰的，最好是不依賴(lài)其它js庫(kù)。最開(kāi)始簡(jiǎn)單寫(xiě)了幾行代碼發(fā)現(xiàn)，對(duì)dom的操作還是挺多的，這樣的開(kāi)發(fā)效率太慢。測(cè)試了一下vue2，各方面都很符合要求，開(kāi)發(fā)效率卻是翻了好幾番，決定采納。保持簡(jiǎn)單，vuex和router就免了。
語(yǔ)言上當(dāng)然首選es6、es7，不用async，await來(lái)寫(xiě)網(wǎng)絡(luò)接口請(qǐng)求代碼，我受不了！開(kāi)發(fā)上vue和webpack實(shí)時(shí)更新非常方便，使用cookingjs，webpack2、vue2、打包腳本等一應(yīng)俱全，免去了集成調(diào)試的煩惱，完全和開(kāi)發(fā)網(wǎng)頁(yè)一樣一樣的啊。
項(xiàng)目構(gòu)成
項(xiàng)目分兩部分，一個(gè)部分是純網(wǎng)頁(yè)，點(diǎn)擊插件圖標(biāo)顯示的popup.html頁(yè)面；另一部分就是chrome相關(guān)的接口，目前涉及不多，后面會(huì)加上定時(shí)和通知功能。網(wǎng)頁(yè)的部分按cooking的方式開(kāi)發(fā)網(wǎng)頁(yè)就行了，插件的部分沒(méi)幾行代碼，手寫(xiě)。
目錄結(jié)構(gòu)
src 為網(wǎng)頁(yè)源碼，最終打包后會(huì)輸出到crx目錄下指定的位置。這樣crx就是一個(gè)干凈、完整的chrome插件目錄，可以本地加載來(lái)做最后的測(cè)試，也可以直接壓縮成zip提交到chrome應(yīng)用商店發(fā)布。
css樣式
開(kāi)發(fā)前先使用sketch制作原型，這樣開(kāi)發(fā)的時(shí)候就不需要再考慮布局的事情。通過(guò)sketch插件導(dǎo)出部分的css代碼，再稍微改裝下，基本也夠用，更高級(jí)的我也不會(huì)了。postcss不錯(cuò)，適合開(kāi)發(fā)人猿。
es 配置
為了讓eslint支持最新的特性，加上這兩段太強(qiáng)大，好像都不需要再去調(diào)整啥了。
"parserOptions": { "ecmaVersion": 2017, "sourceType": "module" }, "env": { "es6": true }
cooking 的額外配置
如果只是純粹的網(wǎng)頁(yè)，cooking的默認(rèn)配置就夠用，不過(guò)為了方便開(kāi)發(fā)和打包，自己又做了一些調(diào)整。
- 打包的輸出，修改dist目錄和最終的文件名，去除其它不必要文件和為了避免緩存的hash文件重命名。
- 設(shè)置代理，方便api接口調(diào)用，保證開(kāi)發(fā)和發(fā)布的代碼的一致性。
- 增加對(duì)依賴(lài)庫(kù)的打包。由于airloy使用rollup打包，為了減少兩種不同的打包方式而增加額外的最終代碼，對(duì)airloy相關(guān)庫(kù)使用源碼的方式引入，再全部使用webpack打包，又進(jìn)一步壓縮了最終代碼的大小。
有vue真好
使用函數(shù)動(dòng)態(tài)變更輸出，在循環(huán)中過(guò)濾列表顯示，dom動(dòng)效天然集成，watch避免父子組件間互相依賴(lài)。想實(shí)現(xiàn)的效果都能在vue里找到解決方案，開(kāi)發(fā)起來(lái)真的是不能再快了。這方面就不多說(shuō)了，總共的代碼也沒(méi)幾個(gè)文件。
源碼
目前插件已開(kāi)發(fā)完畢并上線(xiàn)，稍微總結(jié)整理下經(jīng)驗(yàn)，給想開(kāi)發(fā)插件的同學(xué)。
- sketch原型文件和html導(dǎo)出文件下載
https://pan.baidu.com/s/1qX9ScBM - 源碼放在github上
https://github.com/airloy/objective-chrome-extension - 插件在線(xiàn)安裝，翻墻地址
https://chrome.google.com/webstore/detail/%E8%A1%8C%E4%BA%8B%E6%98%93/ebaffmkmddpmojnobhnofpgdeibmkhof?hl=zh-CN - 插件手動(dòng)安裝包下載
https://pan.baidu.com/s/1c1Pjve4
