基本知识
1、插件文件结构
1.1、manifest.json
每一个扩展、可安装的WebApp、皮肤，都有一个JSON格式的manifest文件，里面存放重要的插件相关信息。
一个最基本的配置例子：
{ "name": "browser action demo", "version": "1.0", "permissions": [ "tabs", "http://*/*", "https://*/*" ], "browser_action": { "default_title": "开关灯", "default_icon": "icon.png", "default_popup": "popup.html" }, "background": { "page": "background.html" }, "manifest_version": 2 }
1.2、popup
插件的弹窗，上面配置中的browser_action中default_popup就是这个页面。
1.3、background page
绝大多数应用都包含一个背景页面（background page），用来执行应用的主要功能。
1.4、Content scripts
通过content script可以使应用和web页面交互，content script是指能够在浏览器已经加载的页面内部运行的Javascript脚本。可以将content script看做是网页的一部分，而不是它所在的应用的一部分。
2、文件之间的交互
popup弹窗中可以直接调用背景页面中的函数。
Content script可以读取并修改当前web页面的dom树，但是它并不能修改它所在应用的背景页面（background）的dom树。
Content script与应用之间的交互：可以互相发送消息
3、为web页面注入JS（Content scripts）文件：
方法一，在manifest.json文件中配置：
"content_scripts": [ { "matches": ["http://www.google.com/*"], "css": ["mystyles.css"], "js": ["jquery.js", "myscript.js"] } ],
方法二，通过executeScript()：
向页面注入JavaScript 脚本执行。
chrome.tabs.executeScript(integer tabId, object details, function callback) chrome.tabs.executeScript(tabId, {file: "func.js", allFrames: true});
UI外观
1、browser action:
在chrome主工具条的地址栏右侧增加一个图标。
注意：Packaged apps不能使用browser actions
1.1、manifest.json 中配置
注册browser action：
{ "name": "My extension", ... "browser_action": { "default_icon": "images/icon19.png", // optional "default_title": "Google Mail", // optional; shown in tooltip "default_popup": "popup.html" // optional }, ... }
1.2、配置项说明
（1）default_icon
图标 19 *19px
修改browser_action的manifest中 default_icon字段，或者调用setIcon()方法。
chrome.browserAction.setIcon(object details)
设置browser action的图标。图标可以是一个图片的路径或者是从一个canvas元素提取的像素信息.。无论是图标路径还是canvas的imageData，这个属性必须被指定。
（2）default_title
修改browser_action的manifest中default_title字段，或者调用setTitle()方法。你可以为default_title字段指定本地化的字符串；点击Internationalization查看详情。
chrome.browserAction.setTitle(object details)
设置browser action的标题，这个将显示在tooltip中。
（3）Badge
Browser actions可以选择性的显示一个badge— 在图标上显示一些文本。Badges 可以很简单的为browser action更新一些小的扩展状态提示信息。
因为badge空间有限，所以只支持4个以下的字符。
设置badge文字和颜色可以分别使用setBadgeText()andsetBadgeBackgroundColor()。
chrome.browserAction.setBadgeText(object details)
设置browser action的badge文字，badge 显示在图标上面。
setBadgeBackgroundColor chrome.browserAction.setBadgeBackgroundColor(object details)
设置badge的背景颜色。
（4）default_popup
Popup 气泡提示
修改browser_action的manifest中default_popup字段来指定HTML文件， 或者调用setPopup()方法。
chrome.browserAction.setPopup(object details)
设置一个点击browser actions时显示在popup中的HTML。
1.3、提示
为了获得最佳的显示效果, 请遵循以下原则：
确认 Browser actions 只使用在大多数网站都有功能需求的场景下。
确认 Browser actions 没有使用在少数网页才有功能的场景， 此场景请使用page actions。
确认你的图标尺寸尽量占满19x19的像素空间。 Browser action 的图标应该看起来比page action的图标更大更重。
不要尝试模仿Google Chrome的扳手图标，在不同的themes下它们的表现可能出现问题,，并且扩展应该醒目些。
尽量使用alpha通道并且柔滑你的图标边缘，因为很多用户使用themes，你的图标应该在在各种背景下都表现不错。
不要不停的闪动你的图标，这很惹人反感。
2、右键菜单
您可以选择针对不同类型的对象（如图片，链接，页面）增加右键菜单项。
您可以根据需要添加多个右键菜单项。一个扩展里添加的多个右键菜单项会被Chrome自动组合放到对应扩展名称的二级菜单里。