Reprogram your Facebook or any other WebApp!

Name: Reprogram your Facebook or any other WebApp!
Rating: 4.2 (6 reviews)

Use JavaScript, HTML & CSS with WebExtensions to do as you please with FACEBOOK!

Created byIreneusz Erik Owsiak

Last updated 4/2017

English

What you'll learn

Student will learn how to control facebook and any other WebApp
Student will wrok with JavaScript, HTML5 & CSS
Student will learn how facebook page is put together
Student will do some reverse engineering to make the project work
Add motif styles to facebook
Remove ads from facebook pages
Use new ECMAScript 6 JavaScript
Publish WebExtension for distribution

Course content

4 sections • 34 lectures • 6h 8m total length

Intro7:17
I will show you what you can do with WebExtensions on Firefox using facebook.
In external resources you will find two links... let me know what you think...
Download & Install Development Tools9:37
Download and install Visual Studio Code and a plugins.
Setup2:46
App setup.

manifest.json11:58
Student will create monifest.json file.
Loading app3:13
Options UI - html, css4:55
Student will create html file to add / edit config info.
Options UI - JavaScript - part 115:17
Student will write options ui JavaScript.
Options UI - JavaScript - part 216:03
Student will write options ui JavaScript.
Options UI - JavaScript - part 311:17
Student will write options ui JavaScript.
background.js - part 114:49
Student will work on background JavaScript.
background.js - part 213:12
Student will work on background JavaScript.
Create Missing files9:37
Student will create missing JavaScript files.
background.js - part 316:01
Going back to finish background JavaScript file.
banner.js - part 114:24
Student will work on banner.js file.
start.js, banner.js - piping click to start webext.16:25
Work on core functions.
core.js - reverse engineering facebook page15:21
Work on core functions
core.js - reverse engineering facebook page - error correction3:26
Correction to lecture 16.
core.js11:53
More work with core.js.
core.js, content.js14:08
Student will work on core.js and content.js files.
content.js12:45
Student will work with content.js file.
content.js16:33
More work on content.js file.
content.js & debugging16:21
Get ready to finish content.js and do some debugging.
content.js fixes3:48
Finishing content.js file.

Get Photos Ready1:54
Work on getting motifs ready.
options.html, banner.js & core.js17:28
Motifs are introduced.
background.js, content.js - banner motif up!12:04
Student will debug a LOT and get motif up and running.
content.js, banner.js - background set!8:05
Student will add background img ot the motif.
content.js - removing ads!14:46
Student will learn how to remove ads from facebook.
content.js - add css file13:39
Student will add CSS code.
Finishing Firefox coding phase of the app!4:51
Last coding video for Firefox.
Publishing to Firefox Add-ons6:24
Student will publish the app to mozilla site for singing.

Requirements

Basic knowledge of HTML, CSS & JavaScript

Description

In this course student will learn how to extend or modify WebApps with the use of JavaScript, HTML & CSS. As an example we will use facebook(dot)com to show just how powerful WebExtensions are. Student will learn to remove elements from the page and add new once. As an example we will remove suggested posts which mostly are unwanted ads. This course uses HTML, JavaScript and CSS to do all the work. Some basic info is stored in JSON files and those will be explained as well. In no way is this course an exhaustive explanation of HTML, JavaScript and CSS but it will show you how to approach such an project.HAVE FUN!!!

Who this course is for:

Anyone willing to learn & wanting a deeper know how when it comes to building WebApps

Reprogram your Facebook or any other WebApp!

What you'll learn

Explore related topics

Course content

Lets Get Ready3 lectures • 20min

Lets Write Code20 lectures • 4hr 1min

Create Motifs8 lectures • 1hr 19min

Converting to Chrome3 lectures • 29min

Requirements

Description

Who this course is for: