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

griimnak

You're a slave to the money then you die
Jul 20, 2013
955
794
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.
( )



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


Showcase
gQuUK2-lT8aZIO_gz2uXVw.png


2u0tSTOcRl_d34ylmS3kiw.png


70K1vKDvQTWCSlx9lKQqaQ.png


Snippets
Using the chrome.storage api
PHP:
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
PHP:
  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
PHP:
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
  • Navigate to chrome://extensions
  • Enable Developer mode
    NsEaWmfASQSl3X3oZGy9sw.png

  • Click `Load unpacked extensions...` and select the folder that contains OpenPureTab (extracted) with `manifest.json`.
  • Done! Open a new tab and follow setup:
    2-Vx51ynSTCitvrDb2603A.png
 
Last edited:

MayoMayn

BestDev
Oct 18, 2016
1,423
683
Damn looks good... but I'm still confused on what the purpose of this extension is :D
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
 

griimnak

You're a slave to the money then you die
Jul 20, 2013
955
794
Committed

Added favicons to topsites display & fixed css bugs
PHP:
<img src="https://www.google.com/s2/favicons?domain=${url}" />

Added another style
"Ball" style
PHP:
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)
PHP:
    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

JFegmvXbTTGOfaZQJ9k8jA.png


Damn looks good... but I'm still confused on what the purpose of this extension is :D
Just customization and aesthetics for newtab without Indian garbage :p

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
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
9gB3YU-5QaWLZbc-oU9i8A.png


KmB2G53hSICXV5qYPZAHEw.png

PHP:
/*

  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

PHP:
/*

  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
PHP:
/*

  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
rjN0juBgSQGLXDCotI8yaA.png


Improved Ball style, chrome style and added Tiny style
ygUTt2zWRJW3Ft9Wc1zn_Q.png


LT9N4x1TTdGM5LdbYc_O7Q.png

Cd5q8FYiSzaThuNh-bM0bg.png
 

griimnak

You're a slave to the money then you die
Jul 20, 2013
955
794
OpenPureTab 1.5-Rewrite
Heyloo.
I'm revisiting this project to rewrite the base and update it with the new Chrome69+ look.
Github:

(Original branch now marked as stable)

Committed to new branch
  • New structure
    Python:
    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



Chrome69+ Style
All CSS written scratch by yours truely.

S_YXExqqQvO9oc3ntC1DyA.png


6JV3KLifQyGjCerd2izeHA.png
 
Last edited:

griimnak

You're a slave to the money then you die
Jul 20, 2013
955
794
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 :



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.
 
Last edited:

griimnak

You're a slave to the money then you die
Jul 20, 2013
955
794
g7Uakgj.gif

- Snowstorm added for holidays
- Changed #fff to #f1f3f4 (original chrome69 doesn't use #fff)
- Changed {url} to chrome://favicon/size/24@1x/{url} (might aswell right?)
- being used for background selector, not implemented yet.

Committed to
 

Users who are viewing this thread

Top