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.
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! 🤠✌️❤
The error message “Cannot read properties of null” typically indicates that you’re trying to access a property or method on an object that is currently null. This often happens when an element you’re trying to manipulate hasn’t been found in the DOM, or if there’s a typo in your code. 💡 Here’s a general approach to troubleshoot this issue: • Check your selectors: Ensure that the element you’re trying to access exists and that your selector is correct. ✅ • Verify the timing: Make sure you’re trying to access the element after it has been loaded into the DOM. ✅ • Debug your code: Use console.log statements or a debugger tool to check the values of variables and the state of your elements at runtime. ✅
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+ ▶️ ruclips.net/video/13yCU0tQ4cY/видео.html 2️⃣ Enhanced Version ▶️ ruclips.net/video/5SuWCBFPwgs/видео.html
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')"
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
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 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: ruclips.net/user/postUgkxtfiGdojFYHlgA8wlFiqlNAXxQiLi1Mgl
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.
💡 In JavaScript, you can replace text using the replace() method, which is available on strings. This method allows you to search for a specified substring or a regular expression and replace it with another substring.
Was thinking about making a personalized extension thanks a lot.
You’re welcome 🙏
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.
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 RUclips so far.
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! 🤠✌️❤
Thank a lot. Pls keep making vids
Thank you, sure 📽️
thanks a lot , its worked !
Nice! you're welcome mate 🤠🙏
i get "Cannot read properties of null" whenever i try to modify any element in javascript. please help
The error message “Cannot read properties of null” typically indicates that you’re trying to access a property or method on an object that is currently null. This often happens when an element you’re trying to manipulate hasn’t been found in the DOM, or if there’s a typo in your code.
💡 Here’s a general approach to troubleshoot this issue:
• Check your selectors: Ensure that the element you’re trying to access exists and that your selector is correct. ✅
• Verify the timing: Make sure you’re trying to access the element after it has been loaded into the DOM. ✅
• Debug your code: Use console.log statements or a debugger tool to check the values of variables and the state of your elements at runtime. ✅
i need help with something sine u are a pro at this things i need help
Since*
I'm here to help! 🤠
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+
▶️ ruclips.net/video/13yCU0tQ4cY/видео.html
2️⃣ Enhanced Version
▶️ ruclips.net/video/5SuWCBFPwgs/видео.html
Hello how could I inject JavaScript And CSS into shadow-root (open) ?
cool video man thank's
Your Welcome Dear Nam Doyoon 🙏
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
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:
ruclips.net/user/postUgkxtfiGdojFYHlgA8wlFiqlNAXxQiLi1Mgl
@@gilgeekify Great, i'll be on top of it
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.
how to replace text
💡 In JavaScript, you can replace text using the replace() method, which is available on strings. This method allows you to search for a specified substring or a regular expression and replace it with another substring.
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.
5:35
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