如何开发chrome插件？

chrome作为前端开发的标准浏览器，拥有强大的功能，其中chrome插件就其中非常有用的工具！作为一名前端，开发一款好用的chrome插件也是一件非常有成就感的事！下面我就简单叙述一下如何开发！

1、一个简单的二维码插件目录，核心文件manifest.json，以下简称清单文件，这个文件是必须有的，其余的html、js、css、img等就根据需要来创建就可以了。

2、manifest.json介绍

必须配置的字段、以及常用的配置字段

defalut_popup必须指定html文件，另外html内不允许内联誉陆js（inlinejavascript），插件的开发和普通web开发是一样的，都是用html、js、css。除此之外扩展还提供很多强大的api，帮助我们丰富浏览器的扩展功能。

3、常用APIchrome.tabschrome.runtime可以监听和响应扩展生命周期的事件chrome.webRequestchrome.windowchrome.storagechrome.contextMenuschrome.devtoolschrome.extension

使用大多数的api要声明权限的,因为js中使用chromeAPI，所以示例中在permissions这个字段设置了tabs。

当然，清单的配置远不止这些，随着功能的强大，会看到更多的字段。

/extensions/manifest

4、代码编写完成后，打开扩展的界面，chrome://extensions.，勾选开发者模式，点击‘老隐已解压的扩展程序’，选择开发好的文件夹，这样就成功添加上了扩展。

5、调试

示例中，扩展功能界面是侍虚厅以d窗形式展示，点击图标，右键审查元素即可。

6、打包与发布登录chrome应用商店/webstore/developer/dashboard/点击进去开发者信息中心添加压缩后的zip包按提示添加必填的信息，发布即可

　开始

为了着手创建你的扩展程序，你只需要为你的扩展创建一个文件夹。程序所必须的文件只有manifest.json.，不过也推荐准备一些图片用作图标，和至少一个JavaScript以提供功能。一般来说还会包含HTML文档、样式散蠢表、图片等等其他的资源。

Manifest文件

每个扩展都必须在其根目录下包含一个manifest.json文件。

这个文件里面声明了扩展的名称、版本、权限、设置选项和其他的一些和扩展相关的元数据。Manifest v1早在Chrome 18便已被弃用，而且会根据这个时间表逐渐淘汰使用Manifest v1的扩展。如果你在参考一些旧扩展的Manifest文件的话，请确认添加"manifest_version": 2.

Google发布的Manifest v2中支持的域

后台页

大多数扩展都会在其manfiest.json文件内有这样的内容：

1

2

3

4

5

{

"background": {

"scripts": ["index.js", "other.js"]

}

}

这一段代码指定了两个需要被加载而且要保持在后台运行的脚本，这些脚本会在扩展的后台页运行。后台页是一个在扩展的进程中生成并运行的页面，存在时间会和扩展的生命周期等长。判简后台页可用来作为扩展的其他界面的控制器，用来维护某个状态或者保持某些活动。如果你需要用后台页来声明一些标记来用，可以把一个HTML文件名指定给page选项。

事件页

后台页会从扩展被加载的时候被装载，而且会一直留在内存里。这是因为如果有些状态需要被长时间维护，或者需要被扩展的其他部分访问。但是如果你没有这个需求，那么应该尽可能的使用事件页。事件页其实只是相当于一个包含了”persistent”: false条目的后台页，这一行语句告诉Chrome可以不需要把后台页保留在内存里。相对来说，事件页也会在最开始被装载，但是一旦指定的脚本运行完毕，事件页冲冲陪便会从内存卸载，而且会在需要的时候被再次加载（比如用来回应某些 *** 作）。

以上便是在为扩展添加功能之前所需要知道的。

交互

利用Google提供的大量API，你的扩展与浏览器交互或者为用户提供功能都变得方便。

chrome.* APIs

Chrome的程序和扩展程序都非常喜欢调用chrome.* APIs，这些API可以让你通过不同的方式来 *** 控浏览器，API通常会在后台脚本里面被调用，这是我找到的一些常用API：

chrome.tabs 标签页：新建、刷新、关闭、访问和 *** 控标签页

chrome.history 历史：访问用户浏览历史

chrome.bookmarks 书签：添加、编辑、移除和搜索用户书签

chrome.events 事件：监听或者管理浏览器发生的事件

chrome.commands 命令：添加或者改变键盘命令

chrome.contextMenus 右键：添加条目到右键下文菜单

chrome.omnibox 多功能框（地址栏）：添加多功能框关键字，使用户可以向扩展发送指令或者激活扩展

其他API

Chrome程序和扩展程序通常也会用到其他的API，包括如本地存储、地理位置、缓存、画布等新型的HTML5 API。你也可以用普通的JavaScript或者webkit API来实现。

声明权限

有些Chrome API的功能必须要在manifest.json文件中声明相关权限才能被调用，通过在permissions 域中把值设成相应权限名称，或者是通识符组成的数组。

1.任意拖放一个书签到扩展程序界面。

2.资源管理器设置隐藏可见，设置显示已知文件扩展名。

3.windows7下（XP没试竖姿禅过）打开C:\Users\8888fl\AppData\Local\Google\Chrome\User Data\Default

\Extensions，可以看到一些长名称文件夹，这里边就是相关扩展界面上的书签文件。

我用金山快写做例子。文件夹名bnaenhgckgjbngljdggdbfpgllpilbhl，依次打开文件夹。

4.下载128*128png图标，并且可以用PS适当缩略图形大小，一般80%较为直观，但是分辨率不要变哦。改名字为

128.png，替换icons文件册橡夹下的png文件。

5.用记事本打开manifest.json文件。

{

"app": {

"launch": {

"web_url": " http://w.wps.cn/fileview.html"

},

"urls": [ " http://w.wps.cn/fileview.html" ]

},

"description": "",

"icons": {

"16": "icons/16.png"

},

"key": "J3qpzOo1kt+ZaeLTnvOyRxtq9YPKAqz6v4BRBkav5Gc=",

"name": " http://w.wps.cn/fileview.html",

"permissions": [ ],

"version": "2012.5.26.6131"

}

将以上两个16改成128，保存

6.复制文件夹bnaenhgckgjbngljdggdbfpgllpilbhl（包括子文件和子文件夹）到其他位置备份。

7.打开chrome浏览器，删掉扩展书签。

8.将文件夹bnaenhgckgjbngljdggdbfpgllpilbhl（包括子文件和子文件夹）拖回C:\Users\8888fl\google下。

google文件夹自己创建。

9.重启chrome，依次打开工具----扩展程序----打包扩展程序----浏览选择C:\Users\8888fl\Google

\bnaenhgckgjbngljdggdbfpgllpilbhl\2012.5.26.6131，确定打包。

10.chrome。依次“载入正在开发的扩展程序”----如上。余尘好了。可以用了

非专业人士，研究了一会儿，终于搞定，犒劳一下自己吧，方法很粗糙，至少也搞定了

---