Show DevBest [WIP] OpenPureTab - An open source extension for Chrome-based browsers that allows customization of the new-tab page.

[griimnak]

OpenPureTab 1.0​

OpenPureTab is an extension for Chrome-based browsers that replaces the default new-tab page with a free and open sourced one, with tons of customization.

I started this project because I wanted to add some aesthetics to my new tab page without compromising my privacy or security to shady extensions on the Chrome Web Store.
(

You must be registered for see links

)

You must be registered for see links

Features

• Open and well-documented source code
• Lightweight, dependency free
• Plenty of customization
• Simple and straight to the point, not in your face

Showcase

Snippets
Using the chrome.storage api

var settings = {};

/* Validate settings */
function loadSettings() {
  // Check if chrome storage is supported
  if (!chrome.storage.sync) {
    alert("Chrome storage is not accessible :(");
  }

  chrome.storage.sync.get(function(keys) {
    console.log(keys);
    // openSetupScreen if any keys are empty
    if (isEmpty(keys)) {
      console.log('Welcome! Opening first time setup..');
      openSetupScreen();
    } else {
      settings = keys;

      draw();
    }
  });
}

Setting storage values with chrome.storage api

  function validate() {
    // Fallback
    if (location == '') {
      location = "New York"
    } else {
      location = form['location'].value;
    }

    chrome.storage.sync.set(
      // Overwrite all keys
      {
        "name": name,
        "location": location,
        "theme": theme,
        "background": {
          "type": bg,
          "value": bgval
        },
        "widget_topsites": widget_topsites
      },
      function() {
        alert('Changes saved successfully.');
      }
    );
  }

Using the chrome.topSites api

var data = {};

function topSitesWidget() {
  chrome.topSites.get(function(response) {
    data = response;

    if (settings.widget_topsites == "enabled_default") {
      drawChromeStyle();
    } else if (settings.widget_topsites == "enabled_style1_top") {
      drawStyle1Top();
    } else if (settings.widget_topsites == "enabled_style1_bottom") {
      drawStyle1Bottom();
    } else if (settings.widget_topsites == "enabled_ball") {
      drawBallStyle();
    }
  });
}

Dev Installation

• Clone / Download
  You must be registered for see links
• Navigate to chrome://extensions
• Enable Developer mode
  
  
  
  
• Click `Load unpacked extensions...` and select the folder that contains OpenPureTab (extracted) with `manifest.json`.
  
• Done! Open a new tab and follow setup:
  
  

 

[MayoMayn]

Damn looks good... but I'm still confused on what the purpose of this extension is
Also I'd suggest using the Mozilla Browser Extension Polyfill API so you can use the same source code for multiple browsers.
Or better yet use

You must be registered for see links

 

[griimnak]

Committed

Added favicons to topsites display & fixed css bugs

<img src="https://www.google.com/s2/favicons?domain=${url}" />

Added another style
"Ball" style

function drawBallStyle() {
  function appendBallStyle(title, url, inner) {
    var html = `
      <a href="${url}" class="tile">
        <img src="https://www.google.com/s2/favicons?domain=${url}" />
      </a>
    `;

    document.getElementById("topsites-ball").innerHTML += html;
  }

  var inner = `
    <div class="topsites-ball">
      <div id="topsites-ball" style="margin:0 auto;padding-left:5px;">

      </div>
    </div>
  `;

  content.innerHTML += inner;
  for(var i=0;i<data.length;i++) {
    appendBallStyle(data[i].title, data[i].url);
  }
}

More settings (defaults displayed below)

    var keys =
    {
      "name": name,
      "location": location,
      "theme": theme,
      "background":{"type":"default","value":"default"},
      "widget_clock":"enabled_style1",
      "widget_ctext": {
        "enabled": "false",
        "value": ""
      },
      "widget_topsites": "enabled_ball"
    };

• Added ability to disable / enable clock
• Added ability to set custom text in place of clock

Damn looks good... but I'm still confused on what the purpose of this extension is

Just customization and aesthetics for newtab without Indian garbage

Also I'd suggest using the Mozilla Browser Extension Polyfill API so you can use the same source code for multiple browsers.
Or better yet use

You must be registered for see links

Ooh that looks pretty nice. At the moment i only have intentions of supporting chrome, but I will definitely look into that if i decide otherwise.
 
Committed

Thumbnail generator finished

/*

  Tab Query - Applies topSites thumbnails

  Compares current tab URL with data[z].url (Topsite urls)
  If data[z].url (Topsite urls) has an entry equal to active (current tab),
  Check for http vs https and match if found
  If active (current tab) exists in local storage, do nothing, otherwise
  take screenshot of matched tab and insert into local storage

*/
function queryTab(active, active_id) {
  var clean = active.replace(/^https:\/\//i, 'http://');
  for(var z = 0; z < data.length; z++) {
    if (data[z].url === active) {
      match(active, active_id);
    } else if (data[z].url === clean) {
      match(clean, active_id);
    }
  }

  function match(url, active_id) {
    chrome.storage.local.get(null, function(resp) {
      var toWork = resp.thumbs;

      var found = false;
      var i = 0;
      for (i in toWork) {
        if(toWork[i].url === url) {
          found = true;
        }
      }

      if (found == false) {
        found = true;
        captureAndSave();
      }
    });

    function captureAndSave() {
      chrome.storage.local.get(null, function(resp) {
        var parse_obj = resp;

        chrome.tabs.captureVisibleTab(function(dataUrl) {
          parse_obj['thumbs'].push({"url": url, "image": dataUrl});

          chrome.storage.local.set(parse_obj, function() {
            return true;
          });
        });
      });
    }
  }
}

Created background daemon
I'm eventually going to push message flashing here

/*

  Initialize OPT Daemon

*/
var data;
// Retreive topsites on extension load / browser restart
chrome.topSites.get(function(response) {
  data = response;
});

// Listen for tab updates
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
  if(changeInfo.status == "complete") {
    // Query tab when it is finished loading
    queryTab(tab.url, tabId);
  }
});

Message flashing re-write

/*

  Global message flashing

*/
function flash(message) {
  if (!chrome.storage.local) {
    alert("Local storage is not accessible :(");
  }

  function isEmpty(obj) {
    for(var key in obj) {
      if(obj.hasOwnProperty(key)) {
        return false;
      }
    }
    return true;
  }


  // Set flash message
  chrome.storage.local.set({"flashed_msg":message}, function() {
    chrome.storage.local.get({"flashed_msg":message}, function(data) {
      if (!isEmpty(data.flashed_msg)) {
        console.log('==> flash();');
        var html = `<div class="flash fadeInLoad">${data.flashed_msg}</div>`;
        document.getElementById("flashes").innerHTML = html;

        chrome.storage.local.set({"flashed_msg":""});
      }
    });
  });
}

Feel free to test out the thumbnail generator, could really use the help finding bugs, i'm sure there's going to be a few. I still suck at JSON key iteration
 
Committed

Support for google doodles

Improved Ball style, chrome style and added Tiny style

 

[M8than]

nice dev fam

will use

 

[griimnak]

OpenPureTab 1.5-Rewrite​

Heyloo.
I'm revisiting this project to rewrite the base and update it with the new Chrome69+ look.
Github:

You must be registered for see links

(Original branch now marked as stable)

Committed to new branch

• New structure
  

  images/
  scripts/
      daemon.js # Background daemon
      helpers.js # Helper functions
      content.js # Content script
  styles/ # css assets
      new-tab.css # Default css
  vendor/ # Third party / vendor assets
      ionicons/
  videos/
  widgets/ # Widget scripts
      topsites.js
  manifest.json
  new-tab.html

• Compartmentalization of assets and widgets
• content.js rewrite
• topsites.js rewrite
• New chrome69+ style
• New setup modal style (scratch)

Rewritten Code
Re written with javascript prototypes

You must be registered for see links

Chrome69+ Style
All CSS written scratch by yours truely.

You must be registered for see links

 

[TesoMayn]

What does this offer that the 1,000+ other ones do not?

 

[griimnak]

What does this offer that the 1,000+ other ones do not?

Well to start the 1,000+ others you speak of are closed source (unless they say otherwise).
Alot of them are shadily developed by indian devs who probably write worst code than me, and could have malicious intentions.

This is especially scary with a New-Tab extension because the nature of such extension replaces your new-tab screen and allows background scripts to run on ALL PAGES; Just like my daemon.js.

Here's some articles of allegedly malicious extensions :

You must be registered for see links

You must be registered for see links

Secondly, my new-tab is way more lightweight than others offered. I know this just because the fact that I'm writing all my CSS and JS from scratch. No dependencies whatsoever.
Lastly, I plan to have alot of customization options that will probably make this extension stand out compared to others.

 

[griimnak]

- Snowstorm added for holidays
- Changed #fff to #f1f3f4 (original chrome69 doesn't use #fff)
- Changed

You must be registered for see links

{url} to chrome://favicon/size/24@1x/{url} (might aswell right?)
-

You must be registered for see links

being used for background selector, not implemented yet.

Committed to

You must be registered for see links