使用Vue開發Chrome擴展

使用Vue開發Chrome插件的模板

最近看了一些Chrome 插件開發的內容, 想要使用Vue的單文件來編寫，可是沒有現成的webpack打包方式，本身寫了一個，第一次本身編寫webpack的配置文件。github

目錄結構

│  .babelrc.js
│  .gitignore
│  package-lock.json
│  package.json
│  webpack.config.js
│  
├─src
│  │  manifest.json
│  │  
│  ├─background
│  │      background.js
│  │      
│  ├─content
│  │      content.js
│  │      
│  ├─option
│  │      App.vue
│  │      option.html
│  │      option.js
│  │      
│  └─popup
│          App.vue
│          popup.html
│          popup.js
│          
└─static
    └─img
            icon.png
複製代碼

目前模板支持

• vue 模板解析
• es6語法轉換
• 圖片打包
• 字體打包

使用

## 安裝依賴
npm install 
## 打包
npm build
## 開發
npm run watch
複製代碼

Chrome 插件開發 資源

• 《Chrome插件開發全攻略》配套完整Demo
• Chrome擴展及應用開發
• Chrome擴展及應用開發（首發版）