Chrome Extension Development Tutorial: How To Inject JavaScript And CSS Into Any Website Manifest V3
This is a tutorial video about Chrome extension development with focusing on JavaScript and CSS injection. A Chrome extension is a small software program that can be added to the Google Chrome web browser to add new features or modify the browser's functionality. We are going to learn how to build a Chrome extension using manifest v3 from scratch. You will learn how to control a Chrome extension's behavior, how to set and change Chrome extension icons based on conditions, what the Chrome Storage API and Chrome Scripting API are, how to use them, and much more... My extension is compatible with all Chromium-based browsers. I've tested it on Google Chrome, Microsoft Edge, Brave, and Opera. I chose the name of this Chrome extension Injector Plus (Injector+). We can call it an unlimited lightweight injection tool that supports injecting inline JavaScript code, external JavaScript files, internal CSS code, and external CSS files. JavaScript and CSS injection are powerful techniques in web development that enable developers to create interactive, dynamic, and visually appealing web applications. However, they should be used responsibly to avoid security and performance issues. For testing purposes, I will inject custom JavaScript and CSS code into multiple websites, including ChatGPT, YouTube, Facebook, Wikipedia, example.com, and more... This video marks the beginning of my 'Complete Project' playlist. I would greatly appreciate your feedback on it. Feel free to download the final source code from my GitHub repository. I will also include the download link in the description. If you found this video helpful, please like it, subscribe to my channel, and turn on notifications. Thanks! In general, JavaScript injection serves two main purposes: legitimate and malicious use. For more in-depth information, you can refer to my videos in the Chrome extension development tutorial playlist.
🎞️ TABLE OF CONTENTS
🎬 0:00 Introduction
🎬 2:26 The Types Of JavaScript Injection
🎬 2:49 Extension's Preview
🎬 3:54 Project Structure Explanation
🎬 5:47 Define & Code (manifest.json)
🎬 12:21 Define & Code (background.js)
🎬 14:04 Define & Code (inject-to.js)
🎬 14:48 Define & Code (functions.js)
🎬 22:57 Define & Code (extension.js)
🎬 27:10 Testing Functions & Methods In Google Chrome
🎬 30:22 Define & Code (injection-types.js)
🎬 36:09 Define & Code (injection-process.js)
🎬 40:20 Chrome Extension Execution World "ISOLATED" & "MAIN"
🎬 43:09 Testing Extension On Real Websites
🎬 48:15 How To Inject JavaScript & CSS Into New Websites
🎬 51:04 Run The Extension On Microsoft Edge & Brave Browser
🎬 53:05 How To Set A Keyboard Shortcut For Chrome Extension
🎬 54:38 Anonymous Mask!
💻 SOURCE CODE
📂 https://github.com/saeedkohansal/Inje...
💡 REFERENCES
🔗 https://developer.chrome.com/docs/ext...
🔗 https://developer.chrome.com/docs/ext...
🔗 https://developer.chrome.com/docs/ext...
🔗 https://developer.chrome.com/docs/ext...
🔗 https://developer.chrome.com/docs/ext...
🔗 https://developer.mozilla.org/en-US/d...
Building Chrome Extensions: Injecting JavaScript And CSS With Manifest V3
A Comprehensive Guide To Chrome Extension Development With Manifest V3
Manifest V3 Chrome Extension Tutorial: Injecting Code Into Web Pages
Extending Chrome: Injecting JavaScript And CSS Using Manifest V3
Mastering Chrome Extension Development: Manifest V3 Inject Techniques
Step-by-Step Tutorial: Chrome Extension Development With Manifest V3
Chrome Extension Manifest V3: Injecting Custom Code Into Websites
Enhancing Web Browsing: Chrome Extension Development With Manifest V3
Injecting JavaScript And CSS: Chrome Extension Manifest V3 Tutorial
Chrome Extension Development: A Manifest V3 Inject Tutorial
Extending Chrome's Functionality: Manifest V3 Code Injection Guide
Manifest V3 Explained: Injecting JavaScript And CSS In Chrome Extensions
If You Enjoy My Content, Please Support Me 😍🙏
💙 PAYPAL DONATION
https://paypal.me/gilgeekify
❤️ PATREON
/ gilgeekify
💛 BUY ME A COFFEE
https://www.buymeacoffee.com/gilgeekify
🖼️ Buy Stunning Unique Digital Artworks
https://alchemypowerai.etsy.com
🪙 My Public Address To Receive BTC • Bitcoin
bc1qerc5ev074cqknu9nz589w4vjf5ecmhuc2df83h
🥈 My Public Address To Receive ETH • Ethereum
0x566A47B9731209A5144336D274D44224bfb9C0ea
#chromeextension #javascript #css #chromeextensions #gilgeekify
