我们上网都会用到浏览器，但是浏览器并没有我们想要的所有功能。我们可以根据自己的需要实现自己的插件来满足自己的需求。例如，网页中经常有很多广告。如果你想要一个纯粹的网页，你可以实现一个插件来删除网页中的广告部分。如果觉得浏览器自带的下载工具不方便，可以实现一个插件来管理所有下载的文件，文中以实现记录所有打开的网页地址为例，分享一下理解浏览器插件开发。要实现浏览器插件，您需要从配置文件开始。此配置文件是manifest.json文件。任何插件的实现都离不开这个JSON格式的文件。认识manifest.json文件，设置基本信息"manifest_version":2,//文件版本基本不变"name":"记录网址扩展名",//这里输入插件名称"version":"1.0.1",//自己实现的插件版本，插件打包的时候根据这个字段判断插件是否需要更新"description":"yangyanjun第一个扩展made.",//在这里输入这个插件的详细描述。字段以向插件添加条目。设置入口信息"browser_action":{"default_icon":"pinzhi_logo.png","default_title":"记录浏览地址","default_popup":"popup.html"}配置完“browser_action”字段后，插件-in加载后，浏览器地址栏右侧会生成一个入口图标，如下图所示。“default_icon”字段配置图标的地址，“default_title”字段配置鼠标移动时图标上显示的文字，“default_popup”配置点击图标时执行的文件。需要注意的是，这里的文件地址都是相对路径，相对于manifest.json文件。3.设置本插件可以访问的浏览器权限“permissions”：["http://*/*","https://*/*","tabs","storage"]"permissions"field是一个数组，列出了这个插件使用的浏览器权限。如果这里没有授权，插件是不能使用的。此插件使用的浏览器的权限。4.设置插件后台页面。"background":{"page":"background.html"}"background"字段表示插件运行的环境。对于浏览器前台看不到的页面，需要打开插件的开发者模式才能看到。如下图所示：5、设置对页面内容进行操作的脚本“content_scripts”：[{//对页面内容进行操作的脚本“matches”：["http://*/*","https://*/*"],"js":["js/jquery-1.9.1.min.js","js/js.js"],"run_at":"document_start","all_frames":true}]"匹配"字段设置执行脚本的环境。比如这个插件的脚本只在http或者https协议下执行，content脚本在其他协议的网页中是不会执行的。“js”字段依次加载脚本文件地址。“run_at”指定在加载文档时执行脚本插件中几个环境的汇总。popup.html：点击插件图标显示的页面只有在点击图标时才会显示，可以和background.html的运行循环区分开来。这个页面运行的js脚本叫做popup.js，每次点击插件入口图标都会重新加载。popup.html页面如下图所示：background.html：该页面为插件运行的后台页面，不显示在窗口中，与当前浏览页面无关。此页面在插件的整个生命周期内都存在。插件启动后，一直在后台运行。只有一个。这个页面运行的js脚本叫做background.js。content.js：这是注入网页的JavaScript脚本，可以是多个。如上所述，可以设置注射条件。注意：Chrome不允许在扩展中的HTML页面中直接嵌入js脚本，要求所有脚本都导入为externalsrc。消息传递的三个主要部分总结Popup在后台调用变量或方法：letbgMessage=chrome.extension.getBackgroundPage();//可以直接获取后台页面console.log(bgMessage.tabUrl);//直接调用后台变量或方法。后台调用弹窗中的变量或方法：letpopMessage=chrome.extension.getViews({type:'popup'});//可以直接获取弹窗页面console.log(popMessage[0].name);//调用第一个弹出变量或方法。注意：因为一个Extension可以同时有多个页面。这些页面分为五种：除了背景和弹出页面，还有tabs：像普通网页一样在浏览器的tab中打开的页面，infobar：显示在浏览器顶部信息栏的信息页面，notification：当浏览器底部显示的浏览通知页面。它们分别代表在不同窗口中打开的页面。所以这里需要指定要获取的页面类型。如果不指定，则获取除后台页面之外的所有扩展页面的窗口对象。内容脚本向后台发送消息chrome.runtime.sendMessage({conyent:message||'Iamcontent-script'},function(response){console.log('Responsefrombackground:'+response);});后台监听contentscript发送的消息，并响应chrome.runtime.onMessage.addListener(function(request,sender,sendResponse){...sendResponse(JSON.stringify(request));//监听消息后,对接收到的消息做一些处理并做出响应});本插件实现获取当前标签页url的逻辑的两个要点要写在background.js中，可以直接使用google提供的插件接口获取当前标签页页面的urlchrome.tabs.onUpdated.addListener(function(tabId,changeInfo,tab){console.log(tab.url)//可以获取到当前页面的url地址})来存储获取到的url地址，使用google的storage来存储，由于在manifest.json中已经授予了存储权限，可以直接使用chrome.storage.local.set({'address':tabUrl},function(){console.log('success')})可以选择同步或本地存储的方式。如果选择前者（sync），存储的数据会自动同步到你登录的任何一个Chrome浏览器。如果选择storage.local，则数据只能存储在当前登录的设备本地。详细使用方法参考https://developer.chrome.com/...加载调试设置—>扩展程序—>加载解压后的扩展程序—>选择manifest.json所在文件夹注意：代码修改，需要重新加载文件。总结本文简单分享了如何开发一个简单的谷歌浏览器插件，以及一些注意事项，并提到了如何授权和使用谷歌插件api，重点介绍了manifest.json入口文件和插件必备的几个插件-开发中的重要环境和环境之间的通信。这篇文章的内容不是很全面，应该算是chrome插件开发的学习笔记，不足之处还请指出。本文内容并未结束，将在以后的学习过程中不断补充。参考资料：https://developer.chrome.com/...https://developer.chrome.com/...https://blog.csdn.net/luoshen...
