How To Inject JavaScript And CSS Into Any Website - Build A Chrome Extension From Scratch

In this video, I'm gonna build a Chrome extension to inject JavaScript and CSS into any website, By that extension, you can inject your custom JavaScript or CSS codes to a single website or multiple websites, By The JavaScript and CSS Injection you can change any website style, theme, fonts, colors and more... to your favorite look also you can manipulate HTML DOM to create, change, remove all of the elements in a website, as you can see Now I'm using my custom version of YouTube, for example, you can create a complete theme and use that website with your theme. I will use Manifest V3 to create my Chrome extension.

------------------------------------------
▶ TABLE OF CONTENTS
------------------------------------------
0:00 Introduction And Preview
0:59 Create Chrome Extension From Scratch
2:14 Run Extension In The Browser
2:47 Start The JavaScript
3:50 Inject Custom Codes Into Multiple Websites
5:26 Code Injection Functions
6:24 Inject Custom CSS
8:15 Create Custom Elements

--------------------------------
👨‍💻 SOURCE CODE
--------------------------------

--------------------------------
🔗 USEFUL LINKS
--------------------------------

------------------------------------
⭐ SPECIAL WORDS
------------------------------------
• Application Programming Interface (API)
• Asynchronous JavaScript And XML (AJAX)
• Cascading Style Sheets (CSS)
• Content Security Policy (CSP)
• Create, Read, Update, Delete (CRUD)
• Cross-Origin Resource Sharing (CORS)
• Cross-Site Scripting (XSS)
• Database Management System (DBMS)
• Database (DB)
• Division (DIV)
• Document Object Model (DOM)
• Executable (EXE)
• Extensible Markup Language (XML)
• Graphical User Interface (GUI)
• Graphics Interchange Format (GIF)
• HyperText Markup Language (HTML)
• Hypertext Preprocessor (PHP)
• Hypertext Transfer Protocol Secure (HTTPS)
• Hypertext Transfer Protocol (HTTP)
• JavaScript Object Notation (JSON)
• JavaScript (JS)
• Joint Photographic Expert Group (JPG)
• Mozilla Developer Network (MDN)
• Object-Oriented Programming (OOP)
• PHP Data Objects (PDO)
• phpMyAdmin (PMA)
• Portable Network Graphics (PNG)
• Relational Database Management System (RDBMS)
• Representational State Transfer (REST)
• Scalable Vector Graphics (SVG)
• Structured Query Language (SQL)
• User Experience (UX)
• User Interface (UI)
• World Wide Web (WWW)
• XMLHttpRequest (XHR)

If You Enjoy My Content, Please Support Me 😍🙏

💙 PAYPAL DONATION

❤️ PATREON

💛 BUY ME A COFFEE

🖼️ Buy Stunning Unique Digital Artworks

🪙 My Public Address To Receive BTC • Bitcoin
bc1qerc5ev074cqknu9nz589w4vjf5ecmhuc2df83h

🥈 My Public Address To Receive ETH • Ethereum
0x566A47B9731209A5144336D274D44224bfb9C0ea

#chromeextension #javascript #extensiondevelopment #injectjs #injectjavascript #webbrowser #injectcode #js #css #injection #webprogramming #webdevelopment #jsinjection #cssinjection #howto #howtocode #fromscratch #gilgeekify #injecthtml #inject_html #mv3 #chrome #edge #safari #extension #firefox #googlechrome #google #microsoftedge #microsoft #chromium

[mahmutkobaner]

Was thinking about making a personalized extension thanks a lot.

[dpk]

Hello. This was a very helpful and good video. Do you know whether or not you could use this to interact with js script elements of a website? For example if i was playing an io game and wanted to change some of the js code is this possible using this method or do i have to use a different method. I've looked at exstentions like tampermonkey for doing things like this but i have found very little comprehensive resources. Thanks for reading and for the very helpful video.

[KennethPlaysOfficial]

i get "Cannot read properties of null" whenever i try to modify any element in javascript. please help

[xatilore]

Developed an extension using this guide but I just want to ask if its possible to preload the css or keep it in the cache that way it doesnt reload at each page switch? What I mean is it will only apply after ~3s of the original page being loaded but I want to have it apply immediately upon the website window being created.

[everest.basecamp]

Nice video that I was looking for some solution to my requirements. I want to make a menu item 'unclickable' or 'hide' from a nav list on a particular webpage. Since I don't have a programming language where can I learn it from, any suggestion or help? Thank you ❤

[matlarasta]

Hello but it doesn't work anymore with manifest v3 no ?

[shreyassalunke]

how much money have you made from youtube soo far, this content is really helpful

[wayowindy]

Hello how could I inject JavaScript And CSS into shadow-root (open) ?

[tanguyvansnick]

Is there a way to separate the css from the app.js file?

[amitsingha]

Is it possible to take input from extension and inject based on this input or condition?

[_l_k_l]

i need help with something sine u are a pro at this things i need help

[dedibima]

how to add control to disable and enable it

[manishsinghfartiyal]

bro manifest.js file missing or unreadable problem

[TheAlibaadshah]

how to make button in google extra button