如何制作一个Chrome扩展程序讲解.pptx

chrome extension谷歌浏览器扩展程序 在看PPT之前教你区分“插件”与“扩展程序” 插件对应的是“Plugin”，扩展对应的是“Extension”，所以它俩背后其实是两个完全不同的词。 插件并不会增加浏览器自身的功能，可调用操作系统的API，并且不同操作系统的插件一般不能混用。我们经常遇到的插件有：Flash插件、PDF插件、Java插件等等。 相比较之下，扩展则可以增加浏览器本身的功能，也可以调用浏览器的API，并且同一个浏览器的扩展一般也都是可以跨操作系统使用的。 PS:其实多数人平时并没有区分这两个词，包括我自己 vs 什么是浏览器扩展程序？ Google Chrome Extensions are browser extensions that modify the Google Chrome browser. These extensions are written using web technologies like HTML, JavaScript, and CSS. 通俗的讲，浏览器扩展程序就是一个通过调用浏览器API实现扩展浏览器功能的小程序。但这又不是我们通常讲的可执行程序。它其实就是一个文件包，直接加载到浏览器里面就可以工作。 浏览器扩展程序可以用来干什么？ 当浏览器无法完成你想做的事，或者网站本身功能存在局限时。你不妨考虑自己做个扩展来帮助你。 情景1：读英文网页的时候有的单词不认识，有的句子不会翻译，又不想打开翻译软件一个个查。（某些浏览器并不自带翻译功能） 情景2：访问网站时总会弹出各种广告，关都关不掉。（浏览器没有屏蔽广告的功能） 情景3：嫌某个网页的背景太丑了，我想自己给他设置一个背景。（该网站没有为用户提供背景风格切换功能） 遇到以上问题，你不必忍气吞声，现有的一键翻译扩展程序，广告屏蔽插件（扩展程序）等均可以解决。 用户如何使用扩展程序？ Options page Default popup Context Menus 开始制作你自己的扩展程序！ 扩展程序文件目录分析 谷歌翻译 多功能翻译 迅雷下载插件 manifest.json（清单文件） { manifest_version: 2, name: 我的应用, version: 版本字符串, icons: {...}, browser_action: { default_icon: { 19: images/icon19.png, 38: images/icon38.png }, default_title: Google Mail, default_popup: popup.html }, background: { scripts: [background.js] }, content_scripts: [ { matches: [/*], css: [mystyles.css], js: [jquery.js, myscript.js] } ], options_page: aFile.html, permissions: [...], } background, default_popup, content_scripts消息传递 Popup page, Option page, Etc. Background Page Content Scripts Page Action Browser Action Background（后台页面） 每个扩展程序最多只能有一个“background page” 后台网页是一个 HTML 页面（也可以只是一个脚本），在扩展程序的进程中运行，整个生命周期中都存在。 主要用于管理浏览器本身的事务或状态。如监听点击扩展图标事件，监听右键点击相应菜单，创建菜单，更换图标，对popup页面的请求做出相应等 Popup page（弹出内容） 点击浏览器右上角的扩展图标时，有时会弹出一个页面，这是HTML页面，是default_popup设置的。如果该参数为空，则默认不弹出页面。 我们可以通过这个页面进行扩展程序的设置，或者查看扩展的工作状态。 Content Scripts（内容脚本） 内容脚本是在网页的上下文中运行的 JavaScript 文件，它们可以通过标准的文档对象模型（DOM）来获取浏览器访问的网页详情，或者作出更改。 换句话说，Content Scr