Unable to attach my injected content script to an insagram page :(

Question

Ive spent the last week or so trying to create a chrome extension that injects a div at the top of a users instagram page. (Im hoping to be able to then change this to a mini react app which i assume will come with its own challenges since instagram uses react - but a problem for a later date!)

My content script is simple:

$("body").prepend(
    `<div id="test">
        <h1>test</h1>
    </div>`
);

And my manifest looks like this:

{
"manifest_version": 3,
"name": "TEST",
"description": "Test",
"version": "0.11",

"action": {
    "default_popup": "popup.html"
},

"background": {
    "service_worker" : "background.js"
},
"content_scripts" : [
    {
        "matches" : ["https://instagram.com/*"],
        "js": ["jquery.js", "contentScript.js"],
        "css": ["style.css"],

        "all_frames": true
    }
],
"permissions" : [
    "tabs", "activeTab", "storage"
],
"host_permissions": [
    "https://instagram.com/*"
]
}

Im unsure at whats going on. Ive tried waiting with things like setInterval and ive tried changing the div im attaching to but with no luck.

Also this works with numerous other webpages (eg stackoverflow and blank.org) but not with instagram! Any ideas or thoughts would be greatly appreciated.

Thankyou!