• Like

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Chrome中的创意和应用

  • 5,426 views
Published

Chrome中的创意和应用

Chrome中的创意和应用

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,426
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
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. •Browser Actions (总是出现的icon) •Page Actions (不总是出现的icon) •Desktop Notifications (右下角的通知机制) •Omnibox (地址栏的行为和艺术) •Context Menus (右键菜单大有作为) •Override Pages (替换系统默认页面)UI层 •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链接 来个现场操作 原理: Browser Actions,Content Scripts,Background Pages,Message Passing 按需注入js到tms页面,添加额外事件 手动注入js到页面,获取图片url等 本地存储 (生效于整个插件,不包括要操作的url) 页面间通信 (注入的js跟插件background的通信) TMS本身的问题解决,需要给输入框添加value-changed的class并且激活一 下它的change事件.TMS自动填充
  • 8. 链接 原理: Tab, Browser Actions 本地存储,将账号密码加密存到本地. 按需注入js.将url参数中的账号密码填入表单,自动提交 业务上的亮点TAOBAO账号切换
  • 9. 链接 原理: Tab, Browser Actions,Cookie, 获取当前激活的Tab 直接增删Tab的cookieCOOKIE快速模拟
  • 10. 链接 原理: Tab, Browser Actions,Cookie,content script 用本地存储管理用户设置的字体列表和黑名单 向页面注入js,js写入style改变页面字体. 设置字体的相关技术改变字体
  • 11. 链接 原理: Tab, Browser Actions, Omnibox,content script,notify 使用技术最多,更新次数最多 将地址栏作为一个命令行看待,理论上实现对微博的所有操作. 利用通知系统 有趣的地方:微博的翻页CHROME地址栏微博工具
  • 12. Micro clock 在程序图标上显示一个时钟,用canvas绘制,实时改变GET COLORs 获取页面的所有的css设置过的颜色.下载链接变大 根据配置文件,对一定的页面处理,取出其中有用的下载链接右键搜索增强 解决了前端中文转码的问题,右键里直接搜索选中的文字D2抽奖 融合新浪微博和现场其他
  • 13. 技术平台是创意的温床,创意是解决日常问题的手段
  • 14. 接下来,对于我们来说更有意义的
  • 15. 技术为业务服务,创意为业务服务
  • 16. Demo沟通平台通过chrome插件实现前端制作出demo,查看demo的时候,点击查看更新点按钮.会看到demo源代码,其中高亮或者表明这次的修改点和说明.前端也可以通过该工具,对自己的demo进行批示.然后将批示用数据格式存储到服务器.在修改点比较多的项目中,减少沟通成本下一个创意(欢迎加入)