目录:

零、为什么会有这一套博文

  2014年底虽然已经基本完成GmailAssist这一chrome扩展开发(当时也是作为软件工程课程的实践项目),但该扩展程序对于邮箱内邮件数目较多(大约五位数的数量级上)的情况,就很难正常工作了,这显然不是一个合格的软件,当时虽然终期验收顺利“交差”了,但这个软件的“不合格”却一直是我的一个心病。经过一年的学习,尽管对于前端开发的知识没有什么更进一步的掌握,但对软件工程的思想等等有了比起当时来说更深一层的认识。同时,当时虽然是一定程度上遵循敏捷开发的原则来进行的开发,但代码结构仍然比较混乱,因此最近计划对其进行一次完整的重构,同时修复bug、提升该扩展的性能。
当时在进行开发时,我几乎完全没有前端开发的经验,从HTML、js的最基本语法开始边学边实现了该扩展的开发,当时偷懒没有及时把知识、技巧包括开发途中走的弯路梳理并记录下来。现在想重构时,发现很多东西都得从头再梳理,因此决定在此次重构过程中,把Gmail API、chrome扩展、邮件格式、OAuth2认证等相关的知识整理成文字,加深自己理解、记忆的同时,也期待这套文章能对准备进行有关这些方面开发的开发者有所帮助。
如果你对GmailAssist感兴趣,可以在chrome商店中搜索“Gmail助手”或者“GmailAssist”,或者直接访问https://chrome.google.com/webstore/detail/gmail-attachment-manager/lchiijlphndndjfgecehgmkjbdohndjd来试用它。如果你对源码感兴趣,欢迎在GitHub上查看它的源码:https://github.com/IceSuger/Gmail_Plugin。(写这篇文章时,重构还没完成,所以github上暂时还是一坨烂代码...2016.1.11)

一、用户需求

  用户的Gmail中附件很多,分散在各个邮件中,希望能有一款插件,通过它来统一查看、批量下载、在建立新邮件时从中批量选择附件并插入,而不必手动搜索并下载重新上传。

二、目标功能

  开发开始之前,有必要搞清楚我们具体要实现的每一个功能(否则开发过程没有清晰的目标,就很难进行)。那么,我们的插件需要拥有的几项基本的功能如下:

  1. 能够获取并显示用户邮箱里的全部附件;
  2. 能够单独下载列出的附件中的某个;
  3. 能够在要发送的草稿中插入列表中的某个附件。

  在这些基本的功能上,我们可以通过一次次迭代来完善功能,让用户更好地使用这个插件。具体点来说,进一步还要有(其中的一些是开发过程中才想到的或者根据用户反馈而追加的):

  1. 在附件列表中显示该附件对应的邮件标题、时间等邮件信息;
  2. 对附件列表进行按不同关键词(包括附件名称、附件大小、邮件时间等)的排序;
  3. 获取附件列表时,允许用户通过输入指定一个更小的搜索范围;
  4. 对获取到的附件列表,允许用户通过输入来过滤掉不需要的条目;
  5. 允许用户通过复选框来勾选多个附件,实现批量操作;
  6. 实现中文、英文两种版本。

三、要完成开发需要哪些知识

  有了一个大致的目标,就该进一步考虑如何实现了。首先的想法是我们要开发一个chrome扩展,那chrome扩展的开发的基本知识以及基本的前端开发知识(至少是HTML、javascript、CSS的常用语法)是需要的。其次,搜索后得知Gmail有着一套官方的比较成熟的API,供开发者调用。接下来了解到开发针对Gmail的第三方插件,需要通过OAuth2获得用户的授权,那么OAuth2的基本原理也需要了解。
因此这套博文会有如下内容:[chrome扩展开发基础知识及一些小tips和陷阱提醒。Gmail API的简单介绍、包括tips和陷阱提醒。对OAuth2的理解。chrome扩展的i18n方法和技巧。]

其中每篇我都结合GmailAssist的具体开发过程来写,因为很多知识点有具体例子的话,写起来和读起来都会更容易。chrome扩展,其实就是一个针对chrome浏览器的插件,因此后文中我会混用“插件”、“扩展”、“扩展程序”这几个名词。另外,因为比较具体,所以有些东西的介绍可能并不全面,我会在介绍它们时附上更完整的文档等的地址,方便大家进一步了解相关内容。

Chrome扩展开发(Gmail附件管理助手)系列之〇——概述的更多相关文章

  1. Chrome扩展开发之二——Chrome扩展中脚本的运行机制和通信方式

    目录: 0.Chrome扩展开发(Gmail附件管理助手)系列之〇——概述 1.Chrome扩展开发之一——Chrome扩展的文件结构 2.Chrome扩展开发之二——Chrome扩展中脚本的运行机制 ...

  2. Chrome扩展开发之一——Chrome扩展的文件结构

    目录: 0.Chrome扩展开发(Gmail附件管理助手)系列之〇——概述 1.Chrome扩展开发之一——Chrome扩展的文件结构 2.Chrome扩展开发之二——Chrome扩展中脚本的运行机制 ...

  3. Chrome扩展开发之三——Chrome扩展中的数据本地存储和下载

    目录: 0.Chrome扩展开发(Gmail附件管理助手)系列之〇——概述 1.Chrome扩展开发之一——Chrome扩展的文件结构 2.Chrome扩展开发之二——Chrome扩展中脚本的运行机制 ...

  4. Chrome扩展开发之四——核心功能的实现思路

    目录: 0.Chrome扩展开发(Gmail附件管理助手)系列之〇——概述 1.Chrome扩展开发之一——Chrome扩展的文件结构 2.Chrome扩展开发之二——Chrome扩展中脚本的运行机制 ...

  5. Chrome扩展开发基础教程(附HelloWorld)

    1 概述 Chrome扩展开发的基础教程,代码基于原生JS+H5,教程内容基于谷歌扩展开发官方文档. 2 环境 Chrome 88.0.4324.96 Chromium 87.0.4280.141 B ...

  6. 【转发】NPAPI学习(Firefox和Chrome扩展开发 )

    NPAPI学习(Firefox和Chrome扩展开发 ) 2011-11-08 14:41:02 by [6yang], 1172 visits, 收藏 | 返回 Firefox和Chrome扩展开发 ...

  7. 手把手教你Chrome扩展开发:本地存储篇

    手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单 手把手教你开发Chrome扩展二:为html添加行为 手把手教你开发Chrome扩展三:关于本地存储数据 HTML5 ...

  8. 基于 webpack 的 chrome 扩展开发探索

    起 最近利用闲暇时间在进行一款 chrome 扩展 V2EX-HELPER 的开发(如果巧遇 V 友欢迎试用),今天把它彻底改成了用 webpack 打包依赖的模式,不由得感概 webpack 的强大 ...

  9. chrome扩展开发实战入门之一-hellocrx

    后记:在写这篇文章时,我还没搞懂chrome扩展的基本原理.后来才明白,最简单(且实用)的扩展只需要manifest.json和content_scripts.js两个文件,无需background. ...

随机推荐

  1. Erlang 的新数据结构 map 浅析

    更新:文中示例代码直接从Joe的新版 Erlang 书中摘抄而来,其中模式匹配的代码有错误,现已纠正.应该用 := 匹配字段,而不是 => . 即将发布的 Erlang 17 最大变化之一包括新 ...

  2. SQL Server同步复制问题排查方法

    1.应用复制的命令时在订阅服务器上找不到该行 解决方法:用系统存储过程sp_browsereplcmds(返回分发数据库中存储的可读版本复制命令的结果集,并将其用作诊断工具. 此存储过程在分发服务器上 ...

  3. APP原型设计工具,哪家强?转自知乎

    著作权归作者所有. 商业转载请联系作者获得授权,非商业转载请注明出处. 作者:李志超 链接:http://www.zhihu.com/question/20403141/answer/25329730 ...

  4. poj 3694 Network 边双连通+LCA

    题目链接:http://poj.org/problem?id=3694 题意:n个点,m条边,给你一个连通图,然后有Q次操作,每次加入一条边(A,B),加入边后,问当前还有多少桥,输出桥的个数. 解题 ...

  5. redis 非集群的主从配置及切换

    单纯的master-slave不能称之为集群,只能叫做读写分离.此案例只针对master为单点服务,且程序端写死master为可写,slave为只读.若master宕机则不可用,若主从未开启持久化,不 ...

  6. 【ASP.NET 基础】表单和控件

    1.HTML表单的提交方式 对于一个普通HTML表单来说,它有两个重要的属性:action 和 method.action属性指明当前表单提交之后由哪个程序来处理,这个处理程序可以是任何动态网页或者 ...

  7. JS实现图片上传预览效果:方法一

    <script type="text/javascript"> //处理file input加载的图片文件 $(document).ready(function(e) ...

  8. HDU 4941 Magical Forest --STL Map应用

    题意: 有n*m个格子(n,m <= 2*10^9),有k(k<=10^5)个格子中有值,现在有三种操作,第一种为交换两行,第二种为交换两列,交换时只有两行或两列都有格子有值或都没有格子有 ...

  9. Java虚拟机详解02----JVM内存结构

    主要内容如下: JVM启动流程 JVM基本结构 内存模型 编译和解释运行的概念 一.JVM启动流程: JVM启动时,是由java命令/javaw命令来启动的. 二.JVM基本结构: JVM基本结构图: ...

  10. 分层开发MySchool总结

    由于分层之间存在各层之间的关系窗体之间的方法跳转,故有需要者可以进行下载本地文件 MySchool.rar 3304KB 5/22/2016 9:43:28 AM ,代码中有注释,