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

Поділитися
Вставка
  • Опубліковано 30 жов 2024

КОМЕНТАРІ • 65

  • @mahmutkobaner1164
    @mahmutkobaner1164 2 роки тому +1

    Was thinking about making a personalized extension thanks a lot.

  • @dpk6756
    @dpk6756 Рік тому +1

    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.

    • @gilgeekify
      @gilgeekify  Рік тому +4

      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.

  • @shreyassalunke6195
    @shreyassalunke6195 5 місяців тому

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

    • @gilgeekify
      @gilgeekify  5 місяців тому

      Thank you, unfortunately, I have not made any money from UA-cam so far.

  • @everest.basecamp
    @everest.basecamp 9 місяців тому

    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 ❤

    • @gilgeekify
      @gilgeekify  9 місяців тому +1

      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

    • @gilgeekify
      @gilgeekify  9 місяців тому +1

      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! 🤠✌️❤

  • @ngocbao2436
    @ngocbao2436 Рік тому

    Thank a lot. Pls keep making vids

  • @minusmarigold98
    @minusmarigold98 2 роки тому

    thanks a lot , its worked !

    • @gilgeekify
      @gilgeekify  2 роки тому

      Nice! you're welcome mate 🤠🙏

  • @xatilore
    @xatilore 6 місяців тому

    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.

    • @gilgeekify
      @gilgeekify  6 місяців тому +1

      ☑️ 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

    • @xatilore
      @xatilore 6 місяців тому

      @@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')"

    • @xatilore
      @xatilore 6 місяців тому

      @@gilgeekify Nevermind! I found an even easier fix to this problem! But thanks for trying to help!

    • @gilgeekify
      @gilgeekify  6 місяців тому

      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.

    • @xatilore
      @xatilore 6 місяців тому

      ​@@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

  • @doyux
    @doyux 2 роки тому

    cool video man thank's

    • @gilgeekify
      @gilgeekify  2 роки тому

      Your Welcome Dear Nam Doyoon 🙏

  • @matlarasta
    @matlarasta 7 місяців тому

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

    • @gilgeekify
      @gilgeekify  7 місяців тому +1

      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

  • @amitsingha1637
    @amitsingha1637 Рік тому

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

    • @gilgeekify
      @gilgeekify  Рік тому +2

      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/

    • @amitsingha1637
      @amitsingha1637 Рік тому

      @@gilgeekify thanks a lot bro😍😍

    • @bagocavs
      @bagocavs Рік тому

      @@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

    • @gilgeekify
      @gilgeekify  Рік тому

      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

    • @bagocavs
      @bagocavs Рік тому

      @@gilgeekify Great, i'll be on top of it

  • @KennethPlaysOfficial
    @KennethPlaysOfficial 4 місяці тому

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

    • @gilgeekify
      @gilgeekify  4 місяці тому

      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. ✅

  • @tanguyvansnick3954
    @tanguyvansnick3954 Рік тому

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

    • @gilgeekify
      @gilgeekify  Рік тому +1

      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"
      ]
      }
      ]

  • @wayowindy
    @wayowindy Рік тому

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

  • @_l_2k_l
    @_l_2k_l Рік тому

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

  • @dedibima
    @dedibima Рік тому

    how to add control to disable and enable it

    • @gilgeekify
      @gilgeekify  Рік тому

      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.

  • @AyushPanditofficial
    @AyushPanditofficial 2 місяці тому

    how to replace text

    • @gilgeekify
      @gilgeekify  2 місяці тому

      💡 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.

  • @manishsinghfartiyal4708
    @manishsinghfartiyal4708 Рік тому

    bro manifest.js file missing or unreadable problem

  • @danihussain3651
    @danihussain3651 5 місяців тому

    5:35

  • @TheAlibaadshah
    @TheAlibaadshah Рік тому

    how to make button in google extra button

  • @bdbitcoin4157
    @bdbitcoin4157 2 роки тому

    Hello breather help Plesse

    • @gilgeekify
      @gilgeekify  2 роки тому

      Hello, what do you mean? 🤔

  • @dagreenboi
    @dagreenboi Рік тому

    bist du deutscher?

    • @gilgeekify
      @gilgeekify  Рік тому

      No

    • @dagreenboi
      @dagreenboi Рік тому

      @@gilgeekify okay because the Microsoft website was german

    • @gilgeekify
      @gilgeekify  Рік тому

      Yes! I was using a VPN at the time of recording the video 🤠

    • @dagreenboi
      @dagreenboi Рік тому

      @@gilgeekify okay