做个简单的chrome扩展.pptVIP

做个简单的Chrome扩展;首先，什么是Chrome扩展？;书签; 那，这些扩展! 它们在哪儿？ ——chrome://extensions/ ; 想不想做一个玩玩！;准备些什么？ HTML、javascript、CSS、HTML5、CSS3~ 类似开发站点 chrome.* apis 要知道扩展的目录结构吧！ 安装、调试？ ;web开发没问题？ 那来认识下 Chrome 庞大的 APIs 吧！ 不过，它们真的真的 好枯燥！但是，也很非常有意思！; 改变浏览器外观？ browser actions 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() ; desktop 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页面的javascript 可以通过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/onMessage.addListener cross-extension onMessageExternal/onConnectExternal ; 还有很多，比如： NPAPI Plugins localStorage etc... ; 怎么样，看这些东西，累不累！ 很不幸，还遇到了一些坑！！！ ; 稍事休息。。我们换个话题！ ; 先写个程序把刚刚的几个APIs熟悉下！ ;几点需求： 做个browser Action 显示badge？ 弹出个通知窗口！ 获取当前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 resources are loaded Remote Script:content_security_policy: script-src self ; 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 核心文件 扩展名称、描述、icon、版本号、update_url permissions con