如何制作一个Chrome扩展程序

如

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:嫌某个网页的背景太丑了，我想自己给他设置一个背景。(该网站没有为用户提供背景 风格切换功能)

遇到以上问题，你不必忍气吞声，现有的一键翻译扩展程序，广告屏蔽插件(扩展程序)等均可 以解决。

如

用户如何使用扩展程序？

Default popup Context Menus

Options page

如

开始制作你自己的扩展程序！ 试着去构思一个插件 选中网页中的文字，右键直接查看谷歌翻译(后面有相应的实例) 你需要掌握的知识 HTML, JavaScript, CSS 你需要参考的文档 官方的是Chrome API,国内最好的参考文档是百度浏览器API

Idea

Knowledge

To do it

如

扩展程序文件目录分析

谷歌翻译

迅雷下载插件

多功能翻译

如

manifest.json(清单文件){"manifest_version": 2, "name": "我的应用", "version": "版本字符串", "icons": {...}, "browser_action": { "default_icon": {

"background": { "scripts": ["background.js"] }, "content_scripts": [ { "matches": ["http://doc.guandang.net/*"], "css": ["mystyles.css"], "js": ["jquery.js", "myscript.js"] }

"19": "images/icon19.png","38": "images/icon38.png" }, "default_title": "Google Mail",

],"options_page": "aFile.html", "permissions": [...], }

"default_popup": "

popup.html"},

如

background, default_popup, content_scripts消息 传递Page Action Browser Action Content Scripts

Popup page, Option page, Etc.

Background Page

如

Background(后台页面) 每个扩展程序最多只能有一个“background page”

后台网页是一个 HTML 页面(也可以只是一 个脚本),在扩展程序的进程中运行，整个 生命周期中都存在。 主要用于管理浏览器本身的事务或状态。如 监听点击扩展图标事件，监听右键点击相应 菜单，创建菜单，更换图标，对popup页面的 请求做出相应等

如

Popup page(弹出内容)

点击浏览器右上角的扩展图标时，有时会弹 出一个页面，这是HTML页面，是 default_popup设置的。如果该参数为空，则 默认不弹出页面。 我们可以通过这个页面进行扩展程序的设置， 或者查看扩展的工作状态。

如

Content Scripts(内容脚本) 内容脚本是在网页的上下文中运行的 JavaScript 文件，它们可以通过标准的文档对 象模型(DOM)来获取浏览器访问的网页详 情，或者作出更改。

换句话说，Content Scripts可以直接操控用户 打开的网页。可以对其DOM作任何操作，但 是由于它与网页自带的脚本文件处于不同环 境下。所以不能对用户网页的方法和变量进 行访问。

如

一个简单的实例

自动转跳

如

文件目录和manifest参数

如

Background Page Code

如

我的工作Lofter 标签批量添加器 网页元素模糊工具