前言

在这个插件的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 上。

前言

前段时间有收到一封来自国外安全公司的关于安全的预警邮件，大致的意思就是 他发现我们站点的 忘记密码，发送验证邮件 的功能并没有做防刷限制，导致他可以用burp suite 之类的web安全工具来批量刷接口，或者是自己写脚本来批量刷。 这样就会导致我们发送大量的垃圾邮件，这样子不仅会打扰我们的用户，而且还会导致我们发邮件的费用增加，更严重的可能会导致我们的 SES 账号被 AWS 封掉，具体之前有出现过：又记一次AWS SES 邮件服务账号被禁的情况

解决

因为这个接口的特殊性(它不需要用户登录，所以也没有所谓的 cookie，session 验证，更没有 jwt token 之类的身份验证), 所以在排除掉 身份验证之后，只能通过其他的方式来处理：

问题

之前在做一个连表查询的时候，就是查询某账号的折扣劵的时候，发现了一个问题：

1
2
3
4

select flp.coupon_code, coupon.*
from fee_logs
left join fee_logs_patch as flp on flp.in_order_id = fee_logs.in_order_id
left join coupon on coupon.code = flp.coupon_code

发现左联的另一半竟然查不到记录：

问题

在创建表的时候，我们一般都会建一个 create_date， 每次代码插入的时候，不需要代码赋值， mysql 会在创建的时候，给他赋值。设置的格式是这样子的:

1

`create_date` timestamp NULL DEFAULT CURRENT_TIMESTAMP,

但是如果我们想监控这一行记录什么被修改的话，就要设置另一个字段，比如 update_date， 一旦记录有被 update，那么就更新该字段的值，不需要程序去记录，而是由mysql自动更新。

解决

设置成这样子就可以了:

1

`update_date` timestamp NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,

问题

之前遇到一个问题，我试图在 mysql 中保存一个 emoji 字符，但是发现取出来之后是不对的，也没法显示？？？
我查了一下，我这个库的字符集确实是 utf8, 所以应该是可以保存 emoji 标签这种4个字节的字符的。但是我后面查了一下资料，发现根本不是我想的那样。 mysql 的字符集 chareacter-set 中的 utf8 根本不是我理解的 UTF-8, mysql 的 utf8只支持每个字符最多三个字节，而真正的 UTF-8 是每个字符最多四个字节。MySQL一直没有修复这个bug，他们在2010年发布了一个叫作 utf8mb4 的字符集，绕过了这个问题, mb4就是most bytes 4的意思，专门用来兼容四字节的unicode。
所以总结了一下这个问题：

1. MySQL的utf8mb4 是真正的UTF-8
2. MySQL的utf8 是一种 专属的编码，它能够编码的 Unicode 字符并不多

问题

之前在用 mysql 查询有 float 字段的时候，比如某一个字段 fee，明明有一条是 fee 为 1.99 的记录，但是就是查不到？？

1

select * from fee_mode where is_pp_recurring = 1 and is_enable = 1 and fee = 1.99

后面查了一下，发现原来查询 float 字段是有坑的：
原来在 MYSQL 中，字段类型为 float 的字段，如果不指定 float 的长度和小数点位数，要根据 float 字段的值精确查找，结果会是空，原因是在 mysql 中，float是浮点数，Mysql存储的时候是近似值，所以用精确查找无法匹配；但可以用like去匹配。