Chrome中的创意和应用

1. Chrome插件中的创新与应用
tianqi

2. 能做神马?

3. UI层
•Browser Actions (总是出现的icon)
•Page Actions (不总是出现的icon)
•Desktop Notifications (右下角的通知机制)
•Omnibox (地址栏的行为和艺术)
•Context Menus (右键菜单大有作为)
•Override Pages (替换系统默认页面)
•Options Pages (配置页面)

4. 浏览器接口
Bookmarks (读写书签数据)
Cookies (读写管理cookie)
Events (事件管理)
History (历史记录管理)
Management (管理插件)
Tabs (管理标签页)
Windows (管理窗口)

5. 运行方式
Background Pages (默默守在那里)
Content Scripts (注入任何页面的assets)
Cross-Origin XHR (跨域AJAX,就是这么简单)
Message Passing (消息传送,保持沟通)

6. 实践出真知

7. TMS自动填充
链接 TMS链接 来个现场操作
原理:
Browser Actions,Content Scripts,Background Pages,Message Passing
按需注入js到tms页面,添加额外事件
手动注入js到页面,获取图片url等
本地存储 (生效于整个插件,不包括要操作的url)
页面间通信 (注入的js跟插件background的通信)
TMS本身的问题解决,需要给输入框添加value-changed的class并且激活一
下它的change事件.

8. TAOBAO账号切换
链接
原理:
Tab, Browser Actions
本地存储,将账号密码加密存到本地.
按需注入js.将url参数中的账号密码填入表单,自动提交
业务上的亮点

9. COOKIE快速模拟
链接
原理:
Tab, Browser Actions,Cookie,
获取当前激活的Tab
直接增删Tab的cookie

10. 改变字体
链接
原理:
Tab, Browser Actions,Cookie,content script
用本地存储管理用户设置的字体列表和黑名单
向页面注入js,js写入style改变页面字体.
设置字体的相关技术

11. CHROME地址栏微博工具
链接
原理:
Tab, Browser Actions, Omnibox,content script,notify
使用技术最多,更新次数最多
将地址栏作为一个命令行看待,理论上实现对微博的所有操作.
利用通知系统
有趣的地方:微博的翻页

12. 其他
Micro clock 在程序图标上显示一个时钟,用canvas绘制,实时改变
GET COLORs 获取页面的所有的css设置过的颜色.
下载链接变大 根据配置文件,对一定的页面处理,取出其中有用的下载链接
右键搜索增强 解决了前端中文转码的问题,右键里直接搜索选中的文字
D2抽奖 融合新浪微博和现场

13. 技术平台是创意的温床,创意是解
决日常问题的手段

14. 接下来,对于我们来说更有意义的

15. 技术为业务服务,创意为业务服务

16. 下一个创意(欢迎加入)
Demo沟通平台
通过chrome插件实现
前端制作出demo,查看demo的时候,点击查看更新点按钮.
会看到demo源代码,其中高亮或者表明这次的修改点和说明.
前端也可以通过该工具,对自己的demo进行批示.然后将批示用数据格式存储
到服务器.
在修改点比较多的项目中,减少沟通成本