Your SlideShare is downloading. ×
0
Chrome中的创意和应用
Chrome中的创意和应用
Chrome中的创意和应用
Chrome中的创意和应用
Chrome中的创意和应用
Chrome中的创意和应用
Chrome中的创意和应用
Chrome中的创意和应用
Chrome中的创意和应用
Chrome中的创意和应用
Chrome中的创意和应用
Chrome中的创意和应用
Chrome中的创意和应用
Chrome中的创意和应用
Chrome中的创意和应用
Chrome中的创意和应用
Chrome中的创意和应用
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Chrome中的创意和应用

5,447

Published on

Chrome中的创意和应用

Chrome中的创意和应用

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,447
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
13
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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进行批示.然后将批示用数据格式存储 到服务器. 在修改点比较多的项目中,减少沟通成本

×