Google Chrome Browser | UA - User Agents

Tips

To debug an api on another server in your browser without using CORS? open -a Google\ Chrome --args --disable-web-security

Chrome Features

Sandbar

Sandbar is the black bar that sits atop Google sites, it was rolled out in 2011. Sandbar and the gray bar below it (that has Google search input and Google link icons) together make Google's top navigation bar.

Tabs

All the recent closed tabs can be viewed through the menu History > Recently Closed Tabs. Alternatively, you can right click on any tab and select to reopen last closed tab. Much faster way to reopen only last tab is using keyboard shortcut Ctrl+Shift+T. Keep holding down Ctrl+Shift and press T repeatedly for reopening upto last 10 closed tabs.

A new tab in Google Chrome displays list of recent three closed tabs at bottom of the blank page. However to view more recent closed tabs and other information about them either go to Tools > History or used keyboard shortcut Ctrl+H.

Alternate way is to type chrome://history/ at address bar.

Address bar aka Omnibox

Chrome's address bar/omnibox can also be used as search box; it autocompletes as you type, offers suggestions, and can even load results instantly if you enable Chrome Instant.

When you type in the address bar, the bar automatically shows you matches from your apps, bookmarks, and browsing history. Additionally, Google Chrome can use a prediction service to show you related search terms and websites. These icons in the address bar help differentiate between the different items you may see:

• The icon appears next to bookmarked sites.
• The icon appears next to searches, including related searches if you have the prediction service turned on.
• The icon appears next to matches from your browsing history, or related sites when you have the prediction service turned on.
• The icon appears next to web apps you've installed from Chrome Web Store.

Bookmarks in the Address Bar

To save a web document, click at the right end of the address bar to create a bookmark.

Alerts in the Address Bar

Chrome will display icons in the address bar if there are things about the web document that it thinks you should know about; click on them in the address bar for more details. Address Bar alerts include:

Security Alerts

If the site you are on is properly encrypted you'll see at the beginning of the address bar; if the site's identity cannot be verified you will see the icon. Clicking on the icons will provide more deatils about the site's security.

Pop-up Alerts

You'll see whenever Chrome blocks a pop-up; clicking on it will display blocked pop-ups as well as pop-up settings.

Extension Alerts

Extensions have the ability (thought not all do) to show an icon in the address bar whenver you're on a web document with a certain type of web content; clicking on the icon triggers the extension

Address Bar aka Omnibox has a variety of uses described below:

• Search the Web
  • Generic Search: Enter Search Term(s), Press Enter, Results are Displayed.
  • Search Specific Sites
  • Search More Efficiently: Enable Chrome Instant
• Search Bookmarks, Browsing History, Related Items
  • Appears Next to Sites that Have Been Bookmarked
  • Appears Next to Searches (Including Related Searches with Prediciton Service Enabled)
  • Appears Next to Matches in Browsing History, or Related Sites with Prediciton Service Enabled
• Create Bookmarks
  • Click at the Right End of the address bar to create a bookmark.
• Alerts Regarding the Document Being Visited
  • appears next to the address bar if Chrome detects the document is properly encrypted for security.
  • appears next to the address bar if Chrome cannot verify the security of the document being visited.
  • appears in the address bar whenever Chrome blocks a pop-up; Click on in the address bar to view the pop-ups that have been blocked, or to manager pop-up settings for a particular site/document.

Search Using the Address Bar (Omnibox)

Address Bar Predictions

With predictions enabled, Chrome will attempt to autocomplete web addresses and search terms you're entering.

Note: to differentiate between a web address and a search, Chrome places a Blank Page Icon next to web addresses in the address bar.

Get Predictions in the Address Bar

Omnibox api

The omnibox api allows you to register a keyword with Google Chrome's address bar, which is also known as the omnibox. When the user enters your extension's keyword, the user starts interacting solely with your extension. Each keystroke is sent to your extension, and you can provide suggestions in response. The suggestions can be richly formatted in a variety of ways. When the user accepts a suggestion, your extension is notified and can take action.

omnibox

Chrome Web Store Apps

What Are Packaged Apps?

Create Application Shortcuts in Chrome

You can create application shortcuts to the sites that you frequent, and select Chrome Web Store apps; they can be placed on your desktop//menus (wherever...you can customize it for you) for quick and easy access.

Creating Application Shortcuts from Chrome Web Store Apps

1. Click the icon at the top of the browser window to open the New Tab page.
2. Right-click an app icon in the App section of the page.
3. Select Create shortcuts.
4. Select the location desired for placing the shortcuts upon creation.
5. Click Create.

Chrome App Launcher

Chrome App Launcher is a hub for all Chrome apps, providing access to all app via desktop. Install an app from the Chrome Web Store, there will be an option to get the App Launcher.

Note: the app launcher requires the user to be signed into Chrome to enable apps access to the user's Google account.

Themes

A theme is a special kind of extension that changes the way the browser looks. Themes are packaged like regular extensions, but they don't contain JavaScript or html markup. The Web Store has a bunch of themes available to choose from.

ThemeCreationGuide - rhw Google Chrome Extensions Help Docs provided some info on how to create theme as an extension, but for a pure designer, the details of the *.cc file can be overwhelming and confusing. Also, having a clear documentation, enables a new designer to start designing on the go! (Also makes life easier... he he he).

Example Theme manifest.json

Here is an example manifest.json file for a theme:

{
  "version": "2.6",
  "name": "camo theme",
  "theme": {
    "images" : {
      "theme_frame" : "images/theme_frame_camo.png",
      "theme_frame_overlay" : "images/theme_frame_stripe.png",
      "theme_toolbar" : "images/theme_toolbar_camo.png",
      "theme_ntp_background" : "images/theme_ntp_background_norepeat.png",
      "theme_ntp_attribution" : "images/attribution.png"
    },
    "colors" : {
      "frame" : [71, 105, 91],
      "toolbar" : [207, 221, 192],
      "ntp_text" : [20, 40, 0],
      "ntp_link" : [36, 70, 0],
      "ntp_section" : [207, 221, 192],
      "button_background" : [255, 255, 255]
    },
    "tints" : {
      "buttons" : [0.33, 0.5, 0.47]
    },
    "properties" : {
      "ntp_background_alignment" : "bottom"
    }
  }
}

Packaging

Extensions are packaged as signed zip files with the file extension ".crx" (myeextension.crx).

Note: packaging your extension is unnecessary unless you are distributing a non-public version, say for alpha testers and whatnot.

Extensions

Extensions are extra featurea and functionality users can easily add to Chrome. Extensions allow users to customize Chrome with features important to them, and more importantly, allows users to keep Chrome free of things that are not useful to them.

Extensions Features

Get bonus information about a page.

Extensions can enhance the page you’re on with relevant links and information.

For instance, using the Select to get maps extension, highlight an address on the page to get instant directions and map links. extension screenshot

Get Timely Notifications.

Extensions can add a button next to Chrome's address bar to serve up alerts as soon as they are available.

The screenshot below shows Google Mail Checker Extension in action, showing an alert notification to the user that *something/some event/some alert* has occured.

Extensions as Shortcuts

Extensions can act like shortcuts, which permit users to "Do things with fewer clicks"; rss Subscription Extension automagically alerts you if there's a feed in the document you are browsing by showing a wee rss icon in the address bar. To quickly subscribe to the feed, click on the icon.

Visit the Extensions section in the Chrome Web Store to peruse more available.

Chrome Web Store - Extensions

Find Bar

Find Bar is used to locate word(s), or phrase(s) in a document; you can use the Chrome Menu to access it, however the keyboard shortcut is so darn easy: Ctrl+F/⌘-F.

Chrome searches the document as you type, potential matches are highlighted in yellow in the document, as well as highlighted on the scrollbar, showing you where the matches are located in the document.

⌘-F

Bookmarks

Google Chrome Bookmarks are separate from those saved in Google Bookmarks; currently not possible to sync the two (wtf), there is a bookmarklet that easily creates Google Bookmarks in Google Chrome; snag it below:

google.bookmarks

javascript:
  (function(){
    var a=window,
    b=document,
    c=encodeURIComponent,
    d=a.open("http://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk="
      +c(b.location)+
      "&title="+c(b.title),
  "bkmk_popup",
  "left="+
  ((a.screenX||a.screenLeft)+10)
  +",top="+
  ((a.screenY||a.screenTop)+10)+",
  height=420px,
  width=550px,
  resizable=1,
  alwaysRaised=1");
  a.setTimeout(
    function(){
    d.focus()},
  300)})
();

Use the bookmarklet above to save web documents to your Google Bookmarks Page.

Import/Export Bookmarks

Bookmark Manager

Bookmark Manager organizes your bookmarks and folders; accessible by clicking on the Chrome Menu on the browser toolbar or right clicking and selecting bookmark manager in the context menu. Some of the Bookmark Manager's features are described below:

• Move Bookmarks/Folders Around

  Simply click the item you want to move and drag it to its new destination within the folder list on the left.

• Edit Bookmark/Folder Name; Bookmark Web Address

  Select the item you'd like to edit, click the Organize menu, then select Edit. You can also easily edit bookmarks and folders from the bookmarks bar by right-clicking the item in question and selecting Rename.

• Search bookmarks

  Use the search box at the top to quickly find a bookmark within the manager.

• Add a new bookmark folder

  In the folder list on the left, right-click the location where you want the new folder to reside and select Add folder.

• Delete a bookmark or folder

  Right-click the item and select Delete.

Bookmarks Bar

Bookmarks Bar contains all bookmarks/bookmarks folders.

Bookmarks Bar Docking

Bookmarks Bar is dockable directly underneath the address bar at the top of the browser window for easy acess to your favorite sites. Follow simple list below to enable docking:

1. Click Chrome Menu on the Browser Toolbar
2. Select Bookmarks
3. Select Alwasy Show Bookmarks Bar

Note: or you could just use keyboard shortcuts: Ctrl+Shift+B (Windows and Chrome OS) and ⌘-Shift-B (Mac) to toggle the bar on and off.

Chrome Developer

Chrome Developer Dashboard

Icons

Alternates

Infobars

Full Screen Shot Full Screen Shot Full Screen Shot

Don't Use Dot Operator When Naming JavaScript Files in Chrome

Website settings

Permissions

Use the "Permissions" section to manage site specific settings. The following actions may apply to various sites you visit and you can adjust these actions by clicking the downward arrow to the right of each feature.

Chrome Permissions

Icon	Definition
	Images are allowed by default. To prevent images from displaying, select "Always block on this site."
	JavaScript is commonly used by web developers to make their sites more interactive. If you choose to disable JavaScript, you may find that some sites don't work properly.
	Plug-ins are used by websites to enable certain types of web content (such as Flash or Windows Media files) that browsers can't inherently process. They're allowed by default. Learn more about managing plug-ins
	Pop-ups are blocked by default from appearing automatically and cluttering your screen. Learn more about managing pop-ups
	Location: Google Chrome alerts you by default whenever a site wants to use your location information. Learn more about location sharing
	Notifications: Some websites, such as Google Calendar, can show notifications on your computer desktop. Google Chrome alerts you by default whenever a site wants permission to automatically show notifications.
	Fullscreen: Some websites might request to open in fullscreen mode. You can choose how Chrome handles this type of request.
	Mouse Lock: Some sites or web apps might request to disable your mouse cursor, such as games. You can choose how Chrome handles this type of request.
	Media: Sites with media functionality, such as video conferencing, can request access to your camera and microphone. Learn more about camera and microphone access

Connection

Upon connecting to a site, Chrome can show you details about your connection and alert you if it’s unable to establish a fully secure connection with the site.

SSL Icons

Chrome displays icons to the left of a site's url in the address bar indicating the level of (including non) SSL being used by the site.

Note: look for this if you are entering sensitive personal information into a document.

SSL Icons

Icon	Definition
	The site isn't using SSL. This icon displays for http:// sites. Most sites don’t need to use SSL because they don’t handle sensitive information. Avoid entering sensitive information, such as your credit card information or bank login information, on the page. If sensitive information is being requested on a site not using SSL, consider contacting the website owner.
	Google Chrome has successfully established a secure connection with the site. Look for this icon and make sure the URL has the correct domain, if you’re required to log in to the site or enter sensitive information on the page. If a site uses an Extended Validation SSL (EV-SSL) certificate, the organization's name also appears next to the icon in green text.
	The site uses SSL, but Google Chrome has detected insecure content on the page. Be careful if you’re entering sensitive information on this page. Insecure content can provide a loophole for someone to change the look of the page.
	The site uses SSL, but Google Chrome has detected either high-risk insecure content on the page or problems with the site’s certificate. Don’t enter sensitive information on this page. Invalid certificate or other serious https issues could indicate that someone is attempting to tamper with your connection to the site.

SSL Warning Messages

If Chrome detects a site you're visiting could be harmful, it'll throw a warning message up over the site. These messages are:

SSL Warning Messages

Warning Message	Definition
This is probably not the site you are looking for!	This message appears when the URL listed in the site's certificate doesn't match the site's actual URL. The site you're trying to visit may be pretending to be another site. Learn more about this warning
The site's security certificate is not trusted!	This message appears if the certificate wasn't issued by a recognized third-party organization. Since anyone can create a certificate, Google Chrome checks to see whether a site's certificate came from a trusted organization. Learn more about this warning
The site's security certificate has expired! or The server's security certificate is not yet valid!	These messages appear if the site's certificate is not up-to-date. Therefore, Google Chrome can't verify that the site is secure.
The server's security certificate is revoked!	This message appears if the third-party organization that issued the site's certificate has marked the certificate as invalid. Therefore, Google Chrome can't verify that the site is secure.

Picture Dump

Chrome urls

• chrome://about:internets
• chrome://about:crash
• chrome://about:stats
• chrome://about:memory
• chrome://about:network
• chrome://about:memory
• chrome://about:plugins
• chrome://about:version
• chrome://about:stats
• chrome://about:histograms
• chrome://about:dns
• chrome://about:cache
• chrome://extensions-frame/
• chrome-extension://
• url for Web Developer Chrome Extension Options

References and Resources

• Use the Address Bar (Omnibox)