对于Web开发人员来说必需拥有的 27个Chrome插件
webphp 13年前
<h2>1. AppJump App Launcher and Organizer</h2> <p>After you finish downloading all the extensions in this list, you’ll definitely need an organizer. <a class="external" href="/misc/goto?guid=4958188672460949418" rel="nofollow">AppJump</a> is a Chrome extension that allows you to locate and launch your applications and other extensions quickly from a drop down menu on your toolbar. One cool feature of AppJump is the ability to organize apps and extensions into different groups. For example, you can easily separate your work extensions from your personal, for more effective time management.</p> <p><a class="external" href="/misc/goto?guid=4958188672460949418" rel="nofollow"><img title="1.png" border="0" alt="1.png" src="https://simg.open-open.com/show/c5ebb08547534f78bde1bfb517572ecc.jpg" /></a></p> <p><br class="spacer_" /> </p> <h2>2. Awesome Screenshot</h2> <p><a class="external" href="/misc/goto?guid=4958188673892968265" rel="nofollow">Awesome Screenshot</a> lives up to its name. This awesome extension allows you to take snapshots of the whole or partial page. After taking a screenshot, you can circle or underline relevant parts, blur out irrelevant parts and make comments. You have the option to save to local or upload and receive an image link for sharing.</p> <p><a class="external" href="/misc/goto?guid=4958188673892968265" rel="nofollow"><img style="border-bottom:#cccccc thin solid;border-left:#cccccc thin solid;border-top:#cccccc thin solid;border-right:#cccccc thin solid;" class="size-full wp-image-25197 alignnone" alt="" src="https://simg.open-open.com/show/82f9205457c678ddf6282c958d27882b.png" width="615" height="450" /></a></p> <p><br class="spacer_" /> </p> <h2>3. Aviary Screen Capture</h2> <p>After waxing poetic about Awesome Screenshot above, you may wonder why two screen capture extensions are added on this list. One downside to Awesome Screenshot is that it requires access to all the data on your computer and your browsing history. For those users who feel that is an invasion of privacy, <a class="external" href="/misc/goto?guid=4958188675303222708" rel="nofollow">Aviary</a> is a perfectly capable option.</p> <p><a class="external" href="/misc/goto?guid=4958188675303222708" rel="nofollow"><img style="border-bottom:#cccccc thin solid;border-left:#cccccc thin solid;border-top:#cccccc thin solid;border-right:#cccccc thin solid;" class="size-full wp-image-25198 alignnone" alt="" src="https://simg.open-open.com/show/7dc488a34b643221979c29aed18cd356.png" width="615" height="450" /></a></p> <p><br class="spacer_" /> </p> <h2>4. Chrome Sniffer</h2> <p><a class="external" href="/misc/goto?guid=4958188676715298847" rel="nofollow">Chrome Sniffer</a> allows you to check the framework of any website. It locates and displays any known Content Management System (CMS) or Javascript library on a website. This extension is great for those mind-blowing websites that leave you wondering, “How is that humanly possible?” Currently, Chrome Sniffer can detect over 100 frameworks.</p> <p><a class="external" href="/misc/goto?guid=4958188676715298847" rel="nofollow"><img style="border-bottom:#cccccc thin solid;border-left:#cccccc thin solid;border-top:#cccccc thin solid;border-right:#cccccc thin solid;" class="size-full wp-image-25199 alignnone" alt="" src="https://simg.open-open.com/show/c7882f523ac1f33cb96d466ec2ad1dd7.png" width="615" height="450" /></a></p> <p><br class="spacer_" /> </p> <h2>5. Cloud Save</h2> <p>There’s a huge shift from operating locally to working in the cloud. As designers and developers, you are accustomed to working on the internet, but do you also save important files online? If your excuse is that it’s not so convenient, you may want to take a serious look at <a class="external" href="/misc/goto?guid=4958188678119735740" rel="nofollow">Cloud Save</a>. Cloud Save allows you to save files from any website to supported cloud services. Save to Amazon Cloud Drive, Dropbox and Flickr.</p> <p><a class="external" href="/misc/goto?guid=4958188678119735740" rel="nofollow"><img style="border-bottom:#cccccc thin solid;border-left:#cccccc thin solid;border-top:#cccccc thin solid;border-right:#cccccc thin solid;" class="size-full wp-image-25200 alignnone" alt="" src="https://simg.open-open.com/show/2a2bc4a5919a7a26d0790e26e13fc423.png" width="615" height="450" /></a></p> <p><br class="spacer_" /> </p> <h2>6. Code Cola</h2> <p><a class="external" href="/misc/goto?guid=4958188679528638425" rel="nofollow">Code Cola</a> is an extension that allows users to edit individual pages inside of a website. The extension allows you to click on an area within a web page and edit the CSS automatically.</p> <p><a class="external" href="/misc/goto?guid=4958188679528638425" rel="nofollow"><img style="border-bottom:#cccccc thin solid;border-left:#cccccc thin solid;border-top:#cccccc thin solid;border-right:#cccccc thin solid;" class="size-full wp-image-25201 alignnone" alt="" src="https://simg.open-open.com/show/99845f4077c42bd3679c011f8ae0bef9.png" width="615" height="450" /></a></p> <p><br class="spacer_" /> </p> <h2>7. Corporate Ipsum</h2> <p><a class="external" href="/misc/goto?guid=4958188680955131836" rel="nofollow">Corporate Ipsum</a> is a fun alternative to the standard Lorem Ipsum text filler. With this extension, you can populate your website with “corporate” speak and buzz words. An example of Corporate Ipsum is, “Competently target enterprise-wide data with multifunctional ideas.” This extension is based on the popular Mac widget of the same name.</p> <p><a class="external" href="/misc/goto?guid=4958188680955131836" rel="nofollow"><img style="border-bottom:#cccccc thin solid;border-left:#cccccc thin solid;border-top:#cccccc thin solid;border-right:#cccccc thin solid;" class="size-full wp-image-25202 alignnone" alt="" src="https://simg.open-open.com/show/f3459bd4e935fb181ff388a8e3ce04c7.png" width="615" height="450" /></a></p> <p><br class="spacer_" /> </p> <h2>8. Diigo Bookmark, Archive, Highlight and Sticky Note</h2> <p><a class="external" href="/misc/goto?guid=4958188682357287204" rel="nofollow">Diigo</a> is short for Digest of Internet Information Groups and Other stuff. It is an online research tool that allows users to manage information. Highlight webpages in multiple colors, make sticky notes, exchange pages across your social network and create groups to share your research.</p> <p><a class="external" href="/misc/goto?guid=4958188682357287204" rel="nofollow"><img style="border-bottom:#cccccc thin solid;border-left:#cccccc thin solid;border-top:#cccccc thin solid;border-right:#cccccc thin solid;" class="size-full wp-image-25203 alignnone" alt="" src="https://simg.open-open.com/show/da82c3db56affdd1aa4b829b9bc38ffb.png" width="615" height="450" /></a></p> <p><br class="spacer_" /> </p> <h2>9. Drag2up</h2> <p><a class="external" href="/misc/goto?guid=4958188683762673288" rel="nofollow">Drag2up</a> is an easy to use file attachment system. Instead of clicking through various windows, simply drag the file you’d like to attach from your computer onto the input field. Alternately, you can upload files to various hosting sites, including Flickr, ImageShack, Twitpic, and Box.net. This extension is easily one of the must-have downloads.</p> <p><a class="external" href="/misc/goto?guid=4958188683762673288" rel="nofollow"><img style="border-bottom:#cccccc thin solid;border-left:#cccccc thin solid;border-top:#cccccc thin solid;border-right:#cccccc thin solid;" class="size-full wp-image-25204 alignnone" alt="" src="https://simg.open-open.com/show/fd7e37f0cf4c95ad04b02eebe1e59e83.png" width="615" height="450" /></a></p> <p><br class="spacer_" /> </p> <h2>10. Eye Dropper</h2> <p>Every now and then, you come across the perfect shade of green that you must incorporate into your web design. The <a class="external" href="/misc/goto?guid=4958188685172361810" rel="nofollow">Eye Dropper</a> extension allows you to locate the exact shade. It also keeps track of your colors history.</p> <p><a class="external" href="/misc/goto?guid=4958188685172361810" rel="nofollow"><img style="border-bottom:#cccccc thin solid;border-left:#cccccc thin solid;border-top:#cccccc thin solid;border-right:#cccccc thin solid;" class="size-full wp-image-25205 alignnone" alt="" src="https://simg.open-open.com/show/67ee4c6a0afccf92738e35c25c9aa655.png" width="615" height="450" /></a></p> <p><br class="spacer_" /> </p> <h2>11. Firebug Lite</h2> <p><a class="external" href="/misc/goto?guid=4958188686605470616" rel="nofollow">Firebug</a> is one of the great tools that makes it difficult to transition from Firefox and leave it behind. Fortunately, Chrome has an extension called Firebug Lite that offers a similar function. Firebug Lite works along side Chrome Development Tools to enable developers to inspect and edit HTML and DOM elements. It also allows you to debug with ease. Firebug Lite is actually a JavaScript file that acts like the original Firebug once inserted into a web page.</p> <p><a class="external" href="/misc/goto?guid=4958188686605470616" rel="nofollow"><img style="border-bottom:#cccccc thin solid;border-left:#cccccc thin solid;border-top:#cccccc thin solid;border-right:#cccccc thin solid;" class="size-full wp-image-25206 alignnone" alt="" src="https://simg.open-open.com/show/103eb01958f07f54dc5473038120ab75.png" width="615" height="450" /></a></p> <p><br class="spacer_" /> </p> <h2>12. Greplin</h2> <p><a class="external" href="/misc/goto?guid=4958188688028052774" rel="nofollow">Greplin</a> is an extension that allows you to search within your private data. Use this extension to locate a piece of information you post on various social websites, including 推ter, 非死book or even Gmail. It indexes your data for easy searching. Instead of dredging through your history, you can easily call up data with Greplin.</p> <p><a class="external" href="/misc/goto?guid=4958188688028052774" rel="nofollow"><img style="border-bottom:#cccccc thin solid;border-left:#cccccc thin solid;border-top:#cccccc thin solid;border-right:#cccccc thin solid;" class="size-full wp-image-25207 alignnone" alt="" src="https://simg.open-open.com/show/2ca9ca13afc41e0ae64340f54ce2996a.png" width="615" height="450" /></a></p> <p><br class="spacer_" /> </p> <h2>13. HTML Instant</h2> <p><a class="external" href="/misc/goto?guid=4958188689444313791" rel="nofollow">HTML Instant</a> is a real time HTML. It features a split screen. As you type your code on left side of the split screen, you see the results automatically on the right side. HTML Instant not only works with HTML, but it also supports CSS and JavaScript. You can also upload images from your Image Shack, Photobucket, or a random website that’s hosting an image. This HTML editor is very user friendly, for the novice designer.</p> <p><a class="external" href="/misc/goto?guid=4958188689444313791" rel="nofollow"><img style="border-bottom:#cccccc thin solid;border-left:#cccccc thin solid;border-top:#cccccc thin solid;border-right:#cccccc thin solid;" class="size-full wp-image-25208 alignnone" alt="" src="https://simg.open-open.com/show/b7d0eecebd77e9ea06f8f939f3596072.png" width="615" height="450" /></a></p> <p><br class="spacer_" /> </p> <h2>14. IE Tab</h2> <p>The <a class="external" href="/misc/goto?guid=4958188690871956073" rel="nofollow">IE Tab</a> extension allows you to view a webpage from a simulated Internet Explorer, while still using your Chrome browser. Internet Explorer is still the preferred browser of most internet users. And there are still some sites that work best or even exclusively with Internet Explorer. This tab allows you to use Internet Explorer without sacrificing your dignity. First things first, IE Tab only works on Windows. This is because it uses Window’s built in rendering engine for Internet Explorer. For that reason, Mac users are out of luck on this one.</p> <p><a class="external" href="/misc/goto?guid=4958188690871956073" rel="nofollow"><img style="border-bottom:#cccccc thin solid;border-left:#cccccc thin solid;border-top:#cccccc thin solid;border-right:#cccccc thin solid;" class="size-full wp-image-25209 alignnone" alt="" src="https://simg.open-open.com/show/6cd99aa044360ed715d0e303ac8c512b.png" width="615" height="450" /></a></p> <p><br class="spacer_" /> </p> <h2>15. Image Properties Context Menu</h2> <p><a class="external" href="/misc/goto?guid=4958188692278297780" rel="nofollow">Image Properties Context Menu</a> is a useful Chrome extension that provides information on all things related to a selected image. Users can find both the location and the source of an image. It also shows the image’s dimensions and file size. It’s a simple but effective extension that is somehow not included in the Chrome browser.</p> <p><a class="external" href="/misc/goto?guid=4958188692278297780" rel="nofollow"><img style="border-bottom:#cccccc thin solid;border-left:#cccccc thin solid;border-top:#cccccc thin solid;border-right:#cccccc thin solid;" class="size-full wp-image-25210 alignnone" alt="" src="https://simg.open-open.com/show/76fba4829f36deb082018035f6a603a1.png" width="615" height="450" /></a></p> <p><br class="spacer_" /> </p> <h2>16. MeasureIt!</h2> <p><a class="external" href="/misc/goto?guid=4958188693693724095" rel="nofollow">MeasureIt</a> is a ruler that you use to find the dimensions of any element on a web page. Simply click on the extension and drag out the ruler to find the dimensions quickly and easily.</p> <p><a class="external" href="/misc/goto?guid=4958188693693724095" rel="nofollow"><img style="border-bottom:#cccccc thin solid;border-left:#cccccc thin solid;border-top:#cccccc thin solid;border-right:#cccccc thin solid;" class="size-full wp-image-25211 alignnone" alt="" src="https://simg.open-open.com/show/09b2c1478b28104f905129ba26b528c7.png" width="615" height="450" /></a></p> <p><br class="spacer_" /> </p> <h2>17. Microstock Photo Power Search Tool</h2> <p>What separates a good web designer from a great web designer is knowing where to go for stock images. Any designer knows that finding the right image is one of the most time consuming parts of design, especially if you have several go-to resources. <a class="external" href="/misc/goto?guid=4958188695097317245" rel="nofollow">This extension</a> allows you to search microstock on 5 of the top stock agencies, including Dreamstime, Fotolia, and Shutterstock.</p> <p><a class="external" href="/misc/goto?guid=4958188695097317245" rel="nofollow"><img style="border-bottom:#cccccc thin solid;border-left:#cccccc thin solid;border-top:#cccccc thin solid;border-right:#cccccc thin solid;" class="size-full wp-image-25212 alignnone" alt="" src="https://simg.open-open.com/show/e5a96d732e47daa2663f45800d978077.png" width="615" height="450" /></a></p> <p><br class="spacer_" /> </p> <h2>18. Palette for Chrome</h2> <p>The <a class="external" href="/misc/goto?guid=4958188696511720348" rel="nofollow">Palette for Chrome</a> extension is instantly useful. Right click on any image you’d like to use. This extension creates a 16, 24, or 32 color palette. Alternatively, you can also create a custom palette. Use this extension to incorporate and convey the colors from your favorite image into your web design.</p> <p><a class="external" href="/misc/goto?guid=4958188696511720348" rel="nofollow"><img style="border-bottom:#cccccc thin solid;border-left:#cccccc thin solid;border-top:#cccccc thin solid;border-right:#cccccc thin solid;" class="size-full wp-image-25213 alignnone" alt="" src="https://simg.open-open.com/show/453bc21073d657549c05fef98ed18a45.png" width="615" height="450" /></a></p> <p><br class="spacer_" /> </p> <h2>19. Pendule</h2> <p>The powerful <a class="external" href="/misc/goto?guid=4958188697935740197" rel="nofollow">Pendule</a> extension combines several of the extensions found in this list. Pendule allows you to view and alter Javascript and CSS. You can also view information about specific images or hide them altogether. It’s a robust developer tool that includes a color picker, an HTML and CSS validator and a link checker.</p> <p><a class="external" href="/misc/goto?guid=4958188697935740197" rel="nofollow"><img style="border-bottom:#cccccc thin solid;border-left:#cccccc thin solid;border-top:#cccccc thin solid;border-right:#cccccc thin solid;" class="size-full wp-image-25214 alignnone" alt="" src="https://simg.open-open.com/show/d5b3c5cc5a6e988b17c35955f4eed207.png" width="615" height="450" /></a></p> <p><br class="spacer_" /> </p> <h2>20. PlainClothes</h2> <p><a class="external" href="/misc/goto?guid=4958188699349733698" rel="nofollow">PlainClothes</a> is a fun and useful extension that allows you to see the bare bones of a website. Sometimes it’s easier to see mistakes in a design or analyze why it works so well when it goes black and white. PlainClothes allows you to strip down an webpage to one text color, one background color and one link color. Links are underlined, text is your default and suddenly, you’re in 1998 again. Actually, PlainClothes works very well for adding accessibility to your web design.</p> <p><a class="external" href="/misc/goto?guid=4958188699349733698" rel="nofollow"><img style="border-bottom:#cccccc thin solid;border-left:#cccccc thin solid;border-top:#cccccc thin solid;border-right:#cccccc thin solid;" class="size-full wp-image-25215 alignnone" alt="" src="https://simg.open-open.com/show/5c445d2c90ae37492220be78e48bfacf.png" width="615" height="450" /></a></p> <p><br class="spacer_" /> </p> <h2>21. Resolution Test</h2> <p>Change the size of your browser to test your website in various resolutions. <a class="external" href="/misc/goto?guid=4958188700759759092" rel="nofollow">Resolution Test</a> comes with preset resolution sizes, but you can also view in your own specified resolution.</p> <p><a class="external" href="/misc/goto?guid=4958188700759759092" rel="nofollow"><img style="border-bottom:#cccccc thin solid;border-left:#cccccc thin solid;border-top:#cccccc thin solid;border-right:#cccccc thin solid;" class="size-full wp-image-25216 alignnone" alt="" src="https://simg.open-open.com/show/614ac6a0ccfd67d9274c71c4d4913720.png" width="615" height="450" /></a></p> <p><br class="spacer_" /> </p> <h2>22. Search by Image</h2> <p><a class="external" href="/misc/goto?guid=4958188702179086432" rel="nofollow">Search by Image</a> is one of my favorite Chrome extensions. This extension allows you to find a specific image on different websites. With Search by Image, you also have the option to find similar images. Simply right-click on the image of interest and select “search Google with this image.” You will find pages that include matching images or are visually similar.</p> <p><a class="external" href="/misc/goto?guid=4958188702179086432" rel="nofollow"><img style="border-bottom:#cccccc thin solid;border-left:#cccccc thin solid;border-top:#cccccc thin solid;border-right:#cccccc thin solid;" class="size-full wp-image-25217 alignnone" alt="" src="https://simg.open-open.com/show/3db3296cfcfb363bfca9e3be785f959c.png" width="615" height="450" /></a></p> <p><br class="spacer_" /> </p> <h2>23. Session Manager</h2> <p>The <a class="external" href="/misc/goto?guid=4958188703577727076" rel="nofollow">Session Manager</a> extension saves all of your currently opened tabs for later perusal. This extension is extremely useful if you, like most, find yourself opening the same pages over and over again. Group and save related tabs in Session Manager. For example, bundle all of your social networking sites together so that you can quickly access them without having to individually open each site. And close them just as quickly, with assurance that your tabs are saved.</p> <p><a class="external" href="/misc/goto?guid=4958188703577727076" rel="nofollow"><img style="border-bottom:#cccccc thin solid;border-left:#cccccc thin solid;border-top:#cccccc thin solid;border-right:#cccccc thin solid;" class="size-full wp-image-25218 alignnone" alt="" src="https://simg.open-open.com/show/b0d587bac07a8cc5a214978dd75731f0.png" width="615" height="450" /></a></p> <p><br class="spacer_" /> </p> <h2>24. TabJump</h2> <p>Similar in scope to Session Manager, <a class="external" href="/misc/goto?guid=4958188704996763965" rel="nofollow">TabJump</a> goes a step beyond. Not only does it manage your tabs, this extension can also lock tabs, preventing you from closing an important tab accidentally. If you do close a tab by mistake, TabJump will allow you to re-open it, but keep in mind that extensions cannot restore history.</p> <p><a class="external" href="/misc/goto?guid=4958188704996763965" rel="nofollow"><img style="border-bottom:#cccccc thin solid;border-left:#cccccc thin solid;border-top:#cccccc thin solid;border-right:#cccccc thin solid;" class="size-full wp-image-25219 alignnone" alt="" src="https://simg.open-open.com/show/874fdd8f0602fd4d6575fc759ab8a00d.png" width="615" height="450" /></a></p> <p><br class="spacer_" /> </p> <h2>25. TooManyTabs</h2> <p>Because there can never be enough extensions to address browser tab management, <a class="external" href="/misc/goto?guid=4958188706396572843" rel="nofollow">TooManyTabs</a> is another must-have. This extension shows a thumbnail of all of the tabs you have open. This comes in handy when you’re operating with so many tabs that you can no longer read the tab titles. Having a visual aid helps you sort through your workspace effectively.</p> <p><a class="external" href="/misc/goto?guid=4958188706396572843" rel="nofollow"><img class="size-full wp-image-25220 alignnone" alt="" src="https://simg.open-open.com/show/2493bded35c051961b11d1644c4644c9.png" width="615" height="450" /></a></p> <p><br class="spacer_" /> </p> <h2>26. Web Developer</h2> <p><a class="external" href="/misc/goto?guid=4958188707805512269" rel="nofollow">Web Developer</a> is another comprehensive developer tool. It is by the same developer who wrote the wildly popular Firefox extension. With this extension, users can view and edit CSS, display image file sizes and clear session cookies.</p> <p><a class="external" href="/misc/goto?guid=4958188707805512269" rel="nofollow"><img style="border-bottom:#cccccc thin solid;border-left:#cccccc thin solid;border-top:#cccccc thin solid;border-right:#cccccc thin solid;" class="size-full wp-image-25221 alignnone" alt="" src="https://simg.open-open.com/show/4eb981a87d168a132326106ed193752d.png" width="615" height="450" /></a></p> <p><br class="spacer_" /> </p> <h2>27. WhatFont</h2> <p>For most web designers, fonts are kind of a big deal. Have you ever happened upon a random website and found the perfect font, only to search endless code for answers? If you like things simple, install this <a class="external" href="/misc/goto?guid=4958188709221015617" rel="nofollow">font finding extension</a>. Simply hover over a text and find the font in use. Not only will this extension tell you the name of the font, it also gives font size and color.</p> <p><a class="external" href="/misc/goto?guid=4958188709221015617" rel="nofollow"><img style="border-bottom:#cccccc thin solid;border-left:#cccccc thin solid;border-top:#cccccc thin solid;border-right:#cccccc thin solid;" class="size-full wp-image-25222 alignnone" alt="" src="https://simg.open-open.com/show/151edfebcd42b0ae2406bb9adc53949a.png" width="615" height="450" /></a></p> <p><br class="spacer_" /> </p> <em>Jacqueline Thomas is an award-winning writer and web design consultant</em>