I'm writing a chrome extension, that is supposed to do some basic DOM injection, However I'm having difficulties accessing the webpage from the extension, since the content script isn't triggering. Neither is there an output on the console, nor is the data being injected.
manifest.json
{
"name": "[REDACTED]",
"description": "[REDACTED]",
"version": "1.0",
"manifest_version": 3,
"content_scripts" : [
{
"matches": ["https://projects.[REDACTED].com/[REDACTED]"],
"js": ["content_script.js"]
}
],
"background": {
"service_worker": "service_worker.js"
},
"permissions": ["storage"]
}
main.tsx
import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App'
debugger;
// Inject Root
const app = document.createElement('div')
app.id = 'react-root'
console.log("main");
alert("main");
debugger;
document.body.appendChild(app);
const container = document.getElementById('react-root');
export const root = createRoot(container!);
root.render(<App />)
debugger;
App.tsx
import React, { useState, useEffect } from 'react'
import Tasks from "./components/Tasks";
import "react-dom";
import { createRoot } from 'react-dom/client';
function useMutationObserver (
ref: any,
callback: any,
options = {
attributes: true,
characterData: true,
childList: true,
subtree: true,
}
) {
useEffect(() => {
if (ref.current) {
const observer = new MutationObserver(callback);
observer.observe(ref.current, options);
return () => observer.disconnect();
}
}, [callback, options]);
};
function App() {
const [mutState, setMutState] = useState(false);
function _injectElements() {
document.getElementById("newtaskheading")!.innerHTML = "<div id='inject-here'></div>";
const root = createRoot(document.getElementById("inject-here")!);
root.render(<Tasks></Tasks>)
}
useMutationObserver(document.getElementsByClassName("slideFormName")[0], () => {
if (mutState == true) {
setMutState(false);
} else {
setMutState(true);
}
});
return (
<h1>E</h1>
);
}
export default App