本练习是制作一个Chrome扩展，分享入门的开发过程。因为在消息传递上纠结了很久，所以重点总结一下消息传递。这次这个插件的功能很简单，就是点击按钮后，可以选择隐藏当前网页的模块。一方面，制作这个插件是一个实践范例，另一方面，有时候查资料的时候，旁边总是有很多五颜六色、动人的小广告！很烦人，根本关不掉！关闭按钮，点击后跳转到广告页面(?Д?≡?Д?)所以我想做一个小插件，让我可以选择隐藏这些我不想看到的模块。配置文件每个扩展都有一个名为manifest.json的JSON格式的清单文件。所以第一步我们将创建一个manifest.json文件。如下：{"manifest_version":2,//fixed"name":"Cissy'sFirstExtension",//插件名称"version":"1.0",//插件使用的版本"description":"ThefirtextensionthatCCmade.",//插件说明"browser_action":{//插件加载后生成的图标"default_icon":"cc.gif",//图标图片"default_title":"HelloCC",//鼠标移动到图标时显示的文字"default_popup":"popup.html"//点击图标执行文件},"permissions":[//允许插件访问的url"http://*/","bookmarks","tabs","history"],"background":{//backgroundscript是插件运行的环境"page":"background.html"//"scripts":["js/jquery-1.9.1.min.js","js/background.js"]//数组。当扩展程序启动时，Chrome会自动创建一个包含所有指定脚本的页面},"content_scripts":[{//对页面内容进行操作的脚本"matches":["http://*/*","https://*/*"],//满足什么条件执行插件"js":["js/jquery-1.9.1.min.js","js/js.js"],"run_at":"document_start",//加载文档时执行脚本}]}每个字段的信息我都用注释做了标注，接下来重点说一些需要注意的重要字段：chrome不允许扩展JS脚本直接嵌入到HTML页面中，所有脚本都需要作为externalsrc导入browser_action如果浏览器action有popup（即设置了default_popup），popup可以包含任何你想要的HTML内容，并且它会适应大小。用户点击图标后将出现弹出窗口。如果没有设置default_popup，就会执行chrome.browserAction.onClicked的内容，如果没有设置，什么都不执行。也就是说，如果设置了default_popup，chrome.browserAction.onClicked将不会被执行。browser_action对应的还有一个page_action，区别在于：BrowserAction对浏览器加载的所有网页生效；PageAction对特定网页生效。一个扩展最多可以有一个浏览器操作或页面操作。在此处选择浏览器操作。background后台是插件的运行环境。如果设置了scripts字段，浏览器扩展系统会根据scripts字段中指定的所有js文件自动生成一个后台页面。您也可以直接在页面字段中指定背景页面。只能设置两者之一。一般来说，我们让在后台管理扩展的主要逻辑变得更容易。其他页面可以通过消息传递机制与后台进行通信。理论上，contentscript和popup之间也可以传递消息，但不推荐这样做。消息传递由于插件的js运行环境不同，消息传递机制是一个重要的内容。一个简单的请求如果您只需要向您自己的扩展程序的另一部分发送消息（并可选地获得回复），您可以简单地使用chrome.extension.sendRequest()或chrome.tabs.sendRequest()方法。此方法可帮助您将JSON序列化消息从内容脚本发送到扩展，反之亦然。如果接收方存在，可选的回调参数允许处理传入的消息。sendRequest()是Chrome33之前的API，33之后，使用sendMessage()。1.内容脚本向扩展程序发送消息chrome.extension.sendMessage({hello:"Cissy"},function(response){console.log(response.farewell);});2.扩展程序向内容脚本chrome发送一条消息。tabs.sendMessage(tab.id,{hello:"Cissy"},function(response){console.log(response.farewell);});3.接收消息chrome.extension.sendMessage()向扩展中的其他监听器发送消息。发送此消息时，它会在扩展中的每个页面上触发chrome.extension.onMessage()事件。我用的是长连接，原理类似，就是调用接口的区别，这个就不详细介绍了，长期保持连接后台和弹出ExtensionPage可以看开发文档同一个Extension的（包括background、popup、tab、infobar、notification）都运行在同一个进程中，所以background和popup可以直接调用对方的方法，不需要传递消息。1.Popup调用后台的变量或方法varbg=chrome.extension.getBackgroundPage();//获取后台页面console.log(bg.a);//调用后台的变量或方法。2.后台调用popup中的变量或方法varpop=chrome.extension.getViews({type:'popup'});//获取弹出页面console.log(pop[0].b);//调用***弹出的变量或方法。这里需要注意的是必须指定类型。如果不指定，则获取除后台页面之外的所有扩展页面的窗口对象。(??ˇ?ˇ??)这个地方真的挣扎了好久。那么后台就是一个运行在扩展进程中的HTML页面。它在您的扩展程序的整个生命周期内都存在，而弹出窗口仅在您单击该图标后才存在，因此在获取弹出变量时，请确保弹出窗口已打开。后台和内容之间的持久会话需要内容脚本和扩展之间的长期通道。当建立连接时，两端都有一个Port对象通过连接发送和接收消息。1.contentscript发送消息给extensionvarbac=chrome.extension.connect({name:"ConToBg"});//创建频道并命名频道bac.postMessage({hello:"Cissy"});//使用通道发送消息。2.扩展程序向内容脚本发送消息。扩展程序向内容脚本发送消息。它与上一个类似，但您需要指定需要连接哪个选项卡。（我试过很多方法获取tab.id，但只有下面一个有效，所以如果你有什么其他有效的方法，请分享！！）chrome.tabs.onUpdated.addListener(function(tabId,changeInfo,tab){//获取当前Tabvarcab=chrome.tabs.connect(tabId,{name:"BgToCon"});//创建频道，指定tabId，并命名cab.postMessage({hello:"Cissy"});//使用通道发送消息。}3。要接收消息，为了处理等待连接，您需要使用chrome.extension.onConnect事件监听器。对于contentscript或者扩展页面，这个方法都是一样的chrome.extension.onConnect.addListener(function(bac){//监听是否连接，bac是Port对象bac.onMessage.addListener(function(msg){//监听是否收到消息，msg为消息对象console.log(msg.hello);})})安装调试设置—>扩展程序—>加载解压后的扩展程序—>选择文件，记得打开开发者模式。插件功能的开发总结就不写了。实现起来比较简单。本文算是chrome扩展开发。笔记我已经研究过了，不足之处还望指出。最好放插件的源码。写的比较乱，很多用不到的代码没有删除，因为在实践中用到了。嗯，我们去吃饭吧。
