Build a Full-Stack Chrome Extension with NodeJS and MongoDB

Build a Chrome Extension that Scrapes Amazon Search Results while Learning To Keep Your Codebase Clean & Extendable

2.15 (55 reviews)
Udemy
platform
English
language
Web Development
category
instructor
376
students
6.5 hours
content
Dec 2021
last update
$44.99
regular price

What you will learn

How to Build a Chrome Extension

How To Scrape Web Data with Your Chrome Extension

How to Select Elements in the DOM via Your ContentJS Script

How To Handle AJAX Requests from Your Background to Your Server

The Chrome Extension Messaging API - How To Pass Data Between Different Elements of Your Chrome Extension (Popup->Content->Background->Server...)

How to Setup The NodeJS Server, Routes, and Backend API For Your Extension

How to Manage Amazon Product Data with MongoDB

How To Accept User Input From A Chrome Extension

How to Persist User Login Data and Other User-Related Data Within the Background Page's Local Storage

Best Practices To Keeping Your Chrome Extension Code Clean, Bug Free, and Highly Extendable

Organizing your Popup, Content and Background Pages

Description

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.

*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:

  1. Signup and Login via the Popup View

  2. Select Elements From The DOM with the Content.js Page

  3. Scrape Your Own Amazon Purchase History

  4. Scrape Amazon Search Results of a Given Page

  5. Scrape Amazon Search Results of Multiple Keywords (one after the next automatically)

  6. Save The Amazon Product Title

  7. Save The Amazon Product Description

  8. Save The Amazon Product Image

  9. Save The Amazon Product Reviews

  10. Save The Product Rating

  11. Save The Amount of Ratings of a Given Product

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


Sincerely,

Elisha

Content

Introduction

About Your Instructor
Why Take This Course?
About The Project
High-Level Project Architecture

The Manifest and Popup

Setting up the Manifest.json - your App HQ
Setting Up the Popup
Adding AngularJS and Angular UI Router within the Popup HTML
Adding Bootswatch and Custom Styling in Popup
Setting up Angular UI-Router and our Home View

Setting Up NodeJS and MongoDB

Setting Up Your NodeJS Server
Setting up Background.js with jQuery
Chatting Between Background.js and Server
Setting Up a Mongo Database with mLab

Signup & Login Functionality

Setting Up the Login view and Main Controller in the Popup
Logging the Form Data in the Controller
Setting Up Signup View and Connecting to UI-Router
Authentication Game Plan - Understanding How The Pieces Fit (Architecture Recap)
Chrome Extension Message Passing API and Architecture
Passing Signup Form Data from Popup to Background
Setting Up Authentication Logic on Background and Server
Successfully Creating User and Trying to Login
Successfully Logging In and Sending Server Response back to the Popup
Redirecting Logged-In User to the Welcome View

Authenticating User Requests

Saving User Token in LocalStorage
NodeJS Middleware

Scraping Amazon Product Data

High-Level Architecture of Saving Product Data
Grab Purchase Years
Passing Purchase Years to Background Script
Handling Purchase Years Array within Background Script
Sending orderDetails from Content to Background
Setting Up the Product API
Successfully Saving Product and Page Records
Successfully saving more than 1 product on a given page
Logic of Navigating to the Next Page
Helper Functions to Select Data and From the DOM and URL

Save More Product Data - Like Summary and Reviews

Section Overview - Game Plan for Saving Product Reviews and Summaries
Helper Functions for Fetching & Parsing Product Data
Handling JavaScript Race Conditions
Adding View in Popup to Enable Users to Fetch Their Purchase History

Scrape Amazon Search Results

Backend API for Saving Products from Search Results
Content Script Code for Fetching Search Results Data
Grabbing Product Summaries and Reviews for Search Page Results
Sending Product Reviews and Search Page Data to the Server
Successfully Saving Products and Sending Next Steps to Content Script
Successfully Looping from Page to Page of Search Results
Setting Up Views for Scraping Search Results
Successfully Scraping Current Search and Multiple Search Keywords

Screenshots

Build a Full-Stack Chrome Extension with NodeJS and MongoDB - Screenshot_01Build a Full-Stack Chrome Extension with NodeJS and MongoDB - Screenshot_02Build a Full-Stack Chrome Extension with NodeJS and MongoDB - Screenshot_03Build a Full-Stack Chrome Extension with NodeJS and MongoDB - Screenshot_04

Reviews

Xingrong
August 14, 2022
I feel like the lecturer can not understand the code he was writing, and just copied and pasted code from anywhere, the course content is really hard to understand, and even the lecturer will not reply to you if you ask questions him about lecture content.
Joseph
February 23, 2022
This one is out of date. While I learned some basics, the code architecture was weak, prone to race conditions and written for Manifest 2 which is no longer allowed in the Chrome store. I attempted to transition this code to manifest 3 and was unable.
Ali
February 23, 2022
Does the instructor knows what the code does?! It seems to me that he doesn't know the code written in the application! He's just copy-pasting! :( He doesn't even do this copy-pasting well!!! The worst course I've ever had. Just waste of time!
Smita
December 27, 2021
The course structure seemed interesting, but course was not explained well in videos. It was so un-interesting that I couldnt even finish it.
Josh
January 3, 2021
This course is the real deal. Very helpful, easy to understand, and follow along. Highly recommend it for anyone looking to build a Chrome extension that connects to a database.

Charts

Price

Build a Full-Stack Chrome Extension with NodeJS and MongoDB - Price chart

Rating

Build a Full-Stack Chrome Extension with NodeJS and MongoDB - Ratings chart

Enrollment distribution

Build a Full-Stack Chrome Extension with NodeJS and MongoDB - Distribution chart

Related Topics

3131478
udemy ID
5/15/2020
course created date
6/22/2020
course indexed date
Bot
course submited by