《做个简单的chrome扩展.ppt》由会员分享，可在线阅读，更多相关《做个简单的chrome扩展.ppt（32页珍藏版）》请在三一文库上搜索。
1、做个简单的Chrome扩展,佟恩.2013.6.10 新浪邮箱,首先，什么是Chrome扩展？,书签,NPAPI Plugins,ominibox,右键菜单,新建标签页,地址栏扩展,定制主题,那，这些扩展! 它们在哪儿？ chrome:/extensions/,想不想做一个玩玩！,准备些什么？ HTML、javascript、CSS、HTML5、CSS3 类似开发站点 chrome.* apis 要知道扩展的目录结构吧！ 安装、调试？,web开发没问题？ 那来认识下 Chrome 庞大的 APIs 吧！ 不过，它们真的真的 好枯燥！但是，也很非常有意思！,改变浏览器外观？ browser ac
2、tions page actions desktop notifications override pages context menus themes.,与浏览器交互? bookmarks、historys、管理插件！ tabs、windows events！ 改写debuger！,browser actions 与 page actions 地址栏右侧/地址栏内 多页面与当前页面 icon（默认隐藏）/tooltip/popup/ badge setBadgeText()/setBadgeBackgroundColor(),browser actions,page actions,desk
3、top notifications permissions/web_accessible_resources webkitNotifications.createNotification webkitNotifications.createHTMLNotification show() ondisplay/onclick,tabs 与 windows permissions:tabs create/update getCurrent/getAllInWindow chrome.windows.create,Content Scripts 可以访问 web 页面的DOM 不可以访问web页面的j
4、avascript 可以通过background消息机制与其所在扩展通信,Cross-Origin XHR web pages - same origin policy extension - remote servers outside of its origin cross-origin permissions,Message Passing one-time requests sendMessage/onMessage.addListener long-lived connections connect/onConnect.addListnener postMessage/onMessa
5、ge.addListener cross-extension onMessageExternal/onConnectExternal,background pages,browser action page action content scripts popup html override html ,Message Passing,还有很多，比如： NPAPI Plugins localStorage etc.,怎么样，看这些东西，累不累！ 很不幸，还遇到了一些坑！,稍事休息。我们换个话题！,先写个程序把刚刚的几个APIs熟悉下！,几点需求： 做个browser Action 显示badg
6、e？ 弹出个通知窗口！ 获取当前tab页面的标题 跳转到web页面？ 消息机制的运用 localStorage,OK！Back to the 坑s!,Content Security Policy Eval and related functions are disabled “content_security_policy“: “script-src self unsafe-eval; object-src self“ Inline JavaScript will not be executed no mechanism Only local script and and object re
7、sources are loaded Remote Script:“content_security_policy“: “script-src self https:/; object-src self“ manifest.json V2,Chrome扩展的目录结构 Extension manifest.json icon_19X19.png、icon_48X48.png html background.html、popup.html css plugin.css images *.png wav *.mp3/wav _locales zh_CN/en_US,manifest.json 核心文
8、件 扩展名称、描述、icon、版本号、update_url permissions content_security_policy,许多坑先告一段落。,了解了Extension的目录结构！ 见识了几个APIs！ 还写了几行代码，见识了一些功能！ 我们再说说关于安装、调试,安装？ 开发者模式 打包扩展程序成crx文件，安装（不建议） 加载正在开发的扩展程序（建议） 重新加载（对已存在扩展） 安装方式影响扩展id extension_id,调试！ chrome-extension:/ inspect 至 Chrome 内置调试器 打印日志、设置断点 location.reload(true),发布
9、！更新！ hosting application/x-chrome-extension .crx & 符合下边两个条件： The file is not served with the HTTP header X-Content-Type-Options: nosniff The file is served with one of the following content types: empty string 、“text/plain“ 、“application/octet-stream“ 、“unknown/unknown“ 、“application/unknown“ 、“*/*“ Dashboard 打包-生成一个非公开的版本！.crx Update URL http:/ 你觉得怎么样。,参考 主要是这里： http:/ 还有360翻译的 http:/ 还有google搜关键词的。,欢迎指正！谢谢！ hanyuxinting 推荐iOS App：遇见成语。,