# Codelab - Learn how to build a simple web-extension (Rough Draft/ideas)

###### tags: `Focused Browsing` `Education` `learn.grey.software`

### Overview

Web-extensions are powerfool tools that help shape our overall browsing experience. The domain of tasks that can be accomplished with web-extensions is endless. At Grey Software, we developed a web-extension that helps users hides distracting feeds on popular social websites. In this codelab, you will learn how to develop a simple chrome extension that will enable you to block the feed on YouTube.

### What you will learn?

- Understand how to configure and kick start a web extension
- An oppurtunity to mess around with the chrome api to help you communicate with different parts of your web-extension
- Maybe even some Javascript!

### What you will need?
- Chrome/Firefox
- Text Editor
- Basic HTML/JavaScript knowledge

### Set Up
- Here we can give sample code that contains the manifest, popup.html, and icons
- The manifest will contain basic configuration
- The main idea of this is to have code set up for them to see a sample hello world on the popup, and they have their development enviornment set up

### Configure Manifest
- Here we can provide a guide on how to set up their content script and explain what a manifest is here, with different componets, give some tree like structure to explain it
- We can also provide code

- Essential pieces of our chrome extension:
* manifest.json:
* This file contains the configuration of the chrome extension, from the name,permissions,icons, etc
* content script:
* Js file that runs in the context of the web page where we run our extension
* Helps us interact with the webpage accordingly, and make changes (in our case we are hiding aria-labels in classes in our content scripts to have a more focused experience on Twitter and LinkedIn)
* Configured in our manifest file


* The attribute matches under content_script, indicates the browser to inject the content script (focus.js in this case) for those web pages visited.
* We can also add additional js files that our content script needs, in this case we kept our quotes in a seperate file

* background script
* Script that is running behind the process that uses the chrome browser api's to listen for event triggers (such as click the extension icon)
* As it is listening for these event triggers, it communicates with the content script to pass information that is needed for it to make the changes on the DOM
* Configured in our manifest file as well


* The persistent attribute indicates if we want our application persistent, that means it will keep running until the browser is closed, and our data will be storied as well. We made this true because we want to enter the mode that was last enable the next time we open our browser on Twitter or LinkedIn accoridngly

* browser action files
* Establishes title,icon, popup page of the extension
* Pop-up pages know nothing about the content page, but can get the URL of the current tab (use tabs framework)
* Currently for our focus applictions, we don't have a pop up page because our background script is listening for browser action (it has the ability to do so)

## Notes

### Load your extension

1. Set Up
- Minimal manifest:

{
 "name": "Youtube Focus",
 "version": "0.0.1",
 "manifest_version": 2,
 "description": "A browser extension that hides  recommendations on the YouTube home page."
}

- Load on Chrome
- Load on FF
- Should show this: