CF

Build a Full-Stack Chrome Extension with NodeJS and MongoDB

6h 15m 12s
English
Paid

Unlock the power of Chrome Extensions with this comprehensive course. You'll learn to build a Full-Stack Chrome Extension which scrapes Amazon product data and saves it in a MongoDB database. By the end, you'll have a Chrome Extension ready for publishing, capable of scraping purchase history, search results, and more.

Course Overview

Master Chrome Extension Development with step-by-step code samples included throughout your journey.

Technology Stack

  • Chrome Extension Development
  • AngularJS for UI components in the extension popup
  • jQuery for manipulating and interacting with the Amazon DOM
  • NodeJS for server-side logic
  • MongoDB for data storage

Core Functionality of the Extension

  1. Signup and Login via the Popup View
  2. Select elements from the DOM using the Content.js page
  3. Scrape Amazon purchase history
  4. Scrape Amazon search results from a specific page
  5. Scrape multi-keyword Amazon search results sequentially
  6. Save Amazon product details such as:
    • Product Title
    • Product Description
    • Product Image
    • Product Reviews
    • Product Rating
    • Number of Ratings
  7. Enable automatic navigation through all search result pages

Learning Outcomes

Through this project, you'll acquire expertise in:

  • Programmatically scraping web data using Chrome Extensions
  • Understanding and utilizing the manifest.json file
  • Working with popup.js and background.js files
  • Debugging Chrome Extensions efficiently

The course covers essential architecture considerations to maintain clean and structured code in your Full-Stack Chrome Extension projects.

Why This Course?

I created this course as a response to existing offerings on Udemy which lacked depth. This course provides a comprehensive understanding of Chrome Extensions, with content tailored to meet both quantity and quality in education time. Chrome Extensions offer unparalleled utility, like a surf-suit for web surfers, that accompany users throughout their internet journey.

Elevate your skills with the Awesome Power of Chrome Extensions and Web Scraping. If you have questions or need guidance taking the codebase in your own direction, feel free to reach out.

About the Author: Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

Watch Online 52 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 52 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: About The Course
All Course Lessons (52)
#Lesson TitleDurationAccess
1
About The Course Demo
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
Unlock unlimited learning

Get instant access to all 51 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Course content

52 lessons · 6h 15m 12s
Show all 52 lessons
  1. 1 About The Course 02:55
  2. 2 Why Web Automation? 04:35
  3. 3 War Stories From Scraping The Web 02:28
  4. 4 My Latest App 03:04
  5. 5 Why Make / Take This Course? 03:38
  6. 6 Project Tutorial with Screenshots 08:57
  7. 7 High-Level Project Architecture 14:37
  8. 8 Setting up the Manifest.json - your App HQ 09:38
  9. 9 Setting Up the Popup 02:45
  10. 10 Adding AngularJS and Angular UI Router within the Popup HTML 06:28
  11. 11 Adding Bootswatch and Custom Styling in Popup 03:33
  12. 12 Setting up Angular UI-Router and our Home View 09:00
  13. 13 Setting Up Your NodeJS Server 14:28
  14. 14 Setting up Background.js with jQuery 09:22
  15. 15 Chatting Between Background.js and Server 07:20
  16. 16 Setting Up the Login view and Main Controller in the Popup 07:56
  17. 17 Setting Up a Mongo Database with mLab 07:52
  18. 18 UPDATE: MongoDB with Atlas: PART 1 05:45
  19. 19 UPDATE: MongoDB with Atlas: PART 2 02:23
  20. 20 Logging the Form Data in the Controller 04:25
  21. 21 Authentication Game Plan - Understanding How The Pieces Fit (Architecture Recap) 04:37
  22. 22 Setting Up Signup View and Connecting to UI-Router 04:21
  23. 23 Passing Signup Form Data from Popup to Background 08:20
  24. 24 Setting Up Authentication Logic on Background and Server 12:20
  25. 25 Successfully Creating User and Trying to Login 13:54
  26. 26 Successfully Logging In and Sending Server Response back to the Popup 09:59
  27. 27 Redirecting Logged-In User to the Welcome View 09:07
  28. 28 Saving User Token in LocalStorage 05:38
  29. 29 NodeJS Middleware 08:44
  30. 30 High-Level Architecture of Saving Product Data 02:37
  31. 31 Setting Up the Product API 09:01
  32. 32 Grab Purchase Years 07:55
  33. 33 Passing Purchase Years to Background Script 09:06
  34. 34 Handling Purchase Years Array within Background Script 08:12
  35. 35 Sending orderDetails from Content to Background 07:55
  36. 36 Successfully Saving Product and Page Records 08:29
  37. 37 Successfully saving more than 1 product on a given page 08:03
  38. 38 Logic of Navigating to the Next Page 15:02
  39. 39 Helper Functions to Select Data and From the DOM and URL 04:36
  40. 40 Section Overview - Game Plan for Saving Product Reviews and Summaries 08:13
  41. 41 Helper Functions for Fetching & Parsing Product Data 05:39
  42. 42 Handling JavaScript Race Conditions 07:53
  43. 43 Adding View in Popup to Enable Users to Fetch Their Purchase History 07:05
  44. 44 Backend API for Saving Products from Search Results 06:15
  45. 45 Content Script Code for Fetching Search Results Data 05:50
  46. 46 Grabbing Product Summaries and Reviews for Search Page Results 04:21
  47. 47 Sending Product Reviews and Search Page Data to the Server 07:25
  48. 48 Successfully Saving Products and Sending Next Steps to Content Script 06:02
  49. 49 Successfully Looping from Page to Page of Search Results 05:55
  50. 50 Setting Up Views for Scraping Search Results 06:29
  51. 51 Successfully Scraping Current Search and Multiple Search Keywords 06:56
  52. 52 New Course: How To Scale Your Chrome Extension Growth 08:04

Related courses

Frequently asked questions

What is Build a Full-Stack Chrome Extension with NodeJS and MongoDB about?
Unlock the power of Chrome Extensions with this comprehensive course . You'll learn to build a Full-Stack Chrome Extension which scrapes Amazon product data and saves it in a MongoDB database. By the end, you'll have a Chrome Extension…
Who teaches Build a Full-Stack Chrome Extension with NodeJS and MongoDB?
Build a Full-Stack Chrome Extension with NodeJS and MongoDB is taught by Udemy. You can find more courses by this instructor on the corresponding source page.
How long is Build a Full-Stack Chrome Extension with NodeJS and MongoDB?
Build a Full-Stack Chrome Extension with NodeJS and MongoDB contains 52 lessons with a total runtime of 6 hours 15 minutes. All lessons are available to watch online at your own pace.
Is Build a Full-Stack Chrome Extension with NodeJS and MongoDB free to watch?
Build a Full-Stack Chrome Extension with NodeJS and MongoDB is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch Build a Full-Stack Chrome Extension with NodeJS and MongoDB online?
Build a Full-Stack Chrome Extension with NodeJS and MongoDB is available to watch online on CourseFlix at https://courseflix.net/course/build-a-full-stack-chrome-extension-with-nodejs-and-mongodb. The page hosts every lesson with the integrated video player; no download is required.