The basics on how to build a Chrome Extension.

Readme.md

s

style.css

@media screen, projection {
  *, ::before, ::after {
    box-sizing: inherit;
  }
}
@media screen, projection {
  ul:not(.browser-default) {
    padding-left: 0px;
    list-style-type: none;
  }
}
@media screen, projection {
  .z-depth-1,
  nav,
  .card-panel,
  .card,
  .toast,
  .btn,
  .btn-large,
  .btn-floating,
  .dropdown-content,
  .collapsible,
  .side-nav {
    box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 2px 0px,
      rgba(0, 0, 0, 0.12) 0px 1px 5px 0px,
      rgba(0, 0, 0, 0.2) 0px 3px 1px -2px;
  }
}
@media screen, projection {
  .redditlabs-tabs {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    height: 48px;
    width: 100%;
    background-color: rgb(255, 255, 255);
    margin: 0px auto;
    white-space: nowrap;
  }
}
@media screen, projection {
  *, ::before, ::after {
    box-sizing: inherit;
  }
}
@media screen, projection {
  ul:not(.browser-default) li {
    list-style-type: none;
  }
}
@media screen, projection {
  .redditlabs-tabs .redditlab-tab {
    display: inline-block;
    text-align: center;
    line-height: 48px;
    height: 48px;
    padding: 0px;
    margin: 0px;

  }
}
@media screen, projection {
  a {
    background-color: transparent;
  }
}
@media screen, projection {
  *, ::before, ::after {
    box-sizing: inherit;
  }
}
@media screen, projection {
  a {
    color: rgb(3, 155, 229);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
}
@media screen, projection {
  a {
    text-decoration: none;
  }
}
@media screen, projection {
  .redditlabs-tabs .redditlab-tab a {
    color: rgba(238, 110, 115, 0.7);
    display: block;
    width: 100%;
    height: 100%;
    padding: 0px 24px;
    font-size: 14px;
    text-overflow: ellipsis;
    overflow: hidden;
    transition: color 0.28s ease;
  }
}
@media screen, projection {
  *, ::before, ::after {
    box-sizing: inherit;
  }
}
@media screen, projection {
  ul:not(.browser-default) li {
    list-style-type: none;
  }
}
@media screen, projection {
  .redditlabs-tabs .redditlab-tab {
    display: inline-block;
    text-align: center;
    line-height: 48px;
    height: 48px;
    padding: 0px;
    margin: 0px;
  }
}
@media screen, projection {
  a {
    background-color: transparent;
  }
}
@media screen, projection {
  *, ::before, ::after {
    box-sizing: inherit;
  }
}
@media screen, projection {
  a {
    color: rgb(3, 155, 229);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
}
@media screen, projection {
  a {
    text-decoration: none;
  }
}
@media screen, projection {
  .redditlabs-tabs .redditlab-tab a {
    color: rgba(238, 110, 115, 0.7);
    display: block;
    width: 100%;
    height: 100%;
    padding: 0px 24px;
    font-size: 14px;
    text-overflow: ellipsis;
    overflow: hidden;
    transition: color 0.28s ease;
  }
}
@media screen, projection {
  .redditlabs-tabs .redditlab-tab a:hover,
  .redditlabs-tabs .redditlab-tab a.active {
    background-color: transparent;
    color: rgb(238, 110, 115);
  }
}
@media screen, projection {
  *, ::before, ::after {
    box-sizing: inherit;
  }
}
@media screen, projection {
  ul:not(.browser-default) li {
    list-style-type: none;
  }
}
@media screen, projection {
  .redditlabs-tabs .redditlab-tab {
    display: inline-block;
    text-align: center;
    line-height: 48px;
    height: 48px;
    padding: 0px;
    margin: 0px;
  }
}
@media screen, projection {
  a {
    background-color: transparent;
  }
}
@media screen, projection {
  *, ::before, ::after {
    box-sizing: inherit;
  }
}
@media screen, projection {
  a {
    color: rgb(3, 155, 229);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
}
@media screen, projection {
  a {
    text-decoration: none;
  }
}
@media screen, projection {
  .redditlabs-tabs .redditlab-tab a {
    color: rgba(238, 110, 115, 0.7);
    display: block;
    width: 100%;
    height: 100%;
    padding: 0px 24px;
    font-size: 14px;
    text-overflow: ellipsis;
    overflow: hidden;
    transition: color 0.28s ease;
  }
}
@media screen, projection {
  *, ::before, ::after {
    box-sizing: inherit;
  }
}
@media screen, projection {
  ul:not(.browser-default) li {
    list-style-type: none;
  }
}
@media screen, projection {
  .redditlabs-tabs .redditlab-tab {
    display: inline-block;
    text-align: center;
    line-height: 48px;
    height: 48px;
    padding: 0px;
    margin: 0px;
  }
}
@media screen, projection {
  a {
    background-color: transparent;
  }
}
@media screen, projection {
  *, ::before, ::after {
    box-sizing: inherit;
  }
}
@media screen, projection {
  a {
    color: rgb(3, 155, 229);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
}
@media screen, projection {
  a {
    text-decoration: none;
  }
}
@media screen, projection {
  .redditlabs-tabs .redditlab-tab a {
    color: rgba(238, 110, 115, 0.7);
    display: block;
    width: 100%;
    height: 100%;
    //padding: 0px 24px;
    font-size: 14px;
    text-overflow: ellipsis;
    overflow: hidden;
    transition: color 0.28s ease;
  }
}
@media screen, projection {
  *, ::before, ::after {
    box-sizing: inherit;
  }
}
@media screen, projection {
  ul:not(.browser-default) li {
    list-style-type: none;
  }
}
@media screen, projection {
  .redditlabs-tabs .reddit-labs-indicator {
    position: absolute;
    bottom: 0px;
    height: 2px;
    background-color: rgb(246, 178, 181);
    will-change: left, right;
  }
}

How to Build A Chrome Extension: Part 3

How and Where to call Third Party APIs

Here we are going make a chrome extension that displays a window with a list of the Reddit Subreddit that the user's current url tab has been posted on.
So for chrome to enable us to have access to the users tab instances, and we want to make reddit api calls we need to add the following permission to our manifest.json

{
"permissions":["tabs","https://www.reddit.com/*","http://www.reddit.com/"]
}

Here we want a subwindow to display when when a user clicks our extension we are going to need to declare a browser_action inside our manifest.json and lets tell it to load our popup.html file when the user clicks the icon. We can do that by adding the following browser_action object inside our manifest.json file.

  "browser_action": {
        "default_title": "RedditLabs",
        "default_popup": "popup.html",
        "default_icon":"img/default-icon.png"
},

So you're prolly asking, "where does the logic to make Reddit API calls go?" because I did.

We'll you can load in .js files into the popup.html file defined in our manifests.json file and that will work just fine, however you should use the background.js script for this that you can declare in your manifest.json browser_action object by adding

`background_page`:`background.html`

Let me clear up some things that may be confusing when looking at this. The background page is in .html but is not attached to your apps DOM Events.

Here the popup.html file will simply be a dumb view, only able to accept parameters from the background.html that we'll set up to do the heaving lifting, ergo making the our Reddit API Calls.

To enable the popup.html to awuire parameters from our background worker page we need to add the following refrence to our popup.html
const worker = chrome.extension.getBackgroundPage()
You now have access to the full scope of functions of any script tag loaded into the background.html. For instance if the background.html page includes:

<html>
   <script> 
       function foo(param){
             console.log("foo: ", param)
       }
  </script>
</html>

then in our popup.html page we can access it by:

const worker = chrome.extension.getBackgroundPage()
worker.foo("bar")

So knowing that lets enable us into being able to access the console object in our worker page inside our popup.html page, to do this we add the following to our background.html

<html>
   <script> 
       function chromeConsole(type="log",msg){
             return {type:"log",msg}
       }
  </script>
</html>

Then use chromeConsole() unstead of console.log() and add

 worker.chromeConsole(type="log",msg){
console[type](msg)
}

to get them to emit to our popup.html page.

Things

Redditlabs Chrome Extension

A Chrome Extension that includes reddit.com's comment section into each page you visit

Project Overview

Project File Structure:

dist/                         |  (where `src` folders build -setup in gulfile.babel.js)
src/                          |   (working directories)
     popup/
     content/
     event/
gulpfile.babel.js             |   (compiles and reallocates output files in `dist` folder)

To start run:

gulp watch

See blog post