From 47e78d13692a76120647ff15f45d8370e6d57557 Mon Sep 17 00:00:00 2001
From: Sriram Hariharan <sghsri@gmail.com>
Date: Fri, 29 Mar 2024 18:51:09 -0500
Subject: [PATCH] updated createShadowRoot to not get overwritten by react
 renders

---
 package.json                |  2 +-
 src/dom/createShadowRoot.ts | 13 ++++++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 4a24544..b9d91f7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "chrome-extension-toolkit",
-  "version": "0.0.60",
+  "version": "0.0.61",
   "description": "A template for creating npm packages using TypeScript and VSCode",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
diff --git a/src/dom/createShadowRoot.ts b/src/dom/createShadowRoot.ts
index 8eedeb1..0a2251a 100644
--- a/src/dom/createShadowRoot.ts
+++ b/src/dom/createShadowRoot.ts
@@ -2,7 +2,9 @@
  * An extension of HTMLDivElement that represents a shadow root for use within an Extension Content Script.
  */
 interface HTMLShadowDOMElement extends HTMLDivElement {
-    shadowRoot: ShadowRoot;
+    shadowRoot: ShadowRoot & {
+        INJECTION_POINT: HTMLDivElement;
+    };
     /**
      * Adds a style sheet to the shadow root.
      * @param path the path to the style sheet relative to the extension's root directory. uses chrome.runtime.getURL to get the absolute path.
@@ -31,12 +33,17 @@ export function createShadowDOM(id: string, options?: ShadowRootInit): HTMLShado
         ...(options || {}),
     });
 
-    div.addStyle = async function (path: string) {
+    const INJECTION_POINT = document.createElement('div');
+    INJECTION_POINT.id = 'INJECTION_POINT';
+    div.shadowRoot.appendChild(INJECTION_POINT);
+    div.shadowRoot.INJECTION_POINT = INJECTION_POINT;
+
+    div.addStyle = async (path: string) => {
         const style = await fetch(chrome.runtime.getURL(path));
         const styleNode = document.createElement('style');
         const parsedStyle = await style.text();
         styleNode.textContent = parsedStyle;
-        this.shadowRoot.appendChild(styleNode);
+        div.shadowRoot.appendChild(styleNode);
     };
 
     html.appendChild(div);