说到如今最流行的浏览器，一定非chrome莫属，无论是速度、稳定性还是简洁性，都让人爱不释手。另外，之所以有更多人选择它，是因为它拥有丰富的扩展功能，这些扩展功能让你的浏览器变得无比强大，让你的浏览器不仅仅是一个浏览器。Chrome扩展结构chrome的扩展是一个以.crx结尾的安装包。如果下载后重命名为.rar压缩包文件，就可以使用压缩软件解压了。压缩后，你会发现其实chrome扩展包里面包含了一些js、css、html文件。可以说，只要会写前端，开发一个chrome扩展插件就非常容易了。在这些文件中，有一个manifest.json文件，它是扩展的描述文件，定义了扩展的名称、版本号等信息。{"name":"BrowserActionExtension","version":"0.0.1""manifest_version":2,"browser_action":{"default_title":"这是工具提示","default_popup":"popup.html"}在这个配置文件中，你还可以添加其他属性，只要你的扩展需要属性，都可以在这里添加配置。每个扩展都有一个浏览器运行的后台页面，另外还有一个事件页面，后台页面一直处于激活状态，而事件页面只有在触发事件时才会激活，所以为了节省内存和提高浏览器性能，尽可能选择活动页面。两者以持久化属性区分。"background":{"scripts":["background.js"],"persistent":false/true}当我们的扩展要访问浏览器当前页面的dom树时，我们需要用到内容脚本，这些脚本会在页面刷新时执行。"content_scripts":[{"matches":["https://*/*","https://*/*"],"js":["content.js"]}]对于扩展UI，我们可以通过browser_action属性进行配置。通过这个属性，我们可以设置插件的图标和点击时弹出的页面。"browser_action":{"default_icon":{"19":"icons/19x19.png","38":"icons/38x38.png"},"default_title":"这是工具提示","default_popup":"popup.html"}除了browser_action可以配置扩展图标外，page_action也可以配置图标，两者的区别是browser_action一直显示在扩展栏中，而page_action只有在满足一定条件时才会显示，比如页面有vue脚本才会显示vue调试图标。"page_action":{"default_icon":{"19":"images/icon19.png","38":"images/icon38.png"},"default_title":"GoogleMail","default_popup":"popup.html"}chrome受到开发者喜爱的另一个原因是它提供了非常强大的调试工具栏，我们的扩展也可以添加到调试工具栏中。通过使用devtools_page属性，我们可以将我们的扩展添加到调试工具栏中的选项卡。"devtools_page":"devtools.html"我们只需要在devtools.html中添加一个js导入语句即可。"devtools_page":"devtools.html"在devtools.js文件中，我可以放我们实际的扩展内容。chrome.devtools.panels.create("MyExtension","img/icon16.png","index.html",function(){});扩展能做什么主要取决于浏览器给我们提供了哪些API，幸运的是chrome给我们提供了足够多的好用的API。我们可以操作用户的书签和浏览记录，我们可以控制下载，管理下载的内容，我们可以监听网络请求，监听事件响应。我们可以修改界面样式，添加自定义css，在页面中添加想要的元素。总之，chrome几乎为我们提供了对浏览器扩展API的完整控制，而正是有了这些API，才诞生了数十万个扩展插件。扩展调试我们在本地开发好扩展后，就可以通过本地浏览器进行调试了。首先，我们需要先进入扩展页面，打开开发者模式，然后我们可以通过选择加载解压的扩展来加载我们的扩展。最后，我们通过向控制台输出调试信息来调试我们的扩展。完整的示例manifest.json：{"name":"BrowserExtension","version":"0.0.1","manifest_version":2,"description":"Description...","icons":{"16":"icons/16x16.png","48":"icons/48x48.png","128":"icons/128x128.png"},"omnibox":{"keyword":"yeah"},"browser_action":{"default_icon":{"19":"icons/19x19.png","38":"icons/38x38.png"},"default_title":"这是工具提示","default_popup":"browseraction/popup.html"},"background":{"scripts":["background.js"],"persistent":false},"chrome_url_overrides":{"newtab":"newtab/newtab.html"},"content_scripts":[{"matches":["http://*/*","https://*/*"],"js":["content.js"]}],"devtools_page":"devtools/devtools.html"}background.js：//omniboxchrome.omnibox.onInputChanged.addListener(function(text,suggest){suggest([{content:"color-divs",description:"Makeeverythingred"}]);});chrome.omnibox.onInputEntered.addListener(function(text){if(text=="color-divs")colorDivs();});chrome.extension.onMessage.addListener(function(request,发件人，sendResponse）{switch（request.type）{case“color-divs”：colorDivs（）;break;}returntrue;}）;chrome.extension.onConnect.addListener（函数（端口）{port.onMessage.addListener(function(message){switch(port.name){case"color-divs-port":colorDivs();break;}});});//向内容发送消息scriptvarcolorDivs=function(){chrome.tabs.getSelected(null,function(tab){chrome.tabs.sendMessage(tab.id,{type:"colors-div",color:"#F00"});//设置徽章chrome.browserAction。setBadgeText({text:"red!"});});}popup.html：
