前言

之前分析过了 element-ui 的项目(自建vue组件 air-ui (2) -- 先分析一下 element ui 项目)，包括目录结构，构建以及项目开发的整体思路，今天打算还是以 element-ui这个项目的源码为主，我们来聊一聊开发一个ui组件的时候，我们应该怎么设计 css 的开发规范。 这一点我觉得 element-ui 它们封装的非常好，该抽象的有抽象，该封装的有封装。所以后续我开发 air-ui 直接把这一套挪过去用了。

什么是 BEM

关于 BEM 的更详细的介绍，可以看它的官网: BEM官网

BEM 是 Block（块） Element（元素） Modifier（修饰器）的简称, 它可以帮助你创建出可以复用的前端组件和前端代码, 他有以下三个特点：

• 重用性 不同方式组织独立的块，并智能地重用它们，可以减少必须维护的CSS代码量。通过一系列风格指南，您可以构建一个块库，使您的CSS超级有效。
• 单元性 块的样式从来不依赖同页面其它的元素，所以你永远不会遇到级联问题。您还可以将完成的项目中的块转移到新项目中。
• 结构化 BEM方法可以使得你的CSS代码结构性很好，从而更加容易理解。

使用BEM规范来命名CSS，组织HTML中选择器的结构，利于CSS代码的维护，使得代码结构更清晰。 当然也有弊端，比如名字会稍长, 而且因为大部分都是只有一层结构，还要注意样式覆盖问题

前言

工欲善其事必先利其器，既然我们的 air-ui 大部分都是借鉴 element-ui 项目，所以本章我们就来分析一下 element-ui 项目源码。

下载源码

首先我们到这个 https://github.com/ElemeFE/element ， 把源码下载下来

安装 yarn

因为是基于 yarn 安装的，所以我们也全局装一下 yarn：

1
2
3
4
5

F:\code\github\element>npm install -g yarn
C:\Program Files\nodejs\yarn -> C:\Program Files\nodejs\node_modules\yarn\bin\yarn.js
C:\Program Files\nodejs\yarnpkg -> C:\Program Files\nodejs\node_modules\yarn\bin\yarn.js
+ yarn@1.19.1
added 1 package in 7.777s

安装成功，试一下指令是否正常：

1
2

F:\code\github\element>yarn --version
1.19.1

前言

最近的一个月大部分时间都在忙这个事情，就是以 element ui 为基础，做一个属于我们自己的 vue 组件库，并且扩展。 现在已经完成了。并且已经成功替换原项目里面的 element ui 组件，并且开始要编写其他的 element ui 组件没有的组件。

效果如下

几个效果如下： wiki 文档截图如下：

因为要完整兼容我们之前用的 element ui 组件，所以这个 air-ui 的组件列表也会跟 element ui 的组件一样。 以下是存放所有组件的效果图，这个页面也是我们后面做主题自定义的时候的对比页面，存放了所有组件的 demo 的实例：

前言

本节主要是讲了一下 Safari extension 在开发的时候，遇到的一些问题，大的问题会在之前的系列会提到。小的问题会在这边提。

如何找到现有的 extension 的代码

开发一个东西，一个很快的捷径就是参考别人的代码，尤其是一些界面细节的时候，所以当我们找到了一个值得我们参考的 extension 的时候，怎么样得到这个插件的源代码，这个也是很重要的。

前言

本节主要是讲了一下 Firefox extension 在开发的时候，遇到的一些问题，大的问题会在之前的系列会提到。小的问题会在这边提。

如何找到现有的 extension 的代码

开发一个东西，一个很快的捷径就是参考别人的代码，尤其是一些界面细节的时候，所以当我们找到了一个值得我们参考的 extension 的时候，怎么样得到这个插件的源代码，这个也是很重要的。

前言

在这个插件的Chrome插件版本，是允许多文件上传的，包括拖拽上传和点击上传。(Firefox 和 Safari 不支持)。截图如下:

前言

通过 浏览器 extension 插件开发系列(13) -- 实现消息过来出现桌面通知 我们知道在收到文本消息，或者文件消息的时候，这时候会有一个回复操作。点击，就会弹出一个回复小窗口

前言

在做插件的时候，如果消息或者通知过来的时候，就会出现桌面通知，如果点击会有一些操作，比如直接回复，或者打开聊天窗口。但是不同的浏览器的实现和展示不一样。

但是总的要实现的过程如下:(这边以chrome插件的实现过程来截图,其他浏览器的截图会在各自的小节里面):

主要是有三种：

1. 通知消息

前言

在这个插件有一个功能，挺有趣的，就是登陆完之后，就在网页上，右键菜单有一个airdroid的推送选项，通过可以选取文字，图片，网址来推送到手机端。点击之后，就会把这个东西推送到手机端，并且在网页上提示推送成功。 以 Chrome 的截图:

1. 直接在网页空白处点击，将当前网页的网址传送过去

前言

本节我们讲一下登录模块的实现。一共有两种登录方式(当然无论是哪一种登录，都离不开服务端的配合)。

1. 账号登录
2. 第三方登录

前言

这个插件开发最难的地方就是消息通信的事件驱动模型。而事件驱动模型，在这个项目可以分为3部分：

1. 前端页面调用背景页AirDroid对象的方法（比如调用登录方法）
2. 前端页面监听一个事件（监听登录成功事件），背景页触发这个事件
3. 背景页监听一个事件（监听登录成功事件），背景页和前端页面都触发这个事件

其中不同的浏览器有不同的实现方法，主要代码在前端的 base.js 和 背景页的 event.js, 其中 base.js 在浏览器 extension 插件开发系列(09) -- popup以及其他前端页面的启动 已经分析了一部分，接下来我们结合以上三种情况来分析 event.js。

前言

在本插件中，popup页面以及其他前端页面的启动都差不多。

ps: 也有一些小差别，就是Safari下 popup页面和其他的前端页面获取background对象的形式不一样。浏览器 extension 插件开发系列(07) -- 获取各浏览器端的背景页

popup.html

以 popup.html 页面为例, 代码如下:

前言

接下来开始讲这个项目的开发过程。刚开始肯定是背景页启动。不管是哪一种浏览器，背景页都是加载一堆的js。

前言

浏览器 extension 都有两种形式的页面。一种是常驻的背景页。一种是显示的前端页面。而一般常驻的背景页都会保留很多的变量。这些变量经常会在前端的页面里面使用到。接下来就讲解一下，各个浏览器的背景页形式和怎么在前端的页面获取对应的背景页。

前言

这一节讲的就是导航栏按钮的那个icon，以及点击icon 所出来的界面是怎么出来的:

前言

本节聊一下 Safari extension 怎么申请开发者证书

1. 首先将Safari的开发者模式打开

前言

通过 浏览器 extension 插件开发系列(02) -- Chrome 插件的启动以及调试 和 浏览器 extension 插件开发系列(03) -- Firefox 插件的启动以及调试 可以看到Chrome和Firefox的安装和调试方式。接下来就是Safari了, 本节看下 Safari 怎么创建插件。

在Safari 扩展创建器导入一个新的扩展

首先要在 Safari 扩展创建器 导入一个新的扩展,必须要把这个文件夹，命名为 safariextensiton 后缀名的才行，比如airdroid.safariextension, 这样扩展器才能识别，并载入。

前言

通过 浏览器 extension 插件开发系列(02) -- Chrome 插件的启动以及调试 可以知道chrome extension的一些启动和调试, 接下来讲讲Firefox的。

Firefox 需要的文件比较多:

1. default 目录 – 一些配置项
2. resources – 主要的资源
   1. data – 跟其他浏览器插件公用的资源
   2. lib – 启动之后的入口文件
3. bootstrap.js – 插件的启动文件
4. harness-options.json – 插件的配置文件
5. icon.png – 插件的显示图标
6. icon64.png – 插件的显示的大图标
7. install.rdf – 插件的安装配置文件
8. kbz@airdroid.net – 这个文件放在这里是没有用的，主要是放在其他目录里面用于插件调试的
9. locales.json – 插件的本地化文件
10. options.xul – 插件的配置页面

前言

接下来讲各个浏览器的启动以及调试。本节讲的是Chrome。 chrome 的整个目录是 resources/airdroid/data/, 而chrome 的配置文件是 manifest.json. 路径是 resources/airdroid/data/manifest.json (Firefox和Safari不需要这个文件)。

前言

最近因为 Google 公布了，到 2020 年 6 月不在支持非 Chrome OS 平台的 chrome app 的支援。具体看: Google 確定今年 3 月不再受理上架 Chrome Apps，6 月結束支援, 刚好我们有一个 chrome app 有应用到业务中。那么就要赶在 6月份之前，将这个 chrome app 改造成 chrome extension 的方式。这样子就可以继续用了。 考虑到之前我也有做过一个 浏览器 extension 插件，而且是同时兼容 chrome， Firefox， Safari 这三个浏览器的， 但是那时候是 2016 年做的插件，已经隔了三年多了，几乎全忘光了，赶紧翻了一下之前做的笔记，还好那时候有做开发笔记。所以就将这一份开发笔记挪到了 blog 上。