├── How To Inject JavaScript And CSS To Any Website.png ├── Injector Extension ├── Enhanced Version │ ├── YouTube-Thumbnail.png │ ├── Usage-With-executeScript.js │ ├── manifest.json │ ├── Usage-With-registerContentScripts.js │ ├── Useful-Links.txt │ └── injector.js ├── manifest.json └── app.js ├── LICENSE └── README.md /How To Inject JavaScript And CSS To Any Website.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/saeedkohansal/Injector-Extension/HEAD/How To Inject JavaScript And CSS To Any Website.png -------------------------------------------------------------------------------- /Injector Extension/Enhanced Version/YouTube-Thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/saeedkohansal/Injector-Extension/HEAD/Injector Extension/Enhanced Version/YouTube-Thumbnail.png -------------------------------------------------------------------------------- /Injector Extension/Enhanced Version/Usage-With-executeScript.js: -------------------------------------------------------------------------------- 1 | chrome.scripting.executeScript({ 2 | target: { tabId: tabId, allFrames: true }, 3 | files: ["script.js"], 4 | /* 5 | • Possible values are: 6 | "ISOLATED" and "MAIN" 7 | • Equivalent values are: 8 | chrome.scripting.ExecutionWorld.ISOLATED and chrome.scripting.ExecutionWorld.MAIN 9 | */ 10 | world: "MAIN" 11 | }); 12 | -------------------------------------------------------------------------------- /Injector Extension/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Injector", 3 | "description": "Inject Your Custom JavaScript And CSS To Any Website.", 4 | "version": "0.0.0.1", 5 | "manifest_version": 3, 6 | "content_scripts": [ 7 | { 8 | "matches": [ 9 | "https://*.youtube.com/*", 10 | "https://*.google.com/*", 11 | "https://*.microsoft.com/*" 12 | ], 13 | "js": [ 14 | "app.js" 15 | ] 16 | } 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /Injector Extension/Enhanced Version/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Injector", 3 | "description": "Inject Your Custom Inline JavaScript And Script Src Link Into Any Website.", 4 | "manifest_version": 3, 5 | "version": "0.0.0.1", 6 | "content_scripts": [ 7 | { 8 | "world": "MAIN", 9 | "all_frames": true, 10 | "run_at": "document_idle", 11 | "matches": [ 12 | "" 13 | ], 14 | "js": [ 15 | "injector.js" 16 | ] 17 | } 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /Injector Extension/Enhanced Version/Usage-With-registerContentScripts.js: -------------------------------------------------------------------------------- 1 | chrome.scripting.registerContentScripts([ 2 | { 3 | id: "my-content-script", 4 | matches: ["https://*.example.com/*"], 5 | runAt: "document_start", 6 | js: ["content-script.js"], 7 | /* 8 | • Possible values are: 9 | "ISOLATED" and "MAIN" 10 | • Equivalent values are: 11 | chrome.scripting.ExecutionWorld.ISOLATED and chrome.scripting.ExecutionWorld.MAIN 12 | */ 13 | world: "MAIN", 14 | allFrames: true 15 | } 16 | ]); 17 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Saeed Kohansal 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Injector Chrome Extension 2 | 3 | _How To Inject JavaScript And CSS Into Any Website - Build A Chrome Extension From Scratch_ 4 | 5 | ![Thumbnail1](https://raw.githubusercontent.com/saeedkohansal/Injector-Extension/main/How%20To%20Inject%20JavaScript%20And%20CSS%20To%20Any%20Website.png "Thumbnail 1") 6 | ![Thumbnail2](https://raw.githubusercontent.com/saeedkohansal/Injector-Extension/main/Injector%20Extension/Enhanced%20Version/YouTube-Thumbnail.png "Thumbnail 2") 7 | 8 | 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. 9 | 10 | ## Video Tutorial [ How To Create Chrome Extension From Scratch ] 11 | [https://youtu.be/mgFo3fxuUyA](https://youtu.be/mgFo3fxuUyA) 12 | 13 | ## Video Tutorial [ How To Inject Inline JavaScript And Script Src Link ] 14 | [https://youtu.be/5SuWCBFPwgs](https://youtu.be/5SuWCBFPwgs) 15 | 16 |   17 | 18 | ## If You Enjoy My Content, Please Support Me 😍🙏 19 | 20 | 💙 PAYPAL DONATION 21 | 22 | https://paypal.me/gilgeekify 23 | 24 | ❤️ PATREON 25 | 26 | https://www.patreon.com/gilgeekify 27 | 28 | 💛 BUY ME A COFFEE 29 | 30 | https://www.buymeacoffee.com/gilgeekify 31 | 32 | 🪙 My Public Address To Receive BTC • Bitcoin 33 | 34 | bc1qerc5ev074cqknu9nz589w4vjf5ecmhuc2df83h 35 | 36 | 🥈 My Public Address To Receive ETH • Ethereum 37 | 38 | 0x566A47B9731209A5144336D274D44224bfb9C0ea 39 | -------------------------------------------------------------------------------- /Injector Extension/Enhanced Version/Useful-Links.txt: -------------------------------------------------------------------------------- 1 | A Stack Overflow excellent answer (Great thanks to Rob W and wOxxOm) 2 | https://stackoverflow.com/questions/9515704/access-variables-and-functions-defined-in-page-context-using-a-content-script/9517879#9517879 3 | 4 | Manifest - Content Security Policy (MDN - Mozilla Developer Network) 5 | https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_security_policy 6 | 7 | Manifest - Content Security Policy (Chrome Developers) 8 | https://developer.chrome.com/docs/extensions/mv3/manifest/content_security_policy/ 9 | 10 | Content scripts (Chrome Developers) 11 | https://developer.chrome.com/docs/extensions/mv3/content_scripts/ 12 | 13 | Content scripts - Run time (Chrome Developers) 14 | https://developer.chrome.com/docs/extensions/mv3/content_scripts/#run_time 15 | 16 | Content scripts - Specify frames (Chrome Developers) 17 | https://developer.chrome.com/docs/extensions/mv3/content_scripts/#frames 18 | 19 | Content scripts - Inject scripts (Chrome Developers) 20 | https://developer.chrome.com/docs/extensions/mv3/content_scripts/#functionality 21 | 22 | Content scripts - Work in isolated worlds (Chrome Developers) 23 | https://developer.chrome.com/docs/extensions/mv3/content_scripts/#isolated_world 24 | 25 | chrome.extensionTypes - RunAt (Chrome Developers) 26 | https://developer.chrome.com/docs/extensions/reference/extensionTypes/#type-RunAt 27 | 28 | chrome.extensionTypes - InjectDetails (Chrome Developers) 29 | https://developer.chrome.com/docs/extensions/reference/extensionTypes/#type-InjectDetails 30 | 31 | chrome.scripting (Chrome Developers) 32 | https://developer.chrome.com/docs/extensions/reference/scripting/ 33 | 34 | chrome.scripting.executeScript (Chrome Developers) 35 | https://developer.chrome.com/docs/extensions/reference/scripting/#method-executeScript 36 | 37 | chrome.scripting.registerContentScripts (Chrome Developers) 38 | https://developer.chrome.com/docs/extensions/reference/scripting/#method-registerContentScripts 39 | 40 | chrome.scripting.ExecutionWorld (Chrome Developers) 41 | https://developer.chrome.com/docs/extensions/reference/scripting/#type-ExecutionWorld 42 | 43 | chrome.scripting.ExecutionWorld (MDN - Mozilla Developer Network) 44 | https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/scripting/ExecutionWorld 45 | -------------------------------------------------------------------------------- /Injector Extension/app.js: -------------------------------------------------------------------------------- 1 | // Get The URL 2 | const site = window.location.hostname 3 | 4 | // alert("Injector - The JavaScript has been injected to: " + site + " 🤖") 5 | 6 | // Add Custom CSS - Function 7 | const Add_Custom_Style = css => document.head.appendChild(document.createElement("style")).innerHTML = css 8 | 9 | // Create Custom Element - Function 10 | function Create_Custom_Element(tag, attr_tag, attr_name, value) { 11 | const custom_element = document.createElement(tag) 12 | custom_element.setAttribute(attr_tag, attr_name) 13 | custom_element.innerHTML = value 14 | document.body.append(custom_element) 15 | } 16 | 17 | // JS Codes For youtube.com 18 | if (site.includes("youtube.com")) { 19 | /* -------------- */ 20 | /* Add Custom CSS */ 21 | /* -------------- */ 22 | Add_Custom_Style(` 23 | @import url("https://fonts.googleapis.com/css?family=Raleway"); 24 | 25 | * { 26 | font-family: "Raleway" !important; 27 | color: #00ff40 !important; 28 | } 29 | 30 | ytd-channel-about-metadata-renderer { 31 | zoom: 1.6; 32 | } 33 | 34 | #meta.ytd-c4-tabbed-header-renderer { 35 | zoom: 1.3; 36 | } 37 | 38 | #js-custom-element { 39 | font-size: 60px; 40 | padding: 150px 0; 41 | color: #ff0037 !important; 42 | background-color: #fffffff2; 43 | position: fixed; 44 | top: 0; 45 | text-align: center; 46 | width: 100%; 47 | z-index: 999999; 48 | } 49 | 50 | .js-custom-element { 51 | font-size: 60px; 52 | padding: 150px 0; 53 | color: #008dff !important; 54 | background-color: #fffffff2; 55 | position: fixed; 56 | bottom: 0; 57 | text-align: center; 58 | width: 100%; 59 | z-index: 999999; 60 | } 61 | `) 62 | 63 | /* ---------------------- */ 64 | /* Create Custom Elements */ 65 | /* ---------------------- */ 66 | // Create_Custom_Element( 67 | // "div", 68 | // "id", 69 | // "js-custom-element", 70 | // "My Custom JS Element 1" 71 | // ) 72 | // Create_Custom_Element( 73 | // "div", 74 | // "class", 75 | // "js-custom-element", 76 | // "My Custom JS Element 2" 77 | // ) 78 | } 79 | 80 | // JS Codes For google.com 81 | if (site.includes("google.com")) { } 82 | 83 | // JS Codes For microsoft.com 84 | if (site.includes("microsoft.com")) { } -------------------------------------------------------------------------------- /Injector Extension/Enhanced Version/injector.js: -------------------------------------------------------------------------------- 1 | // Get active tab's hostname 2 | const site = window.location.hostname 3 | 4 | // Function to inject inline JavaScript code 5 | function injectJSCode(code) { 6 | // Create a new `