add extension support

Author: Kivylius

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "webdeck",
-  "version": "1.2.6",
+  "version": "1.3.0",
   "private": true,
   "dependencies": {
     "@babel/core": "7.23.7",
@@ -58,6 +58,7 @@
   },
   "devDependencies": {
     "@svgr/webpack": "^8.1.0",
+    "@types/chrome": "^0.0.268",
     "@types/styled-components": "^5.1.34",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",

package.json

@@ -8,19 +8,23 @@ import { AppContext } from "./contexts/AppContext";
 import { usePlugins } from "./hooks/usePlugins";
 import { useProfiles } from "./hooks/useProfiles";
 import { useDeck } from "./hooks/useDeck";
+import { useExtension } from "./hooks/useExtension";
 
 export type AppContainerType = {
   deck: ReturnType<typeof useDeck>;
   profiles: ReturnType<typeof useProfiles>;
   plugins: ReturnType<typeof usePlugins>;
+  extension: ReturnType<typeof useExtension>;
 };
 
 export const Container = () => {
+  const extension = useExtension();
   const profiles = useProfiles();
   const plugins = usePlugins();
-  const deck = useDeck(profiles, plugins);
+  const deck = useDeck(profiles, plugins, extension);
+
   return (
-    <AppContext.Provider value={{ deck, profiles, plugins }}>
+    <AppContext.Provider value={{ deck, profiles, plugins, extension }}>
       {window.location.search.includes("debug") && (
         <>
           <div>version: {packageJSON.version}</div>

src/bootstrap.tsx

@@ -1,5 +1,6 @@
 import { FC, lazy, useEffect, useState, Suspense } from "react";
 import { useAppContext } from "../../../contexts/AppContext";
+import { EXTENSION_ID } from "../../../hooks/useExtension";
 
 type FederatedComponent = FC<{
   key: string;
@@ -10,12 +11,13 @@ type FederatedComponent = FC<{
 }>;
 
 export const Plugin: FC = () => {
-  const { plugins, profiles, deck } = useAppContext();
+  const { plugins, profiles, deck, extension } = useAppContext();
   const [Plugin, setPlugin] = useState<FederatedComponent | null>(null);
 
   const key = deck.selectedKey!;
   const keyConfig = profiles.profile.keys[key];
   const module = plugins.modules[keyConfig?.plugin];
+  const manifest = plugins.manifests?.[keyConfig?.plugin];
   const loaded = module?.loaded;
 
   useEffect(() => {
@@ -44,6 +46,27 @@ export const Plugin: FC = () => {
         overflow: "hidden",
       }}
     >
+      {manifest?.extension_required === true &&
+      extension.installed === false ? (
+        <div
+          style={{
+            marginBottom: 8,
+            padding: 8,
+            border: "1px solid black",
+            background: "orange",
+            borderRadius: 8,
+          }}
+        >
+          <span>This plugin required the </span>
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            href={`https://chrome.google.com/webstore/detail/${EXTENSION_ID}`}
+          >
+            Webdeck Extension
+          </a>{" "}
+        </div>
+      ) : null}
       <Suspense fallback="Loading System">
         {Plugin && keyConfig?.config && module ? (
           <Plugin

src/components/Controller/Plugin/Plugin.tsx

@@ -13,12 +13,14 @@ import {
 } from "../utils/physicalDeck";
 import { useDrawKey } from "./useDrawKey";
 import { DrawKey } from "../types/Module";
+import { useExtension } from "./useExtension";
 
 type Initer = Record<string, { plugin: string; destructor: () => void }>;
 
 export const useDeck = (
   profiles: ReturnType<typeof useProfiles>,
-  plugins: ReturnType<typeof usePlugins>
+  plugins: ReturnType<typeof usePlugins>,
+  extension: ReturnType<typeof useExtension>
 ) => {
   const [editMode, setEditMode] = useState(true);
   const [selectedKey, setSelectedKey] = useState<number | undefined>(0);
@@ -47,6 +49,11 @@ export const useDeck = (
           ...key,
           keyIndex,
           setIcon: (icon: string) => profiles.setIcon(keyIndex, icon),
+          extension: {
+            fetch: extension.fetch,
+            data: extension.data,
+            installed: extension.installed,
+          },
         });
       } catch (e) {
         console.warn(

src/hooks/useDeck.ts

@@ -0,0 +1,55 @@
+import { useEffect, useState } from "react";
+
+export const EXTENSION_ID = "njlliemmhglnlfelmmoljccgpdipigff";
+
+export const useExtension = () => {
+  const [installed, setInstalled] = useState<null | boolean>(null);
+  const [data, setData] = useState({});
+
+  const getExtenison = () => {
+    if (chrome?.runtime?.sendMessage) {
+      chrome.runtime.sendMessage(
+        EXTENSION_ID,
+        { type: "health" },
+        (response) => {
+          setInstalled(true);
+          setData(response);
+        }
+      );
+    } else {
+      setInstalled(false);
+      setData({});
+    }
+  };
+
+  const fetch = async (
+    url: string,
+    {
+      method,
+      body,
+      options,
+    }: {
+      method?: string;
+      body?: string;
+      options?: Record<string, unknown>;
+    } = { method: "get" }
+  ) => {
+    return new Promise((resolve) => {
+      if (chrome?.runtime?.sendMessage) {
+        chrome.runtime.sendMessage(
+          EXTENSION_ID,
+          { type: "fetch", method, url, body, ...options },
+          (response) => resolve(response)
+        );
+      } else {
+        resolve({ error: true, e: "no_extension" });
+      }
+    });
+  };
+
+  useEffect(() => {
+    getExtenison();
+  }, []);
+
+  return { installed, getExtenison, fetch, data };
+};

src/hooks/useExtension.ts

@@ -12,6 +12,7 @@ export type ModuleManifest = {
   icons?: Record<string, ModuleIcon>;
   version?: string;
   bespoke?: boolean;
+  extension_required?: boolean;
 };
 
 export type DrawKey = ({
@@ -26,6 +27,7 @@ type ModuleOnPress = {
   config: Record<string | number, unknown>;
   keyIndex: number;
   setIcon: unknown;
+  extension: unknown;
 };
 
 type ModuleInit = {