Generate the chrome extension files

igorfv · Jun 2, 2022 · 1e2c1cd · 1e2c1cd
1 parent c4f371f
commit 1e2c1cd
Show file tree

Hide file tree

Showing 19 changed files with 1,228 additions and 989 deletions.
diff --git a/README.md b/README.md
@@ -5,12 +5,10 @@
 
 ## How to run
 
-### `npm dev` or `npm start`
+### `npm start`
 
-Runs the app in the development mode.  
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
-
-The page will reload if you make edits.  
+Runs the app in the development mode. Once the app is running it will update the `dist` on every change.  
+Open the [chrome://extensions](chrome://extensions) and click `load unpacked` to add the local extension, once the prompt opens select the `dist` folder.
 
 ### `npm run build`
 

diff --git a/assets/icon-128.png b/assets/icon-128.png
diff --git a/assets/icon-16.png b/assets/icon-16.png
diff --git a/assets/icon-48.png b/assets/icon-48.png
diff --git a/devtools/index.html b/devtools/index.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script type="module" src="./index.tsx"></script>
+  </head>
+</html>
diff --git a/devtools/index.tsx b/devtools/index.tsx
@@ -0,0 +1,9 @@
+chrome.devtools.panels.create(
+  "Apollo Tracing",
+  "assets/icon-16.png",
+  "devtools/panel.html",
+  (panel) => {
+    if (chrome.runtime.lastError) console.error(chrome.runtime.lastError);
+    console.log("panel", panel);
+  }
+);
diff --git a/devtools/panel.html b/devtools/panel.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>GraphQL Monitor</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./panel.tsx"></script>
+  </body>
+</html>
diff --git a/devtools/panel.tsx b/devtools/panel.tsx
@@ -0,0 +1,14 @@
+import { render, MountableElement } from "solid-js/web";
+import { onCleanup, createSignal } from "solid-js";
+
+const CountingComponent = () => {
+  const [count, setCount] = createSignal(0);
+  const interval = setInterval(() => setCount((count) => count + 1), 1000);
+  onCleanup(() => clearInterval(interval));
+  return <div>Count value is {count()}</div>;
+};
+
+render(
+  () => <CountingComponent />,
+  document.getElementById("root") as MountableElement
+);
diff --git a/index.html b/index.html
diff --git a/package.json b/package.json
@@ -1,15 +1,14 @@
 {
-  "name": "vite-template-solid",
-  "version": "0.0.0",
-  "description": "",
+  "name": "graphql-monitor",
+  "version": "2.0.0",
+  "description": "Monitor GraphQL connections",
   "scripts": {
     "start": "vite",
-    "dev": "vite",
-    "build": "vite build",
-    "serve": "vite preview"
+    "build": "vite build"
   },
   "license": "MIT",
   "devDependencies": {
+    "@crxjs/vite-plugin": "^1.0.7",
     "typescript": "^4.6.4",
     "vite": "^2.9.9",
     "vite-plugin-solid": "^2.2.6"