1 文档

chrome 插件开发文档，首推官网文档

https://developer.chrome.com/extensions/api_other ，但是官网是外网，不一定能访问的到, 于是撸主给你另外一个地址 https://chajian.baidu.com/developer/extensions/manifest.html#overview.html ，百度浏览器提供了文档，你懂的，国内的浏览器内核大多数都是chrome...

2 插件目录结构说明

就以我写的这个插件为例吧，基础的插件用我这个目录结构基本上够了，如果想开发复杂的插件，建议先看看一些demo。

解压缩之后，插件的目录结构如下

这个目录结构一看应该都很明白，css用来放置css文件，js放置js文件，fonts放置字体配置，lib放置一些公共js包。

其中最重要的文件是manifrest.json, 这个是门面文件，说白了，chrome谁都不认，只认它，我们打开文件看一下

 
           { 
          
           "manifest_version" 
           : 2,   
           //版本，默认是2 
          
           "background" 
           : { 
          
           "scripts" 
           : [  
           "/lib/jquery.js" 
           ]   
          
           }, 
          
           "name" 
           :  
           "Getting started example" 
           , 
          
           "description" 
           :  
           "This extension shows a Google Image search result for the current page" 
           , 
          
           "version" 
           :  
           "1.0" 
           , 
          
           "browser_action" 
           : { 
          
           "default_icon" 
           :  
           "icon.png" 
           ,      
           //这个就是插件的图标啊 
          
           "default_popup" 
           :  
           "popup.html" 
           ,   
           //首页，或者称之为入口页面 
          
           "default_title" 
           :  
           "切换账号小工具" 
          
           }, 
          
           "permissions" 
           : [   
           //这个属性表示你想访问chrome的哪些东西，chrome是有权限控制的 
          
           "browsingData" 
           ,    
           //我要访问data 
          
           "activeTab" 
           ,   
           //我要访问激活的tab 
          
           "tabs" 
           ,  
           //我要访问chrome的标签页 
          
           "<a href="https://ajax.googleapis.com/" "="" style="color: rgb(59, 115, 175); text-decoration-line: none; border-radius: 0px !important; background: none !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 20px !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">https://ajax.googleapis.com/" 
           , 
           "<a href="http://%2A/*" "="" style="color: rgb(59, 115, 175); text-decoration-line: none; border-radius: 0px !important; background: none !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 20px !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">http://*/*" 
           , 
           "<a href="https://%2A/*" "="" style="color: rgb(59, 115, 175); text-decoration-line: none; border-radius: 0px !important; background: none !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 20px !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">https://*/*" 
           ,  //插件可能需要ajax调用接口，如果你需要调用其它接口，比如跟数据工厂打通，这里就必须的了 
          
           "cookies" 
           ,   
           //操作cookie必备 
          
           "contextMenus"  
           //菜单栏操作 
          
           ] 
          
           }

其中必须的属性是 name、 version、manifest_version

name 名称
version 你插件的版本号
manifest_version 配置文件清单的格式，现在的chrome都是支持2的，貌似也没有最新的版本了

description: 描述，这个可有可无，优秀的实践是必须的，当然，我这个不是优秀的...

browser_action: 所谓browser_action，通俗一点就是告诉浏览器怎么用你这个插件，放在哪，显示成什么样子。

permissions：权限控制，用于告诉浏览器你的插件想要访问哪些东西，申请chrome授权用的，常见的权限有：

"tabs", 访问浏览器选项卡

"activeTab", 获取当前活动选项卡

"notifications", 浏览器通知（基于HTML5的通知实现）

"storage", 存储,希望存储一些设置的话，就需要用到

"http://*/*","https://*/*" 这个一般都懂的吧，这个不懂的话，感觉你可以放弃了...

cookies 如果你要访问cookie的话，这个也是必须的，操作cookie，可以增删改查了

详细的清单权限

权限	描述
"activeTab"	根据 activeTab 规范请求授予应用权限。
"alarms"	使您的应用能够访问 chrome.alarms API。
"browsingData"	使您的应用能够访问 chrome.browsingData API。
"clipboardRead"	如果应用或应用使用 document.execCommand('paste') 则必须指定。
"clipboardWrite"	表示应用或应用可以使用 document.execCommand('copy') 或document.execCommand('cut')。托管应用必须指定该权限，建议应用和打包应用也指定该权限。
"contextMenus"	使您的应用能够访问 chrome.contextMenus API。
"cookies"	使您的应用能够访问 chrome.cookies API。
"geolocation"	允许应用或应用使用提议的 HTML5 地理定位 API 而不需要提示用户权限。
"management"	使您的应用能够访问 chrome.management API。
"nativeMessaging"	使您的应用能够访问原生消息通信 API。
"notifications"	允许应用使用提议的 HTML5 通知 API 而不用调用权限方法（例如 checkPermission()）。有关更多信息，请参见桌面通知。
"pageCapture"	使您的应用能够访问 chrome.pageCapture API。
"power"	使您的应用能够访问 chrome.power API。
"proxy"	使您的应用能够访问 chrome.proxy API。
"storage"	使您的应用能够访问 chrome.storage API。
"system.cpu"	使您的应用能够访问 chrome.system.cpu API。
"system.display"	使您的应用能够访问 chrome.system.display API。
"system.memory"	使您的应用能够访问 chrome.system.memory API。
"system.storage"	使您的应用能够访问 chrome.system.storage API。
"tabs"	使您的应用能够访问 Tab 对象的特权字段，包括 chrome.tabs 和 chrome.windows 在内的多种 API 都使用 Tab 对象。在很多情况下，您的应用不需要声明 "tabs" 权限就能使用这些 API。
"tts"	使您的应用能够访问 chrome.tts API。
"ttsEngine"	使您的应用能够访问 chrome.ttsEngine API。
"unlimitedStorage"	提供无限的存储空间，保存 HTML5 客户端数据，例如数据库以及本地存储文件。如果没有这一权限，应用或应用的本地存储将限制在 5 MB 以内。注意：该权限仅应用于网络 SQL 数据库以及应用程序缓存（参见问题 58985）。另外，当前还不能和包含通配符的子域名一起使用，例如http://*.example.com。
"webNavigation"	使您的应用能够访问 chrome.webNavigation API。
"webRequest"	使您的应用能够访问 chrome.webRequest API。
"webRequestBlocking"	如果应用以阻塞方式使用 chrome.webRequest API 则必须指定。

"default_popup"属性，表明入口html

这个属性要重点关注，这个属性表明了你的插件用哪个html渲染，我的插件里面配置的是

3.2 插件常用api

所谓插件api，就是chrome暴露给你的api，你想访问浏览器上的东西，或者操作浏览器上的东西，必须经过他给的标准API进行

我的插件里面里面用到了chromes.tab相关的api，主要就是获取当前tab的url，然后呢就是解析，登录，发送事件之类的，都是js的逻辑，用了jquery框架。另外用了Storage存储数据，storage不同于cookie，cookie是由失效的，但是storage可以一直用奥~~

详细的api文档可参考

名称	描述	最低版本
alarms	使用 chrome.alarms API 安排代码周期性地运行或者在将来的指定时间运行。	22
browserAction	使用浏览器按钮可以在百度浏览器主窗口地址栏右侧的工具栏中添加图标。除了图标，浏览器按钮还可以有工具提示、徽章和弹出内容。	5
commands	使用命令 API 添加快捷键，以便触发应用中的操作，例如打开浏览器按钮或向应用发送命令。	25
contextMenus	使用 chrome.contextMenus API 向百度浏览器的右键菜单添加项目。您可以选择您在右键菜单中添加的项目应用于哪些类型的对象，例如图片、超链接和页面。	6
cookies	使用 chrome.cookies API 查询和修改 Cookie，并在 Cookie 更改时得到通知。	6
extension	chrome.extension API 包含任何应用页面都能使用的实用方法。它包括在应用和内容脚本之间或者两个应用之间交换消息的支持，消息传递中详细描述了这些内容。	5
i18n	使用 chrome.i18n 架构为您的整个应用或应用实现国际化支持。	5
idle	使用 chrome.idle API 检测计算机空闲状态的更改。	6
management	chrome.management API 可以用来管理已经安装并且正在运行的应用或应用。	8
notifications	使用 chrome.notifications API 通过模板创建丰富通知，并在系统托盘中向用户显示这些通知。	28
pageAction	使用 chrome.pageAction API 在地址栏中添加图标。页面按钮代表用于当前网页的操作，但是不适用于所有网页。	5
pageCapture	使用 chrome.pageCapture API 将标签页保存为 MHTML。	18
permissions	使用 chrome.permissions API 在运行时而不是安装时请求声明的可选权限，这样用户可以理解为什么需要这些权限，并且仅在必要时授予这些权限。	16
power	使用 chrome.power API 修改系统的电源管理特性。	27
proxy	使用 chrome.proxy API 管理百度浏览器的代理服务器设置。该模块依赖于类型 API 中的 ChromeSetting 原型，用于获取和设置代理服务器配置。	13
runtime	使用 chrome.runtime API 获取后台网页、返回清单文件详情、监听并响应应用或应用生命周期内的事件，您还可以使用该 API 将相对路径的 URL 转换为完全限定的 URL。	22
storage	使用 chrome.storage API 存储、获取用户数据，追踪用户数据的更改。	20
system.cpu	使用 chrome.system.cpu API 查询 CPU 元数据。	32
system.memory	使用 chrome.system.memory API 获取内存信息。	32
system.storage	使用 chrome.system.storage API 查询存储设备信息，并在连接或移除可移动存储设备时得到通知。	30
system.display	使用 chrome.system.display API 查询显示器的元数据。	30
tabs	使用 chrome.tabs API 与浏览器标签页交互。您可以使用该 API 创建、修改或重新排列浏览器中的标签页。	5
tts	使用 chrome.tts API 播放合成的文字语音转换（TTS），同时请您参见相关的 ttsEngine API，允许应用实现语音引擎。	14
ttsEngine	使用 chrome.ttsEngine API 在应用中实现文字语音转换（TTS）引擎。如果您的应用注册了该 API，当任何应用或百度浏览器应用使用 tts 模块朗读时，它会收到事件，包含要朗读的内容以及其他参数。您的应用可以使用任何可用的网络技术合成并输出语音，并向调用方发送事件报告状态。	14
webNavigation	使用 chrome.webNavigation API 实时地接收有关导航请求状态的通知。	16
webRequest	使用 chrome.webRequest API 监控与分析流量，还可以实时地拦截、阻止或修改请求。	17
windows	使用 chrome.windows API 与浏览器窗口交互。您可以使用该模块创建、修改和重新排列浏览器中的窗口。	5
bidu	使用 chrome.bidu API 进行扩充自定义接口信息。如果当前的接口不能完整的满足您的需求，您可以向我们提出专门的功能接口申请。	38

3 API使用的代码案例

 
           loginHomeSite: 
           function 
           (username, passwd){ 
          
           var  
           script =  
           "window.setTimeout(function(){document.getElementsByClassName('pc-tag')[0].click();document.getElementsByName('username')[0].value='" 
           +username+ 
           "';document.getElementsByName('password')[0].value='" 
           +passwd+ 
           "';document.getElementsByClassName('login-btn')[0].click()},1000);" 
           ; 
          
           chrome.tabs.getSelected( 
           null 
           , 
           function 
           (tab){  
          
           console.log(tab.url); 
          
           var  
           currentUrl = tab.url; 
          
           if  
           (currentUrl.startsWith( 
           "<a href="http://accounts.meili-inc.com/" "="" style="color: rgb(59, 115, 175); text-decoration-line: none; border-radius: 0px !important; background: none !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 20px !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">http://accounts.meili-inc.com" 
           )){ 
          
           chrome.tabs.executeScript(tab.id,{code:script,runAt: 
           "document_end" 
           }); 
          
           } 
           else  
           { 
          
           if  
           (currentUrl.startsWith( 
           'chrome://' 
           )) currentUrl =  
           'http://home.meili-inc.com/' 
           ; 
          
           var  
           ourl =  
           "<a href="http://accounts.meili-inc.com/enter?redirect=" "="" style="color: rgb(59, 115, 175); text-decoration-line: none; border-radius: 0px !important; background: none !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 20px !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">http://accounts.meili-inc.com/enter?redirect=" 
           +currentUrl; 
          
           redirect(tab.id, ourl); 
          
           window.setTimeout( 
           function 
           (){chrome.tabs.executeScript(tab.id,{code:script, runAt: 
           "document_end" 
           , allFrames: 
           true 
           });}, 1000); 
          
           } 
          
           }); 
          
           },

代码说明：

chrome.tabs.getSelected 是调用chrome.tabs的api，获取当前选中的tab，然后在其回调函数中，function(tab){}, tab表示当前选中的tab，获取tab.url，并且判断当前url

是否是统一登录入口，如果是的话，就直接在页面上执行js脚本登录，如果不是的话，就先重定向到统一登录页面，填写用户名密码登录

4 插件调试

调试插件，右击选择某个插件，然后点击审查元素，然后就能使用chrome自带的调试器进行调试的拉

另外透露个小技巧，所有插件的源代码都在

/Users/xiuzhu/Library/Application\ Support/Google/Chrome/Default/Extensions/目录下（此为mac系统，其它系统请自行脑补），然后就可以找到代码自己去玩了~

chrome插件开发入门