Create and Publish a Chrome Extension | Beginner Friendly Guide | JavaScript Project Tutorial

Published: 22 October 2024
on channel: Piko Can Fly

434

In this video, I'll take you through a complete step-by-step guide on how to build your very own Chrome extension, even if you're a complete beginner! We'll start from scratch by creating an extension directory, writing a manifest.json file, and adding functionality with JavaScript. I'll show you how to build a useful extension that interacts with webpages, complete with a popup menu and hotkey functionality.

You’ll learn:

How to set up the manifest.json file (the heart of your extension)
How to inject JavaScript into a webpage with content.js
How to create and style a popup window for toggling features
How to test, publish, and update your extension on the Chrome Web Store
No prior experience needed – all you need is Chrome, a code editor (I'll be using VS Code), and your imagination! Follow along and by the end of this tutorial, you'll have your own working Chrome extension ready to be published.

Chapters:

00:00 - Intro + What we will make
01:06 - Prerequisites
01:21 - Create project directory

02:00 - Create Manifest.json - And learn what Manifest.json is
02:48 - Manifest Version 3
03:03 - Manifest name Key
03:52 - Add Extension version
04:30 - Manifest Description Key
05:40 - icons
07:04 - Load Extension into Chrome

08:11 - Content script - adding functionality with JavaScript
09:13 - Register Content Script
10:02 - Content Script (Matches All URLs)
10:20 - altering UI of Websites
13:02 - Using classnames to target elements
14:41 - Creating a pop up and adding the action key to manifest.json
15:55 - popup.html
19:13 - Toggle Functionality with Toggle Switch( popup.js )
19:44 - Message Passing
21:50 - One time request
22:14 - Get Current Tab ( Tabs API - tabs.query)
23:51 - Receiving message
24:42 - runtime on message listener
27:43 - chrome storage API
28:05 - chrome.storage.sync.set
29:59 - get object from storage
31:07 - declare storage permission in manifest.json
32:21 - Add hotkey ( chrome.commands )
32:50 - define command in manifest.json
34:21 - background script / service worker
34:45 - declare service worker in manifest.json
35:40 - Listen on Command
36:31 - update stored object ( chrome.storage.sync.set)
38:56 best practices and things to do before publishing an extension
39:13 - permissions : activeTab
39:47 - What to do before publishing
40:47 - updating submitted version
42:37 - Publishing your first extension
43:02 - sign up for a developer account
43:50 - adding a new extension
44:05 - Creating zip file
45:56 - description + category + language
46:16 - store icon + screenshots
46:40 - Privacy
46:55 - single purpose
47:10 - permission justification
47: 25 - storage permission justification
47:38 - activeTab permission justification
47:58 - Host permission justification
48:58 - Why can't I submit? list of things to do before submitting -
50:10 - update screenshots
51:11 - Update Package - Upload new Package
52:15 - submit for review
53:42 - How long does extension review take?

#chrome #javascript #coding #tutorial #extension

On this page of the site you can watch the video online Create and Publish a Chrome Extension | Beginner Friendly Guide | JavaScript Project Tutorial with a duration of hours minute second in good quality, which was uploaded by the user Piko Can Fly 22 October 2024, share the link with friends and acquaintances, this video has already been watched 434 times on youtube and it was liked by 30 viewers. Enjoy your viewing!

1,610

00:00:00