Build a Chrome Extension

This playlist is part of Learn JavaScript

Build a Chrome Extension

54 lessons2 hours 44 min

1. Let's build a Chrome Extension!

2. Add button and input tag

3. Style the button and input tag

4. Make the input button work with onclick

5. Refactor to addEventListener

6. Write your first addEventListener()

7. Your turn to refactor

8. Create the myLeads array and inputEl

9. When to use let and const

10. Push to the myLeads array

11. Push the value from the input field

12. Use a for loop to log out leads

13. Create the unordered list

14. Render the leads in the unordered list

15. How to render <li> elements with innerHTML

16. Write your first innerHTML

17. More innerHTML practice

18. Render the <li> elements with innerHTML

19. Use createElement() and append() instead of innerHTML

20. Improving the performance of our app

21. Create the render function

22. Clear the input field

23. Add the <a> tag

24. Template strings

25. Write your first template string

26. Make the template string even more dynamic

27. Template strings on multiple lines

28. Refactor the app to use a template string

29. Style the list

30. Preparing the deployment

31. Deploying the Chrome Extension

32. Aside: What is localStorage?

33. Your first localStorage

34. Storing arrays in localStorage

35. Save the leads to localStorage

36. Get the leads from localStorage

37. Aside: Truthy and falsy values

38. Guess the expression - truthy or falsy?

39. Checking localStorage before rendering

40. Style the delete button

41. Make the delete button work

42. How function parameters can improve our code

43. Write your first function parameter

44. Functions with multiple parameters

45. Numbers as function parameters

46. Aside: Arguments vs Parameters

47. Arrays as parameters

48. Refactor renderLeads() to use a parameter

49. Create the tabBtn

50. Save the tab url

51. How to get the current tab?

52. Use the Chrome API to get the tab

53. Deploy the final version

54. Congrats & recap