Reprogram your Facebook or any other WebApp!
5.0 (2 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
31 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Reprogram your Facebook or any other WebApp! to your Wishlist.

Add to Wishlist

Reprogram your Facebook or any other WebApp!

Use JavaScript, HTML & CSS with WebExtensions to do as you please with FACEBOOK!
5.0 (2 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
31 students enrolled
Created by Erik Owsiak
Last updated 4/2017
English
Current price: $10 Original price: $60 Discount: 83% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 6 hours on-demand video
  • 7 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I 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
View Curriculum
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 is the target audience?
  • Anyone willing to learn & wanting a deeper know how when it comes to building WebApps
Students Who Viewed This Course Also Viewed
Curriculum For This Course
34 Lectures
06:08:59
+
Lets Get Ready
3 Lectures 19:40

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

Preview 07:17

Download and install Visual Studio Code and a plugins.

Download & Install Development Tools
09:37

App setup.

Setup
02:46
+
Lets Write Code
20 Lectures 04:01:26

Student will create monifest.json file.

manifest.json
11:58

Loading app
03:13

Student will create html file to add / edit config info.

Options UI - html, css
04:55

Student will write options ui JavaScript.

Options UI - JavaScript - part 1
15:17

Student will write options ui JavaScript.

Options UI - JavaScript - part 2
16:03

Student will write options ui JavaScript.

Options UI - JavaScript - part 3
11:17

Student will work on background JavaScript.

background.js - part 1
14:49

Student will work on background JavaScript.

background.js - part 2
13:12

Student will create missing JavaScript files.

Create Missing files
09:37

Going back to finish background JavaScript file.

background.js - part 3
16:01

Student will work on banner.js file.


banner.js - part 1
14:24


Work on core functions

core.js - reverse engineering facebook page
15:21

Correction to lecture 16.

core.js - reverse engineering facebook page - error correction
03:26

More work with core.js.

core.js
11:53

Student will work on core.js and content.js files.

core.js, content.js
14:08

Student will work with content.js file.

content.js
12:45

More work on content.js file.

content.js
16:33

Get ready to finish content.js and do some debugging.

content.js & debugging
16:21

Finishing content.js file.

content.js fixes
03:48
+
Create Motifs
8 Lectures 01:19:11

Work on getting motifs ready.

Get Photos Ready
01:54

Motifs are introduced.

options.html, banner.js & core.js
17:28

Student will debug a LOT and get motif up and running. 

background.js, content.js - banner motif up!
12:04

Student will add background img ot the motif.

content.js, banner.js - background set!
08:05

Student will learn how to remove ads from facebook.

content.js - removing ads!
14:46

Student will add CSS code.

content.js - add css file
13:39

Last coding video for Firefox.

Finishing Firefox coding phase of the app!
04:51

Student will publish the app to mozilla site for singing.

Preview 06:24
+
Converting to Chrome
3 Lectures 28:42

Finishing Chrome!

Part 2
12:12

Start work on Firefox to Chrome conversion. 

Part 1
12:53

Publish to chrome web store.

Publishing to Chrome Web Store
03:37
About the Instructor
Erik Owsiak
4.3 Average rating
68 Reviews
2,508 Students
5 Courses
Hardware & Software Engineer

I started working with programming and technology way back in the 90's when a 200 MHz Pentium 1 was a speed demon; things sure have changed since. As programming and hardware matured over time so did I working with it. This gives me a unique prospective on what it is that really matters when it comes to programming. Over the years I have seen a few technologies come and go but a few basics have stayed and I am sure those basics will be with us a 100 years from now. I hope that as you take my courses I can relay those basic truths to you. A programming language is nothing more than a tool, like a hammer to a carpenter; it is not the hammer that makes quality furniture but the carpenter.  Over the course of my career I have worked on many different projects, which led me to work with many programming languages from C/C++, C#, php, JavaScript/JScript, asp.net, python, Lua to name just a few.