前端程序员必知的21个Chrome扩展
前端程序员必知的21个Chrome扩展
小编从IDG资本了解到最新的数据：
前端开发越来越贵，Web前端经理年度整体薪酬中位值为25.4万;
移动端开发最抢手，iOS开发总监年度整体薪酬中位值为35.7万，Andriod 开发总监年度整体薪酬中位值为33.1万;
可见2016年是前端开发的一个增长爆发年，如何抓住机会对于一个前端开发工程师至关重。除了掌握基本的技术开发原理以外，也要不断的了解新知识，掌握新技能。
那下面小编将给大家分享关于前端开发必知的Chrome扩展
谷歌Chrome浏览器是网络上可用的最好浏览器之一，并且自2011年11月超越了Firefox浏览器之后，已经成为了互联网上占主导地位的浏览器。
今天，HTML5中国与大家分享一些实用的谷歌Chrome浏览器扩展，可以助我们有效提高工作效率。
Devtools Terminal?——浏览器终端。牛逼的不得了!
LiveReload——为官方LiveReload应用程序(Mac和Windows)和第三方，例如guard-livereload和yeoman，提供Chrome浏览器集成。
BrowserStack Local?——本地测试app可以让你即刻配置和测试本地/内部服务器，和包括HTML、CSS和JavaScript文件在内的本地文件夹。在BrowserStack
上的安全云设置中测试布局，工作流程和交互性，跨越700+个真正的台式机和移动浏览器。
JSONView?——验证和查看JSON文件。
Postman——用Postman为API工作流程增加负荷!更快地构建，测试，并记录你的API。已经不止一百多万的开发人员投入了Postman的怀抱。
Window Resizer——该扩展可以重新调整浏览器窗口的大小，以仿效各种不同的分辨率。对网页设计师和开发人员尤其有用，可以帮助测试在不同浏览器分辨率下的布局。
tWhatFon——识别网页上的字体最简单的方法。
Page Ruler——画一把尺子以得到像素维数和定位，并测量任何网页上的元素。
Web Developer Checklist?——对于那些想要确保遵循最佳实践的web开发人员，这个扩展可以让你很容易发现自己网站的问题域。
Image Downloader——浏览和下载网页上的图像。
Alexa Traffic Rank?——Alexa Traffic Rank是Alexa Internet提供的免费的Chrome扩展，并且是Alexa流量面板的唯一扩展。
这款Alexa扩展可以在你网上冲浪的时候陪伴你，提供有关你访问的网站的Alexa数据，并且不会中断你浏览网站。
Eye Dropper?——Eye Dropper是开源扩展，它可以让你从网页，拾色器和个人色彩历史中选取颜色。
Firebug Lite?——Firebug Lite并非Firebug或Chrome Developer Tools的替代品。它是使用这些工具时也可以一起使用的工具。
Firebug Lite提供了丰富的视觉表现，这些视觉表现也是我们在Firebug 中，涉及HTML元素，DOM元素，以及盒模型阴影(Box Model shading)时惯常见到的。它还提供了一些很酷的功能，比如用鼠标检查HTML元素，以及实时编辑CSS属性。
Web Developer?——添加了一个拥有各种web开发工具的工具栏按钮。是Firefox web开发扩展的官方端口。
Responsive Inspector?——?Responsive Inspector是一个简单的谷歌Chrome浏览器扩展，它允许查看被访问网站的媒体查询。这在开发响应式网络布局时非常有用，因为它可以直观地显示在CSS样式表中定义了什么分辨率。
BuiltWith?——使用该扩展，可以找出你正在访问的网站是用什么构建的。
Corporate Ipsum?——作为填充文本使用，生成随机的企业**说辞。
User-Agent Switcher?——模拟用户代理(User-Agent)字符串。有了这个扩展，你就可以快速轻松地在用户代理字符串之间进行切换。此外，你还可以设置每次要冒名的特定URL。
YSlow?——YSlow分析网页，并提出如何在一套高性能web页面规则的基础上改进性能。YSlow在三个预定义规则之一或一个用户定义的规则集的基础上将网页分等级。它提供了改进页面性能的建议，总结了网页页面的组件，显示了关于页面的统计信息。
CSS Shapes Editor?——使用交互式编辑器来创建并调整CSS Shape值，重叠所选元素。
Pesticide?——这个扩展可以插入Pesticide CSS到当前页，形成每个元素的示意图以便于更好地看到它们在页面上的位置。
chrome扩展程序
时下很多人都用上了Google Chrome浏览器，这款目前世界上最快的浏览器既简洁又高效，用来上网冲浪还真是不错。不过好马也得配好鞍，和很多非IE核心浏览器一样，Chrome也需要利用插件扩展自己的能耐。下面就是笔者精心挑选的75款实用插件，感兴趣的不妨慢慢往下看吧! 1. 搞定网银—— IE Tab 虽说网页标准化已经实行多年，可事实上出于安全性或其他考虑，很多特殊的站点(如网上银行)仍旧只能用IE打开。而这款插件的最大好处，就是能够在Chrome中直接生成一个IE内核标签。插件装好后会自动在地址栏右侧生成一个按钮，每次点击都能产生一个空白IE标签，在这个标签中拥有一套独立的地址栏及工具栏，打开的网页将享受到与IE一样的服务。此外它还有一个很人性化的考虑，那就是可以将当前页面设为“自动启动”(工具栏左数第2个按钮)，换句话说当我们再次打开相同页面时，Chrome将自动以IE模式打开。 图1 IE Tab插件 下载网址：https://www.sodocs.net/doc/7910997687.html,/utilities/ie-tab/ 2. 鼠标手势—— Chrome G estures 鼠标手势就不用我多解释了吧，安装这款插件后，Chrome便能在鼠标的“指挥”下完成很多特定操作。除了能够显示出鼠标的轨迹，一个很人性化的设计就是提供了手势功能提示，于是我们便可以在操作时随时掌握即将发生的任务。而且这款插件还有一个特别之处，那就是实现了超级拖拽(即利用拖拽在新标签页中打开链接或文本搜索)，进入“扩展程序”→“Chrome Gestures”→“选项”后即可找到这项功能。此外我们也能对默认手势进行修改，甚至为“链接”或“文字”拖拽指定不同的动作(超级拖拽)。
Firefox Chrome插件、扩展的区别
插件（plugins）、扩展（extensions）与主题（themes）和语言包（languages）都是附加组件（Add-ons）不同种类。 插件与扩展是完全不同的东西。 Firefox：插件与扩展 插件（Plugins/Plug-ins）： 它通常是第三方应用程序提供给firefox使用的二进制文件。也就是说第三方应用程序把相关功能编译成了二进制的机器指令提供给各类浏览器，方便它们调用。 Firefox需要显示某些自身并不能显示的特定文件类型的时候，就会调用与之相关的第三方应用程序提供给firefox的插件来显示它。插件的作用也在于此。 windows下的firefox插件通常是dll格式，linux下的通常是so格式。 例如，Adobe提供给firefox的插件“Adobe reader”使其能直接在浏览器里显示网络上的pdf 文档，而Adobe提供给firefox的另一个插件“Adobe shockwave flash”则使其能显示网页中嵌入的flash。Microsoft提供的“Windows media player firefox plugin”使firefox能播放网页中嵌入的windows媒体（wmv、wma、asf以及对应的播放列表格式）。 扩展（extensions）： 它通常是扩展开发者为了修改或者增强firefox本身的功能而提供的一种打包格式。它通常由包含功能代码的js脚本、包含界面的xul文件以及包含皮肤的css文件和各种图像文件组成。少数特定平台下的扩展可能还会附带一些二进制文件。 ?Firefox扩展是什么？ 官方定义：它是用于给Firefox增加一些实用新功能的附加组件。 使用的技术： ○XUL: 一种基于XML的用户界面语言 ○CSS,DOM,JavaScript ○XPCOM: 跨平台的COM（COM 的全称是Component Object Model 组件对象模型。）技术，基本原理与微软的COM类似 ○XPConnect: 将JavaScript和XPCOM连接起来，即可以让XPCOM组 件被脚本化，在js代码中调用，也允许使用js来开发XPCOM组件 开发，相当于“胶水”。 ○RDF: 资源定义框架，用于保存扩展的注册信息和描述信息 扩展的格式都是xpi后缀的。其实是zip格式打包的。 常见的扩展有noscript、adblock plus等。
谷歌浏览器插件
16个实用的Google Chrome扩展/插件下载 2010/02/20 | 分类：TOOLS 这次推荐的Google Chrome扩展皆是本人亲自试用过的。如果有更好的选择请在留言中交流。另外，Google Chrome extensions（chrome扩展程序库）的下载链接貌似经常被墙，所以最好还是找个比较靠谱的代理。 AdBlock 用这个插件可以过滤掉各种类型的广告！而且它不会占用地址栏的位置，并且有相当强大的自定义功能。 推荐理由：有多少人喜欢满是广告的网页呢？过滤广告几乎是任何浏览器中都不能忽略的功能。但是。这个扩展有时候会误杀一些有用的东西。 Chromed Bird Chrome中非常好用的twitter客户端。支持API。自定义功能同样强大！ 推荐理由：推油们必备。Firefox有Echofon，Chrome有Chromed Bird！ chromed brid的新版本必须要OAuth验证登陆，无意义继续使用，建议替换成下面这个扩展。 Chrowety chrome中相当好用的twitter客户端，支持API，可以无视chromed bird了！
推荐理由：支持API，有中文版本。 ChromeMilk GTD时间/任务管理的应用我选择了基于Remember The Milk的扩展。这个看个人喜好吧。推荐理由：Remember The Milk这个平台更为专业，扩展性更好。 gTasks 同上一个插件，如果你习惯于用Google tasks，可以用这个扩展。 推荐理由：基于Google T asks的扩展很多。这个扩展有较好的UI，有计数功能。 Drag and Go 国人作品。支持拖拽搜索，拖拽打开链接等等。 推荐理由：拖拽是很多人的浏览习惯，在这个插件上可以得到延续。 Google Dictionary (by Google) 词典工具，必备。支持划词翻译。 推荐理由：GOOGLE官方出的扩展，非常实用。 IE Tab Classic 大名鼎鼎的IE T ab，让你在Chrome的环境下随时用IE的内核打开网页！有些网页IE可能
chrome扩展开发——自动填表实例
manifest.json配置文件 --------------------------- { "name": "项目名称", "version": "1.0", "permissions": ["tabs", "http://*/*", "https://*/*"], "content_scripts": [ { "matches": ["http://*/*", "https://*/*"], "js": ["jquery-1.6.4.min.js"] } ], "icons": {"128":"icon.png"}, "browser_action": { "default_title": "优酷好友申请批量通过", "default_icon": "icon.png", "popup": "popup.html" } } ------------------------------------------- 解释： "permissions": ["tabs", "http://*/*", "https://*/*"]是该扩展应用到tabs(选项页)中的所有http://和https://页面 "content_scripts": [{ "matches": ["http://*/*", "https://*/*"], jquery应用的页面有http 和https开头的页面 "js": ["jquery-1.6.4.min.js"] 这是导入jquery用以应用 }], 浏览器行为： "browser_action": {
"default_title": "优酷好友申请批量通过", "default_icon": "icon.png", "popup": "popup.html" 行为代码页面 } popup.html浏览器行为代码页面，就是点击浏览器上的图标后，执行这个页面来对当前选项卡页面进行处理 -----------------------------------------------