概述

之前介紹過 移動Web開發基礎-flex彈性佈局（相容寫法） 裡面有提到過想做一個Chrome外掛，來生成flexbox佈局的css程式碼直接拷貝出來用。最近把這個想法實現了，給大家分享下。

play-flexbox外掛介紹

play-flexbox

一秒搞定flexbox佈局，可直接預覽效果，拷貝CSS程式碼快速用於頁面重構。

如何使用

這裡的使用方法是基於該擴充套件程式沒有上線到商店，通過本地開啟使用。

第二步：開啟Chrome瀏覽器擴充套件程式
也可以在瀏覽器位址列中輸入 chrome://extensions/ 直接開啟

第三步：安裝擴充套件程式
在解壓後的檔案中找到 play-flexbox.crx

注：如果你想安裝並除錯該外掛，可以先勾選開發者模式，然後匯入解壓的資料夾，就可以看到這個外掛的圖標出現在瀏覽器右上角了，當然你先要確保已經刪掉了之前用安裝包安裝的外掛，接下來你在編輯器中修改了程式碼，在這個外掛下面點選重新載入就可以重新整理。

第四步：選擇佈局方案
通過下拉框來選擇自己需要的佈局方案，這裡以水平垂直方向都居中，專案等分為例。

第五步：拷貝CSS程式碼用於重構佈局樣式
父容器是“flex-wrap”，專案是“item”，這裡的類名根據開發情況自行調整，樣式對應起來就行。

技術解析

我們這個專案首先是一個Chrome擴充套件程式，其次是一個用vue.js實現功能的web專案。我們先來了解Chrome擴充套件程式。

Chrome擴充套件程式或應用開發

Chrome擴充套件是用於擴充Chrome瀏覽器功能的程式，Chrome應用是以Chrome為平臺執行的程式，兩者似乎並沒有太明確的區別，甚至有些程式既可以設計成Chrome擴充套件也可以設計成Chrome應用。但既然Google將基於Chrome平臺的程式分為了兩類，說明兩者還是有區別的。

Chrome擴充套件主要用於對瀏覽器功能的增強，它更強調與瀏覽器相結合。比如Chrome擴充套件可以在瀏覽器的工具欄和位址列中顯示圖示，它可以更改使用者當前瀏覽的網頁中的內容，也可以更改瀏覽器代理伺服器的設定等等。

Chrome應用更強調是獨立的程式，你可以不開啟Chrome瀏覽器而執行這些程式。同時這些程式可以呼叫更加底層的系統介面，比如串列埠、USB、本地檔案讀寫等等。同時Chrome應用可以擁有樣式更加自由的獨立視窗，而Chrome擴充套件的介面只能限定在瀏覽器視窗中。

相比其他的web專案開發只是多了一個配置檔案manifast.json。而與vue結合使用，最關鍵的就是CSP安全策略問題，vue官方文件有一個說明。

看不太懂，沒關係，相比其他擴充套件程式的配置檔案manifast.json，使用了vue開發的擴充套件程式在配置檔案裡新增如下配置就好了。

"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"

Vue.js實踐

這裡我們沒有使用webpack等工具，直接是script引入，宣告式渲染。

用到了vue裡面的 v-for、v-model、v-bind、v-if等指令，關鍵點就是通過計算屬性將下拉框繫結的值轉換成對應的類名及CSS樣式字串，最後展示出來，這種雙向繫結的功能需求最適合用Vue這類MVVM框架來實現了。

具體實現邏輯看原始碼吧，Vue學習可以看下我之前寫的專欄《Vue 2.0 實現 SPA 應用基礎》。

歡迎大家提出寶貴意見！