s
Last active
July 4, 2017 18:03
-
-
Save garrettmac/6a29e16ba03b0b20e915d775b323714a to your computer and use it in GitHub Desktop.
The basics on how to build a Chrome Extension.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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; | |
} | |
} |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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 ourmanifest.json
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 ourmanifest.json
and lets tell it to load ourpopup.html
file when the user clicks the icon. We can do that by adding the followingbrowser_action
object inside ourmanifest.json
file.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 thepopup.html
file defined in ourmanifests.json
file and that will work just fine, however you should use the background.js script for this that you can declare in yourmanifest.json
browser_action
object by addingLet 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 appsDOM Events
.Here the
popup.html
file will simply be a dumb view, only able to accept parameters from thebackground.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 ourpopup.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 thebackground.html
page includes:then in our
popup.html
page we can access it by:So knowing that lets enable us into being able to access the
console
object in our worker page inside ourpopup.html
page, to do this we add the following to ourbackground.html
Then use
chromeConsole()
unstead ofconsole.log()
and addto get them to emit to our popup.html page.
Things