如何制作一个Chrome扩展程序

1、CHROME EXTENSION谷歌浏览器扩展程序在看PPT之前教你区分“插件”与“扩展程序”插件对应的是“Plugin”，扩展对应的是“Extension”，所以它俩背后其实是两个完全不同的词。插件并不会增加浏览器自身的功能，可调用操作系统的API，并且不同操作系统的插件一般不能混用。我们经常遇到的插件有：Flash插件、PDF插件、Java插件等等。相比较之下，扩展则可以增加浏览器本身的功能，也可以调用浏览器的API，并且同一个浏览器的扩展一般也都是可以跨操作系统使用的。PS:其实多数人平时并没有区分这两个词，包括我自己插件扩展程序vs什么是浏览器扩展程序？Google Chrome Ex

2、tensions are browser extensions that modify the Google Chrome browser. These extensions are written using web technologies like HTML, JavaScript, and CSS.通俗的讲，浏览器扩展程序就是一个通过调用浏览器API实现扩展浏览器功能的小程序。但这又不是我们通常讲的可执行程序。它其实就是一个文件包，直接加载到浏览器里面就可以工作。浏览器扩展程序可以用来干什么？当浏览器无法完成你想做的事，或者网站本身功能存在局限时。你不妨考虑自己做个扩展来帮助你。情景1

3、：读英文网页的时候有的单词不认识，有的句子不会翻译，又不想打开翻译软件一个个查。（某些浏览器并不自带翻译功能）情景2：访问网站时总会弹出各种广告，关都关不掉。（浏览器没有屏蔽广告的功能）情景3：嫌某个网页的背景太丑了，我想自己给他设置一个背景。（该网站没有为用户提供背景风格切换功能）遇到以上问题，你不必忍气吞声，现有的一键翻译扩展程序，广告屏蔽插件（扩展程序）等均可以解决。用户如何使用扩展程序？Options pageDefault popupContext Menus开始制作你自己的扩展程序！Idea 试着去构思一个插件Knowledge 你需要掌握的知识To do it 你需要参考的文档扩

4、展程序文件目录分析谷歌翻译多功能翻译迅雷下载插件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: ht

5、tp:/ css: mystyles.css, js: jquery.js, myscript.js , options_page: aFile.html, permissions: .,background, default_popup, content_scripts消息传递Popup page,Option page,Etc.Background PageContent ScriptsPage ActionBrowser ActionBackground（后台页面）每个扩展程序最多只能有一个“background page”后台网页是一个 HTML 页面（也可以只是一个脚本），在扩展程序

6、的进程中运行，整个生命周期中都存在。主要用于管理浏览器本身的事务或状态。如监听点击扩展图标事件，监听右键点击相应菜单，创建菜单，更换图标，对popup页面的请求做出相应等Popup page（弹出内容）点击浏览器右上角的扩展图标时，有时会弹出一个页面，这是HTML页面，是default_popup设置的。如果该参数为空，则默认不弹出页面。我们可以通过这个页面进行扩展程序的设置，或者查看扩展的工作状态。Content Scripts（内容脚本）内容脚本是在网页的上下文中运行的 JavaScript 文件，它们可以通过标准的文档对象模型（DOM）来获取浏览器访问的网页详情，或者作出更改。换句话说，Content Scripts可以直接操控用户打开的网页。可以对其DOM作任何操作，但是由于它与网页自带的脚本文件处于不同环境下。所以不能对用户网页的方法和变量进行访问。一个简单的实例自动转跳文件目录和manifest参数Background Page Code我的工作Lofter 标签批量添加器网页元素模糊工具Lofter标签批量添加器每添加一个标签需要点击1次，加满标签需要点击10次将标签分类打包存放，选中类别名称，则把相应标签批量加入标签框Lofter标签管理页：