How to Inject Javascript to a Site From Chrome Extension

Published on Jul 3, 2021

Reading time: 1 min

Introduction

I was watching a Twitch streamer struggle trying to do this. So I thought it might help someone out there.

You can inject javascript code into any site with a chrome extension, with this you can do many things. Like creating new elements and adding them to the DOM or managing events of certain elements, what you can do in your application you can do it when injecting it.

Manifest version 3

If you want your script to run on a set of pages you have defined, the manifest for your chrome extension which is needed for it to work (you can have a look a the documentation), needs to have some additional elements. content_scripts and host_permissions

Both the matches and host_permissions should specify match patterns. In this example inject.js only runs whenever the site is google.com, and you have permissions in all the urls.

{
    "name": "inject",
    "version": "1.0",
    "manifest_version": 3,
    "content_scripts": [
        {
            "matches": ["*://*.google.com/*"],
            "js": ["inject.js"],
        }
    ],
    "host_permissions": ["<all_urls>"],
}

This is an example of the code that can be injected. You can add event listeners, get and add elements from the DOM as I mentioned before.

function init() {
    const el = document.createElement("input")
    el.setAttribute("type", "checkbox")
    document.body.appendChild(el)
    el.addEventListener("click", (event) => {
        console.log(event.target.checked)
    })
}

init()
Edit this page on Github

Share this Article

Comments

utteranc.es uses Github Issues, no data is stored.
You can disable it from your authorized apps.