How To Inject JavaScript And CSS Into Any Website - Build A Chrome Extension From Scratch
Вставка
- Опубліковано 10 чер 2024
- 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 UA-cam, 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
--------------------------------
github.com/saeedkohansal/Inje...
--------------------------------
🔗 USEFUL LINKS
--------------------------------
developer.chrome.com/docs/ext...
developer.chrome.com/docs/ext...
developer.chrome.com/docs/ext...
developer.chrome.com/docs/ext...
developer.chrome.com/docs/ext...
developer.chrome.com/docs/ext...
developer.chrome.com/docs/ext...
developer.chrome.com/docs/web...
developer.chrome.com/docs/web...
------------------------------------
⭐ 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
paypal.me/gilgeekify
❤️ PATREON
/ gilgeekify
💛 BUY ME A COFFEE
www.buymeacoffee.com/gilgeekify
🖼️ Buy Stunning Unique Digital Artworks
alchemypowerai.etsy.com
🪙 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
Was thinking about making a personalized extension thanks a lot.
You’re welcome 🙏
Thank a lot. Pls keep making vids
Thank you, sure 📽️
thanks a lot , its worked !
Nice! you're welcome mate 🤠🙏
cool video man thank's
Your Welcome Dear Nam Doyoon 🙏
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.
Hello! I'm glad to hear that you found the video helpful. 🤠🙏
In general, everything depends on the complexity of the game.
You can use my extension to do that.
Please note that modifying or changing the JavaScript code in online IO games is generally not recommended, as it violates the game's terms of service and is often considered cheating. Additionally, most online IO games employ client-server architecture, meaning that the game logic is primarily executed on the server, while the client (your browser) receives and displays the game state.
While you may be able to inspect the JavaScript code in your browser's developer tools and console, any modifications you make will only affect your local copy of the game and will not have any impact on the server or other players' experiences. The server will still enforce the game rules and validate the actions taken by your client.
It is important to respect the rules and guidelines set by game developers and engage in fair play. Modifying the game code can result in consequences such as being banned from the game or having your account suspended. If you have any questions or concerns about a specific game, it's best to consult the game's terms of service or contact the game's support team for clarification.
Hello how could I inject JavaScript And CSS into shadow-root (open) ?
5:35
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 ❤
Thank you 🧡
💡 'unclickable' and 'hide' are two completely different things, you can accomplish this using CSS. 📌
🔰 To make elements 'unclickable', you can use the `pointer-events: none;` and `user-select: none;` CSS properties.
1️⃣ pointer-events: developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
2️⃣ user-select: developer.mozilla.org/en-US/docs/Web/CSS/user-select
🔰 And to 'hide' elements, you can use various CSS properties, including `display: none;`, `visibility: hidden;`, and `opacity: 0;`, among other tricks.
1️⃣ display: developer.mozilla.org/en-US/docs/Web/CSS/display
2️⃣ visibility: developer.mozilla.org/en-US/docs/Web/CSS/visibility
3️⃣ opacity: developer.mozilla.org/en-US/docs/Web/CSS/opacity
I would suggest using Microsoft Copilot AI as a learning tool and assistant for any programming language. It's a great resource that can help you understand and write code more effectively. It provides suggestions and examples that can guide you through your learning journey. Happy coding! 🤠✌️❤
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.
☑️ Sure! Based on official documentation, to set the run time of your code execution, you can use the "run_at" property in your `manifest.json` file inside the "content_scripts" property.
💡 To load your CSS immediately when the website window is created, you need to use "document_start" value, which means the script is injected after any CSS files are loaded, but before any other DOM is constructed or any other script is run.
🟢 Refrences:
🔗 developer.chrome.com/docs/extensions/reference/api/extensionTypes#type-RunAt
🔗 developer.chrome.com/docs/extensions/develop/concepts/content-scripts#run_time
@@gilgeekify I did as you said but now the extensions is sending errors that it cannot read the create style function shown in this video, "Uncaught TypeError: Cannot read properties of null (reading 'appendChild')"
@@gilgeekify Nevermind! I found an even easier fix to this problem! But thanks for trying to help!
You're welcome! 🤠🙏
✅ This null error typically occurs when you try to select elements by JavaScript that do not exist in the DOM or have not been created yet.
🟡 There are various methods to accomplish what you want. In this specific case, my suggestion is to inject your CSS files into the desired websites using only `manifest.json` without using JavaScript. This is a practical approach.
@@gilgeekify That is exactly what I've tried and seems like it works! But I have a slight problem, I want to have another css file be applied with the global one on a specific subdirectory but I can't figure out how
how much money have you made from youtube soo far, this content is really helpful
Thank you, unfortunately, I have not made any money from UA-cam so far.
Hello but it doesn't work anymore with manifest v3 no ?
Hey, all the extensions that I've created are Manifest version 3. ☑️
I just tested this extension and it still works well. 🟢
💡 You can also use the Chrome extensions Injector+ or Enhanced Version.
1️⃣ Injector+
▶️ ua-cam.com/video/13yCU0tQ4cY/v-deo.html
2️⃣ Enhanced Version
▶️ ua-cam.com/video/5SuWCBFPwgs/v-deo.html
Is there a way to separate the css from the app.js file?
Sure! 🤠
You can do the injection in different ways.
You should use "css" object key to inject CSS files.
I show you examples (manifest.json):
• Inject Single/Multiple JS/CSS Files Into All URLs:
"content_scripts": [
{
"matches": [
""
],
"js": [
"path-to-script-1.js",
"path-to-script-2.js",
"path-to-script-3.js"
],
"css": [
"path-to-style-1.css",
"path-to-style-2.css",
"path-to-style-3.css"
]
}
]
• Inject Single/Multiple JS/CSS Files Into Single URL:
"content_scripts": [
{
"matches": [
"domain.com/"
],
"js": [
"path-to-script-1.js",
"path-to-script-2.js",
"path-to-script-3.js"
],
"css": [
"path-to-style-1.css",
"path-to-style-2.css",
"path-to-style-3.css"
]
}
]
Also you can specify which domains the files should be injected.
Seprated files for seprated URLs.
• Inject Separated Single/Multiple JS/CSS Files Into Separated URLs:
"content_scripts": [
{
"matches": [
"domain-1.com/"
],
"js": [
"domain-1/path-to-script-1.js",
"domain-1/path-to-script-2.js",
"domain-1/path-to-script-3.js"
],
"css": [
"domain-1/path-to-style-1.css",
"domain-1/path-to-style-2.css",
"domain-1/path-to-style-3.css"
]
},
{
"matches": [
"domain-2.com/"
],
"js": [
"domain-2/path-to-script-1.js",
"domain-2/path-to-script-2.js",
"domain-2/path-to-script-3.js"
],
"css": [
"domain-2/path-to-style-1.css",
"domain-2/path-to-style-2.css",
"domain-2/path-to-style-3.css"
]
},
{
"matches": [
"domain-3.com/"
],
"js": [
"domain-3/path-to-script-1.js",
"domain-3/path-to-script-2.js",
"domain-3/path-to-script-3.js"
],
"css": [
"domain-3/path-to-style-1.css",
"domain-3/path-to-style-2.css",
"domain-3/path-to-style-3.css"
]
}
]
Is it possible to take input from extension and inject based on this input or condition?
Yes, of course.
Based on your logic, you can design a popup page with some inputs to inject JavaScript and CSS or set domains. also, you need to use the `chrome.storage` API to set and store your custom data.
I will create a video of the new version of this extension with more features soon...
MORE INFO:
developer.chrome.com/docs/extensions/reference/storage/
@@gilgeekify thanks a lot bro😍😍
@@gilgeekify I am trying to do something like this, I have a popup with a JavaScript code input, so I want to inject that code in the page where it was added. But I don't know how to parse the string of the JavaScript into a function, and I am also having some problems with permissions of Manifest V3
I agree that Manifest V3 is strict.
I'm currently making a Chrome extension called `Injector++` that has a popup and settings page, and I've made some inputs to insert Domains, JavaScript, and CSS.
Tutorial video coming soon...
Preview:
ua-cam.com/users/postUgkxtfiGdojFYHlgA8wlFiqlNAXxQiLi1Mgl
@@gilgeekify Great, i'll be on top of it
i need help with something sine u are a pro at this things i need help
Since*
I'm here to help! 🤠
how to add control to disable and enable it
To create custom features like this, you need to use `chrome.cookies` or `chrome.storage` API's for set and storing your custom data (according to the option you want to make). Also, you need a popup to manage your extension options.
bro manifest.js file missing or unreadable problem
Hey, it's not `manifest.js` it's `manifest.json`
@@gilgeekify yup but same problem displaying
What's your OS?
@@gilgeekify Mac book air
@@manishsinghfartiyal4708 get a real pc then.
how to make button in google extra button
Hello breather help Plesse
Hello, what do you mean? 🤔
bist du deutscher?
No
@@gilgeekify okay because the Microsoft website was german
Yes! I was using a VPN at the time of recording the video 🤠
@@gilgeekify okay