Build a Full-Stack Chrome Extension with NodeJS and MongoDB
In this course, we'll be developing a new Full-Stack Chrome Extension that Scrapes Amazon, and automatically saves Product Data within a MongoDB Database. Our finished product (which you'll be able to publish to the Chrome Store) will be a Chrome Extension that enables any user to Scrape their own Amazon Purchase History, the results of any Amazon Search URL, or the results of multiple Amazon Search Keywords - one after the next.
More
*Code Samples Included All Along Your Path To Mastering Chrome Extension Development*
The Technology Stack you'll be dealing with in this course:
- Chrome Extension
- AngularJS (for the Chrome Extension Popup)
- jQuery *(for interacting with the Amazon DOM)
- NodeJS Server
- Mongo Database
The Functionality For the Chrome Extension:
Signup and Login via the Popup View
Select Elements From The DOM with the Content.js Page
Scrape Your Own Amazon Purchase History
Scrape Amazon Search Results of a Given Page
Scrape Amazon Search Results of Multiple Keywords (one after the next automatically)
Save The Amazon Product Title
Save The Amazon Product Description
Save The Amazon Product Image
Save The Amazon Product Reviews
Save The Product Rating
Save The Amount of Ratings of a Given Product
Make The Chrome Extension Automatically Navigate Through All Pages of Search Results
While developing this awesome sample project, you'll learn:
a) How To Scrape Any Data From The Web Programatically via the Power of Chrome Extensions
b) The Manifest.json File
c) The Popup.js File
c) The Background.js File
d) The Content.js File
e) How To Debug Your Chrome Extension
Getting the architecture of your Chrome Extension right is super crucial to keeping your code clean and structured! We'll be covering lots of considerations when building a Full-Stack Chrome Extension.
I built this course because all of the other Chrome Extension courses on Udemy don't go quite as deep (compare the Amount of Hours this course provides relative to the competitors), and because Chrome Extensions are like the surf-suit for websurfers - users can take them with them anywhere they go on the web.
If you're excited about the Awesome Power of Chrome Extensions and Web Scraping, then I hope you get a lot out of this course.
The Architecture is meant to be re-usable no matter what type of Chrome Extension / Web Scraper you'd like to build, so feel to reach out if you need help taking the codebase in your own direction, or if you have any questions along the way.
Watch Online Build a Full-Stack Chrome Extension with NodeJS and MongoDB
| # | Title | Duration |
|---|---|---|
| 1 | About The Course | 02:55 |
| 2 | Why Web Automation? | 04:35 |
| 3 | War Stories From Scraping The Web | 02:28 |
| 4 | My Latest App | 03:04 |
| 5 | Why Make / Take This Course? | 03:38 |
| 6 | Project Tutorial with Screenshots | 08:57 |
| 7 | High-Level Project Architecture | 14:37 |
| 8 | Setting up the Manifest.json - your App HQ | 09:38 |
| 9 | Setting Up the Popup | 02:45 |
| 10 | Adding AngularJS and Angular UI Router within the Popup HTML | 06:28 |
| 11 | Adding Bootswatch and Custom Styling in Popup | 03:33 |
| 12 | Setting up Angular UI-Router and our Home View | 09:00 |
| 13 | Setting Up Your NodeJS Server | 14:28 |
| 14 | Setting up Background.js with jQuery | 09:22 |
| 15 | Chatting Between Background.js and Server | 07:20 |
| 16 | Setting Up the Login view and Main Controller in the Popup | 07:56 |
| 17 | Setting Up a Mongo Database with mLab | 07:52 |
| 18 | UPDATE: MongoDB with Atlas: PART 1 | 05:45 |
| 19 | UPDATE: MongoDB with Atlas: PART 2 | 02:23 |
| 20 | Logging the Form Data in the Controller | 04:25 |
| 21 | Authentication Game Plan - Understanding How The Pieces Fit (Architecture Recap) | 04:37 |
| 22 | Setting Up Signup View and Connecting to UI-Router | 04:21 |
| 23 | Passing Signup Form Data from Popup to Background | 08:20 |
| 24 | Setting Up Authentication Logic on Background and Server | 12:20 |
| 25 | Successfully Creating User and Trying to Login | 13:54 |
| 26 | Successfully Logging In and Sending Server Response back to the Popup | 09:59 |
| 27 | Redirecting Logged-In User to the Welcome View | 09:07 |
| 28 | Saving User Token in LocalStorage | 05:38 |
| 29 | NodeJS Middleware | 08:44 |
| 30 | High-Level Architecture of Saving Product Data | 02:37 |
| 31 | Setting Up the Product API | 09:01 |
| 32 | Grab Purchase Years | 07:55 |
| 33 | Passing Purchase Years to Background Script | 09:06 |
| 34 | Handling Purchase Years Array within Background Script | 08:12 |
| 35 | Sending orderDetails from Content to Background | 07:55 |
| 36 | Successfully Saving Product and Page Records | 08:29 |
| 37 | Successfully saving more than 1 product on a given page | 08:03 |
| 38 | Logic of Navigating to the Next Page | 15:02 |
| 39 | Helper Functions to Select Data and From the DOM and URL | 04:36 |
| 40 | Section Overview - Game Plan for Saving Product Reviews and Summaries | 08:13 |
| 41 | Helper Functions for Fetching & Parsing Product Data | 05:39 |
| 42 | Handling JavaScript Race Conditions | 07:53 |
| 43 | Adding View in Popup to Enable Users to Fetch Their Purchase History | 07:05 |
| 44 | Backend API for Saving Products from Search Results | 06:15 |
| 45 | Content Script Code for Fetching Search Results Data | 05:50 |
| 46 | Grabbing Product Summaries and Reviews for Search Page Results | 04:21 |
| 47 | Sending Product Reviews and Search Page Data to the Server | 07:25 |
| 48 | Successfully Saving Products and Sending Next Steps to Content Script | 06:02 |
| 49 | Successfully Looping from Page to Page of Search Results | 05:55 |
| 50 | Setting Up Views for Scraping Search Results | 06:29 |
| 51 | Successfully Scraping Current Search and Multiple Search Keywords | 06:56 |
| 52 | New Course: How To Scale Your Chrome Extension Growth | 08:04 |
Similar courses to Build a Full-Stack Chrome Extension with NodeJS and MongoDB
MERN Stack Front To Back: Full Stack React, Redux & Node.js.
Uber Clone - Typescript, NodeJS, GraphQL, React, Apollo
Serverless Framework Bootcamp: Node.js, AWS & Microservices
Docker for Node.js Projects From a Docker Captain
Full-Stack React with GraphQL and Apollo Boost
Node.js API Masterclass With Express & MongoDB
