SitesLinksOttawaLifePhotosTravelToolsJournalBlog
See More Stuff
Monday, February 24, 2014

Home Button At Top Right Chrome Extension

Install this extension in your Chrome browser by clicking this link (in your Chrome browser) then clicking the "Add to Chrome" button at the top right of the displayed app info.

Once installed, a home button will appear at the top right of Chrome that initially redirects your current tab to google.com. Right-click the button and choose Options to edit the home-page url.

This version only uses the tabs permission, so when you install, it will say that the extension can: "Access your tabs and browsing activity". This extension never monitors your activity. It only redirects your tabs. The source code is very simple and is posted online, so you can inspect it for yourself.

In response to Chrome's Feb 2014 removal of the flag that let you default your new tab to the Apps view (see here and here), I've added a checkbox that lets you default the new tab to the Apps view. I didn't try the other listed extensions because I don't trust unknown source to run in my browser. For that same reason I've posted my source here.

Use the "Feedback" button at the top of this article if you want to ask any questions. Be sure to include contact info if you want a reply.

See also: New Tab As Apps Chrome Extension

manifest.json

{
  "manifest_version": 2,
  "name": "Home Button At Top Right",
  "description": "Provides a button at the top-right of Chrome that links to your home page. Also lets you default new tabs to the Apps view.",
  "version": "1.5",
  "permissions": ["tabs"],
  "background": { "scripts": ["background.js"] },
  "browser_action": { "default_icon": { "19": "icon.png" } },
  "icons" : { "16": "icon16.png",
              "48": "icon48.png",
             "128": "icon128.png" },
  "options_page": "options.html"
}

background.js

var url = localStorage["url"];
if (url == null) { url = "https://google.com"; }

var apps = localStorage["apps"];
if (apps == "true") { apps = true; }
else { apps = false; }

function updateUrl() {
  url = localStorage["url"];
  if (url == null) { url = "https://google.com"; }
}

function updateApps() {
  apps = localStorage["apps"];
  if (apps == "true") { apps = true; }
  else { apps = false; }
}

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.update( tab.id , { 'url' : url } );
});

chrome.tabs.onCreated.addListener(function(tab) {
  if (apps && tab.url == "chrome://newtab/")
  { chrome.tabs.update( tab.id , { 'url' : 'chrome://apps/' } ); }
});

options.html

<html>
<head>
 <title>Home Button Options</title>
 <style>
 div, input, button {
  font: 1em 'Open Sans',arial,sans-serif;
 }
 </style>
</head>
<body>
<br/>
<div style="position: relative; left: 50%; float: left;">
 <div style="position: relative; left: -50%; float: left;">
  <b>Home:</b>
  <input type="text" id="url" style="width: 300px; margin: 0 0.5em 0 0.5em; padding: 0.2em;"/>
  <button id="save">Save</button>
  <div style="padding: 0.5em 0 0.5em 0"><input type="checkbox" id="apps"> Make new tab default to "Apps" view.</div>
  <div id="status"></div>
 </div>
</div>
</body>
<script src="options.js"></script>
</html>

options.js

// Save options to localStorage.
function save_options()
{
  localStorage["url"] = document.getElementById("url").value;
  chrome.extension.getBackgroundPage().updateUrl();

  localStorage["apps"] = document.getElementById("apps").checked;
  chrome.extension.getBackgroundPage().updateApps();

  // Let the user know the options were saved.
  var status = document.getElementById("status");
  status.innerHTML = "Options Saved.";
  setTimeout( function() { status.innerHTML = ""; }, 2000 );
}

// Populates options GUI from from localStorage.
function load_options()
{
  var url = localStorage["url"];
  if (url == null) { url = "https://google.com"; }
  document.getElementById("url").value = url;

  var apps = localStorage["apps"];
  if (apps == "true") { apps = true; }
  else { apps = false; }
  document.getElementById("apps").checked = apps;
}

// call load_options top populate the GUI when the DOM has loaded
document.addEventListener('DOMContentLoaded', load_options);

// call save_options when the user clicks the save button
document.getElementById("save").addEventListener('click', save_options);

Update Aug 2014

Federico provided an enhancement which opens any number of pages you defined as home pages by using the pipe (|) symbol as a separator. I haven't included this in the free copy posted in the chrome store, but you can implement it yourself.

chrome.browserAction.onClicked.addListener(function(tab) {
  var spliturls = url.split("|");

  // open first url in current tab
  chrome.tabs.update( tab.id , { url : spliturls[0].trim() } );

  // then open a new tab for any number of additional homepages
  for (var x = 1; x < spliturls.length; x++) {
    chrome.tabs.create({ url : spliturls[x].trim() });	
  }
});
web