我的第一个Chrome小插件-基于vue开发的flexbox布局CSS拷贝工具

概述

之前介绍过 移动Web开发基础-flex弹性布局（兼容写法） 里面有提到过想做一个Chrome插件，来生成flexbox布局的css代码直接拷贝出来用。最近把这个想法实现了，给大家分享下。

play-flexbox插件介绍

play-flexbox

一秒搞定flexbox布局，可直接预览效果，拷贝CSS代码快速用于页面重构。



你也可以通过点击以下链接（codepen示例）查看插件效果。

https://codepen.io/xiangshuo1992/pen/EovGQe

如何使用

这里的使用方法是基于该扩展程序没有上线到商店，通过本地打开使用。

第一步：下载

在我的项目 https://github.com/xiangshuo1992/play-flexbox 下载源代码并解压。（顺手给个star，感谢）



第二步：打开Chrome浏览器扩展程序

也可以在浏览器地址栏中输入 chrome://extensions/ 直接打开



第三步：安装扩展程序

在解压后的文件中找到

play-flexbox.crx

文件，然后将该文件拖入浏览器 chrome://extensions/ 扩展程序中，浏览器会提示安装，确认添加插件就好，接下来你会在你的浏览器右上角看到这只猴子，点击进行使用。



注：如果你想安装并调试该插件，可以先勾选开发者模式，然后导入解压的文件夹，就可以看到这个插件的图标出现在浏览器右上角了，当然你先要确保已经删掉了之前用安装包安装的插件，接下来你在编辑器中修改了代码，在这个插件下面点击重新加载就可以刷新。



第四步：选择布局方案

通过下拉框来选择自己需要的布局方案，这里以水平垂直方向都居中，项目等分为例。



第五步：拷贝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扩展的界面只能限定在浏览器窗口中。

——引用自《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 应用基础》。

欢迎大家提出宝贵意见！