Courses
All coursesAI PathFrontend Path

Not sure where to start?

Let us help you find your perfect course.
PricingCoursesLog in
For TeamsWhy Scrimba?
Courses
All coursesAI PathFrontend Path

Not sure where to start?

Let us help you find your perfect course.
Pricing
PricingCreate Account
Log in
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Courses
All coursesAI PathFrontend Path

Not sure where to start?

Let us help you find your perfect course.

Karma

DashboardConnect to DiscordFind a courseSettingsNew scrim
Log out

Build a Chrome Extension

This playlist is part of The Frontend Developer Career Path

Build a Chrome Extension

57 lessons2 hours 52 min

1. Let's build a Chrome Extension!
4:33
2. Add button and input tag
1:33
3. Style the button and input tag
7:16
4. Make the input button work with onclick
1:17
5. Refactor to addEventListener
2:18
6. Write your first addEventListener()
1:44
7. Your turn to refactor
1:22
8. Create the myLeads array and inputEl
2:21
9. When to use let and const
3:17
10. Push to the myLeads array
1:10
11. Push the value from the input field
2:27
12. Use a for loop to log out leads
1:39
13. Create the unordered list
1:55
14. Render the leads in the unordered list
3:41
15. How to render <li> elements with innerHTML
1:33
16. Write your first innerHTML
1:31
17. More innerHTML practice
1:48
18. Render the <li> elements with innerHTML
1:07
19. Use createElement() and append() instead of innerHTML
3:35
20. Improving the performance of our app
3:17
21. Create the render function
2:00
22. Clear the input field
2:03
23. Aside: another way to render leads
2:49
24. Add the <a> tag
4:28
25. Template strings
2:30
26. Write your first template string
1:15
27. Make the template string even more dynamic
0:51
28. Template strings on multiple lines
2:53
29. Refactor the app to use a template string
1:12
30. Aside: Convert strings to numbers with Number()
3:42
31. Style the list
3:50
32. Preparing the deployment
4:52
33. Deploying the Chrome Extension
2:28
34. Aside: What is localStorage?
3:02
35. Your first localStorage
3:48
36. Storing arrays in localStorage
6:23
37. Save the leads to localStorage
2:28
38. Get the leads from localStorage
3:50
39. Aside: Truthy and falsy values
7:54
40. Guess the expression - truthy or falsy?
2:22
41. Checking localStorage before rendering
3:37
42. Style the delete button
3:17
43. Make the delete button work
4:16
44. How function parameters can improve our code
5:54
45. Write your first function parameter
3:27
46. Functions with multiple parameters
3:11
47. Numbers as function parameters
1:41
48. Aside: Arguments vs Parameters
3:22
49. Arrays as parameters
1:54
50. Refactor renderLeads() to use a parameter
1:39
51. Create the tabBtn
3:19
52. Save the tab url
2:35
53. How to get the current tab?
4:19
54. Use the Chrome API to get the tab
6:18
55. Deploy the final version
2:14
56. Congrats & recap
5:43
57. Share your pet!
1:23

HomePlans & PricingGift membershipTeacher talent program

Community

Explore the communityPodcastYouTubeGet Scrimba emails

Courses

All courses Self-paced BootcampFree coursesPro courses

Company

About usSupport centerTermsPrivacy

Built with Imba