In this blog, some of our most experienced Android developers will share their knowledge with you. These articles are designed to help you make the most of your time developing apps for the world’s most popular mobile platform, and we hope that reading them will help you become a better developer for both yourself and your users.
Table of Contents
Chrome Extension For Android Developer
Google’s wide-spread influence on web services has made Chrome easier and most used browser for web development. The sheer number of chrome extensions available has made it a handy tool for web designers and developers. So, here we are enlisting the best chrome extensions for programmers and developers in pursuance of productive and successful web development.
- Quick Code – Free Programming Courses
Quick Code for Chrome is an extension that serves free online programming courses in a new tab of the browser every day. With this extension, you can get updates on free online courses related to:
Various programming languages
Web development
Front end development
Mobile apps developments
Blockchain
Machine learning
Database
Data science
- Daily
Every single day new and updated development technologies are being released across the web. For developers, staying updated is a huge hassle. Daily was made by developers for developers to help us focus on code instead of constantly search for news around the web.
- LambdaTest Chrome Extension
LambdaTest Screenshot Chrome Extension can be used to take full page screenshots of webpages across different desktop and mobile browsers right from your browser with one click. These screenshots will help in fastracking cross browser compatibility testing of the web pages and websites.
- Site Palette
Site Palette is a free Chrome extension that generates palettes based on webpage colors. With this extension:
Several palette generators supported
Shareable links created
Preview palette image available for download
Download auto-generated sketch template
Adobe swatch support added
Play with the palettes at coolors.co
Fine-tune the palettes at google art palette
Print styles added: print out or save palettes to PDF
A browser extension to generate comprehensive palettes. A must-have tool for designers and front-end developers. Free color scheme extraction.
- Devo
GitHub Trending, Hacker News and Product Hunt, on every new tab!
Devo is a new tab extension for Chrome and Firefox that displays GitHub Trending, Hacker News and Product Hunt front pages on every new tab, no-login required. Devo is a completely open-source project and developed on GitHub.
- Multi-browser Screenshots
Multi-browser Screenshots is a free Chrome extension that lets you check how a site renders across many common browsers/devices:
Edge
Internet Explorer 11/10/9/8
Chrome 50
Firefox 45
Safari 9.1 (OS X El Capitan)
Google Nexus 6 (Android 5.0)
Google Nexus 9 (Android 5.0)
iPad Air (iOS 8.3)
iPhone 6 Plus (iOS 8.3)
- MetaMask
MetaMask is a bridge that allows you to visit the distributed web of tomorrow in your browser today. It allows you to run Ethereum Apps right in your browser without running a full Ethereum node.
MetaMask includes a secure identity vault, providing a user interface to manage your identities on different sites and sign blockchain transactions.
- Sitemod.io Chrome Extension
Sitemod.io lets anybody modify, save & share any website in real time, without having access to the source code of the website.
Use Chrome Developer Tools to edit any HTML, CSS or JS code in the web page or add your own. Save and get a unique URL to the modified version.
Sitemod.io comes in the form of a free browser extension.
- Githunt
Replace the new tab with a list of trending repositories on github belonging to any technology that you chose.
GitHunt is an extension that replaces the new tab of your browser with the trending github repositories.
You can look through the repositories for any technology of your liking and for any period of time. By default it shows the trending repositories (most starred repositories created in the given period of time) for the last week and as you keep scrolling, you will be presented with the popular repositories of the consecutive past weeks.
All you have to do is select how you would like to see the repositories (monthly, weekly or yearly) and the language, it will remember your choice and will show you the trending repositories in that category whenever you will open the new tab.
- SVG-grabber
A tool to quickly preview and get all the svg assets from a website.
Quickly preview and copy or download all the SVG assets from a website.
SVG-grabber lets you preview, download and copy the code all SVG icons and illustrations in a website. It is an open source tool created by Jaques Bouman and Juan Rios at NGTI in Rotterdam, The Netherlands. Available for download, forking on Github.
- Github-plus
Display repo size, size of each file, download link and option to copy file contents. Extension that provides useful features on top of GitHub website.
Features of this extension are:
Displays repo size.
Displays each file size in every active branch
Show download link for each individual file
Copy file’s contents directly to clipboard
Download file while viewing it’s contents.
chrome developer extensions
A couple of months ago, we reviewed the new Firefox browser designed for developers. Since then most of our developers kept Google Chrome as their primary browser. Working with Chrome offers access to an immense repository of Chrome extensions and tools which make our daily tasks less of a chore. With the built-in developer tools, there seems to be no further need for more tools. However, I’d like to present you with 16 of the best Google Chrome extensions for developers.
16 of the best Google Chrome Extensions for developers
- Usersnap
The Usersnap Chrome extension lets you capture and annotate any web page directly in your browser. It’s super-easy to provide visual feedback on prototypes or report bugs with this Google extension.
And all created screenshots and screen recordings are directly stored in your project dashboard, making bug tracking and feedback a lot of fun!
Click the image to see Usersnap’s Chrome extension in action (YouTube video) ⤵️
Example of customer feedback via screen recordings
Usersnap is an award-winning bug tracking and feedback tool, featured by Inc., Forbes, Techcrunch, and The Huffington Post. It is loved by companies such as Google, Facebook, Microsoft who use Usersnap on a daily basis to work together on web projects.
Try Usersnap for free for 15 days here.
Learning to write programs stretches your mind, and helps you think better, creates a way of thinking about things that I think is helpful in all domains.
Bill Gates – Founder, Microsoft
- Web Developer
The web developer extension for Chrome adds a little toolbar with different tools available. The original concept of this Chrome extension for developers came from the PNH Developer Toolbar.
The Google extension web developers have a lot of handy tools a developer can use in their day-to-day work – for designers as well as programmers. It allows you to do a lot more than the standard Chrome Inspector, like being able to easily add outlines to elements just by clicking, displaying rulers, finding all broken images on a page, and lots more.
web developer chrome extensions for developers
Link: Web developer extension.
- Hiver
This is a tool that helps teams manage group inboxes like engineering@ and bugs@, right from Gmail. With Hiver, critical emails – regarding support escalations and other technical bug problems – arriving in these inboxes can be auto-assigned to individual developers and kept track of in real-time, till the point of resolution.
Hiver chrome extension for developers
Link: Hiver
- f19N Obtrusive Live Test
This Chrome extension for developers is a sandboxed, extendable Webpage Testing Framework. It allows devs to test all pages on predefined best practices such as SEO or web performance. It is very simple to create the tests yourself.
You get direct visual feedback and see what is happening in the browser during page loads and render lifecycles.
f19N
Link: F19N Obtrusive Live Test
- Window Resizer for Developer
The Window Resizer extension lets you resize your browser window on the fly. Clicking on the icon in the menu bar produces a drop-down menu of window sizes that you can customize. What’s neat about the Window Resizer is that it offers an option to launch it as a pop-up, enabling you to switch through different screen resolutions and see if your media breakpoints are working as expected. On top of that, you can also rotate your screen and customize the presets.
Emulate various screen resolutions.
Resize the browser window to emulate various screen resolutions.
Link: Window Resizer
- ColorPick Eyedropper
ColorPick Eyedropper is a simple color picker tool that allows you to select color values from any web page.
An eye-dropper & color-picker tool that allows you to select color values from webpages.
Color-picker tool that allows you to select color values.
Link: ColorPick Eyedropper
- CSSViewer
CSSViewer is a simple CSS property viewer. It provides a floating panel that reports on the identity of the section that the mouse is over, along with its font, text, color, background, box, positioning, and effects attributes. CSSViewer provided the basic CSS information you need quickly. Make sure to install this Chrome extension.
css viewer chrome extensions for developers
Link: CSS Viewer
- Lorem Ipsum generator
The lorem ipsum generator does what its name states. It provides an easy and quick way to create default text. Definitely, this is a quick win if you need some default text as a placeholder.
lorem ipsum chrome extensions for developers
Link: Lorem Ipsum Generator
- actiTIME
actiTIME Timer helps developers to keep track of work hours directly from the web browser and web apps such as Jira. It is used by companies and freelancers for analyzing performance and controlling the project’s progress and profitability.
ActiTIME chrome extension | Usersnap Blog
Link: actiTIME
- Ghostery
Ghostery is a great Google extension that detects trackers, pixels, and any other embedded snippets on a website. You immediately see which plugins and trackers are installed on the web page you’ve visited. Further on, Ghostery lets you protect your privacy. There’s no registration or sign-up required to use this Chrome extension.
See who’s tracking your web browsing with Ghostery.
See who’s tracking your web browsing with Ghostery.
Link: Ghostery
- Wappalyzer
Similar to Ghostery, the Wappalyzer Chrome extension lets you identify software that is installed on any particular website. It uncovers technologies and. content management system, eCommerce platforms, web servers, JavaScript frameworks, and installed analytics tools.
Identify web technologies – Wappalyzer
Identify web technologies with Wappalyzer
Link: Wappalyzer
- IE Tab
In need to do some manual IE testing and don’t want to install all kinds of different Internet Explorer versions? Check out the IE Tab extension for Chrome which emulates IE by using the IE rendering engine directly in Chrome. You can test your website for IE6, IE7, IE8, or IE9 directly in your chrome browser.
Unfortunately, the IE Tab Chrome extension is only available for Windows at the moment.
ie tab chrome extensions for developers
Link: IE Tab
usersnap track
- Site Spider
If you need to find broken links on your site and want to restrict spidering to a specific directory you need Site Spider.
site spider chrome extension
Link: Site Spider
- Session Manager
When you’re working on the web, browser tabs management is a great skill. Session Manager is your Chrome extension to go. It saves your browsing state and lets you re-open the session later. It is particularly useful if you find yourself opening the same web pages over and over.
session manager chrome extensions for developers
Link: Session Manager
- Clear Cache
This extremely useful Chrome extension allows you to clear your cache from the toolbar. It works “behind-the-scenes” meaning there are no popups or confirmation dialogs to distract you. It’s customizable in terms of how much data you want to clear, including app cache, downloads, file systems, form data, history, local storage, passwords, and much more.
clear cache chrome extensions for developers
Link: Clear Cache
- JSONView
As a developer working with RESTful APIs, reading raw JSON data on a browser can be quite awkward. It’s much easier to read JSON in tree-view, rather than in its raw state. The Chrome extension JSONView helps you view JSON documents in the browser.
json viewer chrome extensions for developers
Link: JSON Viewer
Coding Chrome Extensions For Developers – How to Do It!
Chrome extensions or add-ons for Chrome are small software applications that introduce new features and make your browsing experience more convenient. They allow users to tailor browser functionality and aesthetics according to their personal preferences. Coding extensions is usually done using a multitude of programming languages including JS, HTML, and CSS.
Coding Extensions – Step by Step Guide
When coding chrome extensions for developers, first of all you need to create a folder and add the following files.
Step 1 – manifest.json
This is the file that will provide Chrome with basic information related to your extension such as required permission and its name. The majority of the variables in the manifest file are quite self-explanatory and you can change any of them. The matches variable is responsible for running the select content.js when a particular webpage is launched.
“”: will match any URL that begins with an approved scheme such as http:, https:, file:, ftp:, or chrome-extension:.
“http:///”: will match any URL that uses the http: scheme.
“https:///”: will match any URL that uses the https: scheme.
“:///*”: will match any URL that uses the https: or http: scheme.
Step 2 – content.js
This is a JavaScript file that’s executed in the context of web pages. It means that this file enables content script to interact with websites and web pages that the user opens in their Chrome browser.
Step 3 – Image Icon
Add your icon file in png format to the folder. You can either download or create an icon for your extension.
Step 4 – background.js
While you have installed the extension, there are no instructions present. Create a file named background.js and add a background script. Place this file in the extension folder. Ensure that you’ve registered your background script in the manifest which tells your extension what files to reference and how certain files will act.
Step 5 – Creating and Naming Extension
Once you are done, add all the files to a folder and name it after your extension.
Conclusion
Let us know your thoughts in the comment section below.
Check out other publications to gain access to more digital resources if you are just starting out with Flux Resource.
Also contact us today to optimize your business(s)/Brand(s) for Search Engines