Version 1 : dashboard + ingame video + data table

package.json

@@ -1,7 +1,7 @@
 {
   "name": "returners-open-loot-chrome-extension",
   "displayName": "Returners  - Open Loot",
-  "version": "0.3.0",
+  "version": "1.0.0",
   "description": "Giving super power to Open Loot",
   "author": "Zet",
   "packageManager": "npm@8.19.2",

src/contents/creatorCode.tsx

@@ -1,18 +1,24 @@
-export {}
-
+import type { PlasmoContentScript } from "plasmo";
 
+export const config: PlasmoContentScript = {
+    matches: ["https://openloot.com/*"],
+  }
+
 
 
 let previousUrl = '';
 const observer = new MutationObserver(function(mutations) {
-if (location.href !== previousUrl) {
+    if (location.href !== previousUrl) {
     previousUrl = location.href;
     console.log(`URL changed to ${location.href}`);
     if ( location.href.includes('https://openloot.com/checkout?orderId')) injectCreatorCode()
+    if ( location.href.includes('https://openloot.com/items/BT0/')) injectVideo()
     }
 });
-const config = {subtree: true, childList: true};
-observer.observe(document, config);
+const configObs = {
+    subtree: true, childList: true};
+observer.observe(document, configObs);
+
 
 
 
@@ -29,4 +35,18 @@ function injectCreatorCode(){
 
 
     },1500)
-}
+}
+
+
+function injectVideo(){
+    console.log('in inject video');
+    setTimeout(()=>{  
+        let videoContainer  = document.createElement('div')
+        videoContainer.id = "video-container"
+        document.querySelector('main .chakra-container ').appendChild(videoContainer)
+        document.querySelector('#video-container').innerHTML = '<br><p>A video showcasing how we could have an in-game preview for <b>each NFT</b></p> <iframe width="560" height="315" src="https://www.youtube.com/embed/oGnnoJ76ru8" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>'
+
+
+    },1500)
+}
+export {}