09 May
On
In Article Collection(聚宝收藏), IT Products(数码产品), Knowledge Base(心得笔库)

做移动开发总是离不开在移动设备上做测试，虽然说Android设备单机可能比iPhone便宜，但是真要各种设备集齐也是不小的开支，再加上要试验不同的Android版本那组合起来又有好多了。所以一般开发者往往只在特定几个设备中做检验。需要测试不同版本也会求助于模拟器(Emulator) 。

Google为Android提供的自带模拟器的效果以前实在惨不忍睹，随着Android Studio 2.0出的模拟器倒是提高了不少，但依然挺糟糕的。
android-avd

大多公司都会购买Genymotion使用，可以创建多种不同版本的模拟器，即使是最新的版本也能很快支持。虽说价格抵上一部真机，却得到好多不同版本和厂商的设备，而且效果优越、功能丰富，真实物超所值。
genymotion

由于某些纠纷，Genymotion默认没有Google Play Services，就无法使用Google的Play Store，Account等等。不过网上也有很多攻略教大家怎将其么安装到Genymotion上，于是都可以在上边打《炉石传说》了。

真机和模拟器各有下边这样那样的缺点：

真实设备 模拟器
  • 价格昂贵
  • 不易携带多个
  • 同一设备不支持多种版本
  • 容易没电
  • 老设备会断货
  • 无SIM卡
  • 无摄像头
  • 不支持推送
  • 多手势不方便
  • 使用习惯不一致

Read More →

24 April
On
In Article Collection(聚宝收藏), Front Interface(界面构想)

前阵子更新了一下系统和软件，打开Chrome浏览器发现插件(Chrome Extension)的显示位置变了，原来显示在Omnibox里的Page Action突然跑到了Toolbar上跟Browser Action厮混在了一起。

于是开始在网上搜索原因才发现原来Chrome对插件的按钮显示做了改版(见”Introducing Chrome 48! “，” Upcoming UI Change“，”What happened with pageAction “)，将它们都归到了Toolbar上并且可以隐藏到Menu中。

chrome-extension-menu

我以前也一直觉得Browser Action和Page Action是那么的相似，在Browser Action的监听事件中也能获得当前页面的信息，何必要分成两种让开发者做选择呢。现在Google也是有意要将两者归并，甚至可能在未来淘汰其中一个来简化冗余界面对用户造成的困惑。因为在新的设计下，对Page Action进行hide不会像以前那样将图标真的隐藏，而转为变灰表示其不可用。这在但这API显然不能真实反映其效果，很有可能会为了统一而淘汰它们的使用。

另一些变化是即使插件不用Browser Action和Page Action，也会在Toolbar上显示灰色的图标已表示其被安装使用着。这样可以更明显的提醒用户在浏览器上现在都有哪些插件，来防止恶意插件被用户忽略。

Chrome的插件也只能使用Browser Action和Page Action之一，如果在manifest里同时定义了两者，就会得到“Only one of ‘browser_action’, ‘page_action’, and ‘app’ can be specified.”的错误。

哎，以前写的关于Chrome插件开发的文章就这么被过时了，好在基本的结构和方式没有大的变化。

31 December
On
In Article Collection(聚宝收藏), Design Patterns(设计模式), Knowledge Base(心得笔库)

在之前的文章里介绍了很多关于开发Chrome扩展程序时会用到的各部件，对每个部件的功能和用途做了比较详细的描述。不过单单知道怎么使用各个部件还不够，前面有提到每个部件的优缺点：Browser Action和Page Action不能长期保留数据状态；Background Page和Event Page没有用户界面；Content Scripts无法触发DOM原本的事件。所以就需要让这些部件能够联系在一起使用，用其优势不足其它的劣势。

通过阅读网上关于Chrome扩展程序的文档和文章，以及自身的试验和实践，对于Chrome扩展程序中所用到的交互方式主要可以分为三类：调用接口(Interface)，消息传送(Message)，脚本注入(Injection)。

下图展示了各个部件直接交互的方式和会使用到的API方法：
Chrome-Extension-Interaction

话说回来其实三种方式都是调用Chrome扩展开发中直接提供的API，只是API的设计结构、使用方式、作用对象以及安全性等有些许差别，所以我才臆想成三类不同方式。

而从上图的分布，还可以看出我对于Chrome扩展程序各部件的分类可以归为：“近扩展(Close to Extension)”和“近页面(Close to Page)”。也就是一类主要作用在扩展程序上，另一类主要作用在页面本身。
Read More →

08 November
On
In Article Collection(聚宝收藏), Design Patterns(设计模式), Front Interface(界面构想), Knowledge Base(心得笔库)

虽然现在的工作主要是Android平台的开发，但是对于Web的兴趣总是无法割舍。只可惜因为不是日常工作的一部分，许多Web技术其实学得都不精湛，也常常会淡忘了解过的知识。好在有了Chrome这个强大的前端神器，观察页面布局、学习脚本源码、调试代码样式都变得异常自如，也让学习Web变得方便很多。

前阵子为了完成一些功能，学习了一下Chrome扩展程序(Chrome Extensions)开发的基本内容和步骤，觉得为自己的Web技术找到了新的用武之地。不用再纠结和苦恼如果设计发开出功能全面界面吸引人的应用或系统；做出一些插件来扩展喝补强当前页面功能也是很有意义的。比如常看一些网页被旁边的广告栏打扰了，可以写个插件把display设成none；如果在线看一些文档，也可以做个插件用来标记哪些内容比较重要然后呈现时做个高亮显示。

开发Chrome扩展程序也非常容易上手，只要会HTML，CSS和JavaScript就可以开始了。不需要学习新的语言，也不需要了解新的布局方式，也不用知道新的IDE，还不用编译。当然Chrome扩展程序的基本架构和组成结构还是需要额外了解的，这样才能知道每个部分要如何实现，保证扩展程序能流畅运行。

Chrome扩展程序的官方文档让人感觉有点凌乱，可能是扩展程序开发算不上热门内容，也可能是Chrome的版本升级太频繁，所以没有很好地整理文档。本文就来总结这些知识内容与大家分享,也方便自己以后回顾。

入门准备和基础概念

既然是开发Chrome扩展程序，自然需要Chrome浏览器，然后下载一些示例程序。一般的Chrome扩展程序是.crx文件，但实质上它只是一个压缩文件，随时可以以zip格式来解压查看里面的内容。但是为了开发方便，Chrome也支持直接上传文件夹，但是要先打开”开发模式”。启用方式很简单，只要开打Chrome浏览器，在Extensions窗口下(可通过菜单开打，也可以在地址栏里输入chrome://extensions来进入)勾选Develop mode就可以了:
Developer-Mode

这样就可以直接上传文件夹来安装在开发中的扩展程序了。如果开发完成也通过这里进行打包然后发布到Chrome商店上，不过这部分不在本文中介绍。

对比直接上传的和从商店上安装的扩展程序，可以发现几个明显的不同：
Unpacked

以文件夹格式上传的，会显示Loaded from项来指示扩展程序在文件系统中的位置，另外还可以通过刷新或者点击Reload链接按钮来更新修改过的扩展程序。而安装的则无法这么简单的来更新和升级了。

当然其他的内容都是一样的：名字、版本号这些接下来会介绍如何定义；权限(Permissions)的内容比较多本文也不会涉及，可以在官方文档中了解。还有ID这一项，它是Chrome指定给每个扩展程序的唯一标示，可以用它在Chrome浏览器中通过链接chrome-extension://<extensionID>/<pathToFile>打开扩展程序中的任意文件。比如Evernote的选项页面就是：chrome-extension://pioclpoplcdbaefihamjohnefbikjilc/options.html
Evernote-Options

对于没有打包成.crx文件的扩展程序，Chrome会根据文件夹所在位置来指定生成ID；在第一次打包扩展程序时，Chrome会生成一个Private Key文件，之后就可以用同样的Key来标示同一个程序的版本升级，Chrome也就会赋予它同样的ID。之后也会介绍这个ID还有其他的用处。
Pack-Extension
Read More →