This article is intended for Chrome Enterprise administrators and developers with experience building and publishing Chrome app packages.
If the Chrome Web Store doesn't have a product with the functionality you need, you can create your own app or extension and users can add it to their Chrome OS devices or Chrome browser. For example, as an administrator, you can automatically install a private bookmarking app on users' devices that links to the HR website.
Preparation
- If the manifest file specifies the target site that the app or extension references, verify ownership of that site.
- If your app or extension is hosted on a private server, you can control who has permission to publish it to the Chrome Web Store. You can disable ownership verification for third party sites that the application links to.
Step 1: Create an app or extension
Below we use a bookmark application as an example. For instructions on creating more complex Chrome apps and extensions, see the getting started guide.
- Create a folder on your computer where the application or extension files will be stored. Give it an application name.
- Create a manifest file.
- Create in text editor JavaScript file® Object Notation (JSON). See an example JSON file for a bookmark app.
- Check if the code in the JSON file is formatted correctly using a tool like JSONLint.
- Place the file manifest.json to the application or extension folder.
- Create a logo.
- The image must be 128 x 128 pixels in size.
- Save the logo file as 128.png in the application folder.
Step 2: Test the app or extension
Developers can test their applications and extensions in Chrome browser or on Chrome OS devices.
To troubleshoot an app or extension, use Chrome logs.
Step 3: Create an app collection (optional)
An admin can create an app collection for an organization to recommend Chrome apps and extensions for users to install.
Step 4: Publish your app or extension to the Chrome Web Store
A developer can make an application or extension publicly available or restrict access to it. When publishing to the Chrome Web Store, you have three options to choose from.
- Public: Anyone can find and install the application.
- Access via link: You can install an application or extension only via a link. It is not included in search results in the Chrome Web Store. You can send the link to users both inside and outside your organization's domain.
- Private: Only users in your domain can find and install the app or extension. In addition, you can restrict access to the product only to trusted testers whose names are listed in the developer toolbar.
To add an app or extension to the Chrome Web Store, create a ZIP archive of the appropriate folder, and then publish the product.
Step 5. Set up rules for working with the application or extension
In the Google Admin Panel, you can manage the use of apps and extensions on Chrome devices and in the Chrome browser on Windows computers, Mac and Linux in your organization. Chrome rules can be customized
There are several versions created for different categories of users. One of them is called Google Chrome Developer Edition. What kind of version is this and why is it needed? This is what will be discussed in this material.
It is worth noting that alternative builds of Chrome have appeared for a long time. They accompany this popular browser almost from the launch version. But not all users are suitable for alternative options.
The fact is that “other” builds of Chrome are intended for professionals in one field or another: layout designers, testers, developers, and so on. Such browsers are not suitable for ordinary users. And yet, we need to talk about them.
What versions of Chrome are there?
In fact, there are not so many of them. However, there is only one stable one. This is exactly the one that is laid out in free access. Any user can download it. But there are also alternative versions. Let's take a closer look at them.
These are the versions of everyone’s favorite Google Chrome that exist. However, in this context we are interested in the Developer Edition. Therefore, everything needs to be considered key features this version for more details. Only then can a conclusion be made.
Developer Edition Features
A key feature of this version of Google Chrome is the availability of development tools. They will be useful to those who develop extensions and plugins for this web browser. The average user will get lost in such tools.
The second feature is the advanced console. It is used to edit the code and enable hidden functions browser. However, you need to know how to work with it. The slightest mistake in a team can lead to very dire consequences. 
Another “trick” is the presence of all the latest innovations that migrated to this version from Canary. Thanks to this, developers can optimize their extensions for new web browser capabilities.
Frequent updates– one more distinguishing feature Developer Edition. They come irregularly, but no later than once every two weeks. In some cases, updates may arrive within two days. This is convenient for those who are testing new features of the web browser.
Conclusion
So, above we talked about what versions of Google Chrome there are and discussed in detail the build for developers. Now it is clear that this version is distinguished by a set of tools and an advanced console.
It is worth noting that ordinary users There is no need to install Developer Edition at all. There will be no sense from this. Moreover, this assembly is not particularly stable. If you are not a developer, then it is better to use Stable.
With growing popularity Google browser Chrome extensions are appearing that save web developers time by giving them the ability to track errors and site performance issues.
Here are some useful extensions for Google Chrome.
Web Developer Extension
I would like to point out the most convenient and powerful tool for web developer and web designer - Web Developer extension for Google Chrome.
The extension is added to the Google Chrome toolbar in the form of a button with a gear icon and contains various tools for developing and debugging a website. This is an official adaptation of the popular one, written by the same developer.
The extension has large number options.
For example, many people just need find out the color of the element on the monitor screen in hexadecimal format. The plugin has a special function for this. In the Miscellaneous section, select Display Color Picker.
By selecting Display Color Picker, the cursor becomes a cross. Now, clicking on any area of the screen in the lower right corner of the browser displays the color in hexadecimal for use in CSS.
It's no secret that today's websites use Cascading Style Sheets (CSS) to contain the parameters of all page elements. CSS specifies fonts, sizes of objects, frames, pictures, blocks and tables. We decided to put together a selection for you Google add-ons Chrome, which will allow you to edit the style of any page on the Internet. As a bonus, we will show you how to change the page background.
Every person has their own preferences and interests, especially when it comes to web design. Just remember the eternal holiwars after every YouTube update. Yes, and you probably have several comments about the display of information on your favorite site: somewhere the font is ugly or small, somewhere there is a completely unnecessary notification block. This is where it would be nice to add a background image!
Today's browsers allow you to edit websites in just a few clicks. The user can customize anything, right down to the location and order of elements on the page. For this purpose, special extensions and additions were written, which we will analyze before proceeding with the change. home page Google.
Stylebot
Perhaps the most popular extension with open source code. Allows you to edit fonts, colors, sizes and more on the fly. Has a simple editing mode: when open window With Stylebot, you can select the element you want by simply hovering over it with your mouse. Changes are saved instantly, and custom styles can be shared with friends.
Web Override
An application for connecting Javascript scripts to external websites. Already contains jQuery, async.js, moment.js and Lodash, so the functions of these libraries can be freely used. Suitable for advanced users who know how to use Javascript, but beginners can use the extension to implement scripts already written by someone else.
Styler
The principle is the same as that of Stylebot: we quickly edit the page style, the changes are saved instantly. The interface and sequence of actions are slightly different, with slightly fewer possibilities. So the choice is yours: what you like best.
Stylish
The most powerful tool for website customization, similar in capabilities to Stylebot. Allows you to hide unnecessary elements, edit styles, and share the result with friends. The add-on website contains over 10,000 custom styles to change the look of Facebook, YouTube, App Store and many other popular resources.
Live CSS Editor
By pressing the key combination, it opens a small window where the user can enter any style, which will be immediately applied to the page (after closing, the changes are saved). Simple and convenient: nothing superfluous.
We’ll tell you, as promised, how to edit the background of any page using Stylebot as an example.
Important! This method looks beautiful on “light” pages that are not overloaded with blocks and menus and is presented only to familiarize yourself with the capabilities of add-ons. We recommend trying it on Google.com.
- go to the required page
- Click on the Stylebot icon in the upper right corner of Chrome
- click Open Stylebot
- at the bottom select the Edit Css option
- Enter the following code:
body (
background: url(https://dl.dropboxusercontent.com/u/28029149/NGC_2818_by_the_Hubble_Space_Telescope.jpg) ;
background-size: 100% 100%;
!important;
}
- close Stylebot
Ready! Instead of the image given as an example, you can use any other one (you just need to replace the link in the code above). For more complex site customization, you will have to read CSS manuals, but believe me: there is nothing complicated about it.
Good afternoon dear friends.
Continuing the week-long marathon of reviews about useful tools— I can’t help but mention the best extensions for web designers and web programmers for the most better internet browser Google Chrome. Why do I think it's the best? Because it is modern, fast and the most secure, and I also love it for its minimalism. But today is not about that. And so we go to full version articles.
Review of the best extensions for Google Chrome
Today, a lot of users are developing extensions. They are simply huge amount and every time they become not only more powerful and functional, but also significantly helps us increase our productivity. I will be doing a series of articles about best extensions for Google Chrome. For today I will focus on extensions that are easy to install and useful for web designers and developers. Hopefully some extensions Chrome It will also be useful for you, dear readers.
Best extensions Google Chrome for web designers and developers:
Allows you to very easily determine which fonts are used on pages.
Description:
With this extension you can determine which web fonts are used on the site. It's very simple and fast. Extension supports Typekit And Google Font API.
Fantastic light ruler for alignment and measurement of elements and blocks on sites.
Description:
Get dimensions easily: with horizontal and vertical drag ruler, pixels, peaks and measurement types. You can use up to 4 rulers at the same time with different colors and types: wooden and steel.
“Every web designer should have this Chrome extension with them.”
Screen Capture (by Google)
Quickly capture the visible content of a tab, an area of a web page, or an entire page. Saving in PNG format. Supports vertical and horizontal scrolling.
Description:
This is a very easy to use extension for capturing images from monitor screens. You can capture an image from either the active tab, an area of a page, or an entire page as a PNG image.
Shows all related images on the site and allows you to download them.
Description:
If you need to download from web pages, with this extension you can easily: view images, sort by URL. You can download the appropriate images by marking them with checkboxes or by clicking on the images, then they will open in a new tab. Display width settings, border size, style and color, hide filters, buttons and notifications - everything you need can be customized!
RescueTime is an excellent analytical extension that will help you understand how you spend your time.
Description:
RescueTime is a personal analytical service that will help you understand how you spend time on your computer, smartphone or tablet. You will not be required to enter any manual data. The web application interacts with the installed client and runs on OS X, Windows, Linux, Android devices, and ChromeOS.
Pinterest for Google Chrome
Discover, collect and share inspiration
Description:
Pinterest is a service for finding inspiration and sharing it with other designers and developers. Use it to collect a collection of things that inspire you, organize and plan your projects.
The official Pinterest extension for Google Chrome will add a button to your browser that allows you to interact with the service. Fast and easy!
Adds a toolbar button with various web developer tools to the browser. This is the official port of the expansion, which was originally written for Firefox.
Adaptation of website appearance.
Description:
Allows you to quickly change the look of any website (using custom CSS).
In the editor, you select any changes you want to make to the element. You can also change the font size, color and much more. Experienced users can write their CSS tables manually.
Using Stylebot you can customize appearance your favorite websites. It is also an excellent tool for learning CSS and for debugging the design of your own projects.
The official Alexa Traffic extension for analyzing the page and traffic from pages.
Description:
Alexa Traffic Rank is an official free extension for Chrome. You will be able to view full information about any site on the Internet. Compare and analyze easily and simply.
A browser extension that allows you to select and view a color code from any page.
Description:
Using the eyedropper tool, you can view the color code from any website. There is a built-in history of your measurements. Works in both Chrome and Chromium.
Extension for developers to test web pages at different screen resolutions.
Description:
An extension for developers to test web pages at different screen resolutions, with the ability to define their own resolution settings.
Resolution resizes your browser window to view your websites in different screen resolutions. There is a list of the most commonly used screen resolutions and the ability to customize this list.
Speed Tracer (by Google)
Get an idea of website speed with this extension.
Description:
Speed Tracker This is a great tool designed to help you identify and fix performance problems in your web applications. It collects information and makes analysis of indicators that are taken at a low level of your browser.
Using this extension will allow you to receive information about where the most time is wasted in your application. These could be problems caused by: Javascript, css, Dom event handling, loading network resources, XMLHttpRequest callback, large images and much more.
Firebug Lite for Google Chrome
Firebug Lite for Google Chrome is an official extension from the Firebug Working Group.
Description:
Firebug Lite is not a replacement for Firebug or Google Developer Tools. This is an extension that will play well with these tools. Firebug Lite provides the rich visual presentation we're used to seeing in Firebug when it comes to HTML elements, DOM elements, and Box Model shading. It also provides some interesting features such as checking HTML elements with the mouse and live editing of CSS properties.
Corporate Ipsum
Generating random text to fill layouts.
Description:
A lorem ipsum generator with a corporate twist. Creates filler by content or paragraph.
This is a clone (with permission) of corporate Ipsum by Brian Haslanger.
Conclusion:
In this article I described the first 15 extensions For Google Chrome, which I use myself in everyday work. I hope a couple are useful to you too. I will be glad to hear about extensions in the comments. which you use, dear friends! My name is Viktor Dotsenko. All the best!