chrome浏览器插件开发

基本概念

详细的内容可查看官方的综述文档

一个应用（扩展）其实是压缩在一起的一组文件，包括HTML，CSS，Javascript脚本，图片文件，还有其它任何需要的文件。 应用（扩展）本质上来说就是web页面，它们可以使用所有的浏览器提供的API，从XMLHttpRequest到JSON到HTML5全都有。

应用（扩展）可以与Web页面交互，或者通过content script或cross-origin XMLHttpRequests与服务器交互。应用（扩展）还可以访问浏览器提供的内部功能，例如标签或书签等。

在chrome中，插件显示在页面的右上角

基础文档

文件

每个应用（扩展）都应该包含下面的文件：

一个manifest文件
一个或多个html文件（除非这个应用是一个皮肤）
可选的一个或多个javascript文件
可选的任何需要的其他文件，例如图片
在开发应用（扩展）时，需要把这些文件都放到同一个目录下。发布应用（扩展）时，这个目录全部打包到一个应用（扩展）名是.crx的压缩文件中。如果使用Chrome Developer Dashboard,上传应用（扩展），可以自动生成.crx文件。

manifest.json

在这个URL中，名为manifest.json的文件包含了应用（扩展）的基本信息，例如最重要的文件列表，应用（扩展）所需要的权限等。

下面是一个典型的应用（扩展）

{
"name": "My Extension",
"version": "2.1",
"description": "Gets information from Google.",
"icons": { "128": "icon_128.png" },
"background_page": "bg.html",
"permissions": ["http://*.google.com/", "https://*.google.com/"],
"browser_action": {
"default_title": "",
"default_icon": "icon_19.png",
"default_popup": "popup.html"
}
}

下面为各字段的含义

1. "name"为插件的名称
2. "version"为插件的版本
3. "description"为插件的说明
4. "icon"为插件图标（一般用png格式的图片）
5. "background_page"为点击插件图片后的界面（可不写）
6. "perimissions"为插件的权限（例："tabs"为浏览器上方标签权限，"http://*/"为所有用http协议网站的权限…）
7. "browser_action"用 browser actions 可以在chrome主工具条的地址栏右侧增加一个图标。
8. "Content scripts"是在Web页面内运行的javascript脚本。

html，css文件

主要是用来写插件背景页面，可以看成是一个小型的网页，也可加入js做出各种开关或动画效果

javascript文件

插件界面操作

插件和其他app相同，也可用js做出各种炫酷的效果

在网页中做各种操作

按F12调出控制台，按左上角的箭头可根据页面的各个位置定位到对应的代码段，从而可以

1. 在js中获取到节点做出各种操作
2. 在页面中加入各种模块

如图为定位操作：