Saturday, December 14, 2019

Home Button At Top Right Chrome Extension

Get this extension

Follow the above link in your Chrome browser then click 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 the list of your most used sites. Right-click the button and choose Options to edit the home-page url, the icon, and the new-tab behaviour.

You can hide the official home button at top left via: Chrome Settings > Show home button > Disabled.

This extension only uses the tabs permission, so when you install, it will say that the extension can: "Read your browsing history". This extension never monitors your activity. It only redirects your tabs when requested. 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, I've added a checkbox that lets you default the new tab to the Apps view.

In Dec 2019 the new-tab-to-apps stopped working, so I updated the extension with a fix. At that time I also added Federico's code to support multiple urls. And I acted on Darren's suggestion to make the default url "about:newtab", and to offer a white button for the dark theme.

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.6",
  "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 = "about:newtab"; }

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

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

/////////////////////////////////////

function updateUrl() {
  url = localStorage["url"];
  if (url == null) { url = "about:newtab"; }
}

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

function updateDark() {
  dark = localStorage["dark"];
  if (dark == "true")
  { 
    dark = true; 
    chrome.browserAction.setIcon({path:"icon_dark.png"});    
  }
  else 
  { 
    dark = false; 
    chrome.browserAction.setIcon({path:"icon.png"});    
  }
}

/////////////////////////////////////

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() });	
  }
});

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

if (dark) {
  chrome.browserAction.setIcon({path:"icon_dark.png"});    
}

options.html

<html>
<head>
 <title>Home Button Options</title>
 <style>
 div, input, button {
  font: 1em 'Open Sans',arial,sans-serif;
 }
 div {
  padding: 0.5em 0 0.5em 0
 }
 </style>
</head>
<body>
<br/>
<div style="position: relative; left: 50%; float: left;">
 <div style="position: relative; left: -50%; float: left;">
  <p>Use pipe for multiple pages: <i>https://www.google.com/|https://www.apple.com/</i></p>
  <p>Use <i>about:newtab</i> for most-used pages.</p>
  <div><b>Home:</b><input type="text" id="url" style="width: 300px; margin: 0 0.5em 0 0.5em; padding: 0.2em;"/></div>
  <div><input type="checkbox" id="apps"> Make new tab default to "Apps" view.</div>
  <div><input type="checkbox" id="dark"> Use white icon for dark theme.</div>
  <div><button id="save">Save</button></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();

  localStorage["dark"] = document.getElementById("dark").checked;
  chrome.extension.getBackgroundPage().updateDark();

  // 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 = "about:newtab"; }
  document.getElementById("url").value = url;

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

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

// 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);
web
{ "url": "https:\/\/holtstrom.com\/michael\/", "base": "\/michael", "domain": "holtstrom.com", "loggedin": false, "avatar": "", "render": "nothing", "doTracking": true, "trackingID": "UA-36983794-1", "description": "", "tmdbUrl": "http:\/\/www.themoviedb.org\/", "tmdbPoster": "http:\/\/image.tmdb.org\/t\/p\/w342" }