Remove SDK injection (#101)

bryce-fitzsimons · web-flow · commit 42db08286e7c · 2025-04-16T10:25:04.000-07:00
diff --git a/README.md b/README.md
@@ -64,10 +64,9 @@ Some notes
 
 ## Changelog
 
-*1.2.0* (2025-04-07)
+*1.2.1* (2025-04-16)
 - Support for backend SDK debugging (overrides, logs)
 - Feature and Experiment views now show both simulated and live evaluations when available
-- Ability to inject a "debugging SDK" onto pages with no front-end SDKs
 - UI updates
 - Bug fixes
 
diff --git a/devtools.d.ts b/devtools.d.ts
@@ -254,8 +254,6 @@ export type SDKHealthCheckResult = {
   version?: string;
   hasWindowConfig?: boolean;
   sdkFound?: boolean;
-  sdkInjected?: boolean;
-  sdkAutoInjected?: boolean;
   externalSdks?: Record<string, ExternalSdkInfo>;
   clientKey?: string;
   isLoading?: boolean;
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gb-devtools",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "private": true,
   "scripts": {
     "dev": "webpack --config webpack/webpack.dev.js --watch",
diff --git a/public/manifest.chrome.json b/public/manifest.chrome.json
@@ -3,7 +3,7 @@
 
   "name": "GrowthBook DevTools",
   "description": "GrowthBook DevTools helps you debug feature flags and experiments and design A/B tests visually — all from your browser.",
-  "version": "1.2.0",
+  "version": "1.2.1",
 
   "content_scripts": [
     {
diff --git a/public/manifest.firefox.json b/public/manifest.firefox.json
@@ -3,7 +3,7 @@
 
   "name": "GrowthBook DevTools",
   "description": "GrowthBook DevTools helps you debug feature flags and experiments and design A/B tests visually — all from your browser.",
-  "version": "1.2.0",
+  "version": "1.2.1",
 
   "browser_specific_settings": {
     "gecko": {
diff --git a/src/app/components/SdkTab/SdkItemPanel.tsx b/src/app/components/SdkTab/SdkItemPanel.tsx
@@ -2,7 +2,6 @@ import React, { useEffect, useState } from "react";
 import {
   Button,
   Callout,
-  Dialog,
   Flex,
   IconButton,
   Link,
@@ -14,26 +13,18 @@ import {
   PiArrowsClockwise,
   PiArrowSquareOut,
   PiCaretRightFill,
-  PiCode,
-  PiCodeBold,
   PiInfoBold,
   PiWarningFill,
   PiWarningOctagonFill,
-  PiX,
   PiXBold,
 } from "react-icons/pi";
 import * as Accordion from "@radix-ui/react-accordion";
 import { useResponsiveContext } from "@/app/hooks/useResponsive";
 import { SdkItem } from "./index";
 import useSdkData from "@/app/hooks/useSdkData";
-import {
-  ClearInjectedSdkMessage,
-  InjectSdkMessage,
-  SDKHealthCheckResult,
-} from "devtools";
+import { SDKHealthCheckResult } from "devtools";
 import { getActiveTabId } from "@/app/hooks/useTabState";
 import { paddedVersionString } from "@growthbook/growthbook";
-import InjectSdkForm from "@/app/components/InjectSdk";
 
 const panelTitles: Record<SdkItem, string> = {
   status: "SDK Status",
@@ -199,15 +190,12 @@ function ItemPanel({
 
 function statusPanel({
   sdkFound,
-  sdkInjected,
-  sdkAutoInjected,
   hasPayload,
   canConnect,
   apiHost,
   clientKey,
   errorMessage,
 }: SDKHealthCheckResult) {
-  const [injectModalOpen, setInjectModalOpen] = useState(false);
   const [activeTabId, setActiveTabId] = useState<number | undefined>(undefined);
   const [refreshingSdk, setRefreshingSdk] = useState<boolean>(true);
 
@@ -229,51 +217,6 @@ function statusPanel({
     }
   };
 
-  const injectSdk = async ({
-    apiHost,
-    clientKey,
-    autoInject,
-  }: {
-    apiHost: string;
-    clientKey: string;
-    autoInject: boolean;
-  }) => {
-    setRefreshingSdk(true);
-    window.setTimeout(() => setRefreshingSdk(false), 500);
-    const msg: InjectSdkMessage = {
-      type: "GB_INJECT_SDK",
-      apiHost,
-      clientKey,
-      autoInject,
-    };
-    const activeTabId = await getActiveTabId();
-    setActiveTabId(activeTabId);
-    if (activeTabId) {
-      if (chrome?.tabs) {
-        await chrome.tabs.sendMessage(activeTabId, msg);
-      } else {
-        await chrome.runtime.sendMessage(msg);
-      }
-    }
-  };
-
-  const clearInjectedSdk = async () => {
-    setRefreshingSdk(true);
-    window.setTimeout(() => setRefreshingSdk(false), 500);
-    const msg: ClearInjectedSdkMessage = {
-      type: "GB_CLEAR_INJECTED_SDK",
-    };
-    const activeTabId = await getActiveTabId();
-    setActiveTabId(activeTabId);
-    if (activeTabId) {
-      if (chrome?.tabs) {
-        await chrome.tabs.sendMessage(activeTabId, msg);
-      } else {
-        await chrome.runtime.sendMessage(msg);
-      }
-    }
-  };
-
   useEffect(() => {
     refresh();
   }, []);
@@ -314,17 +257,6 @@ function statusPanel({
                 <PiArrowsClockwise /> Refresh DevTools
               </Button>
             </div>
-
-            <div className="mt-2">
-              <Button
-                variant="outline"
-                size="2"
-                onClick={() => setInjectModalOpen(true)}
-                disabled={refreshingSdk}
-              >
-                <PiCode /> Inject Debugging SDK...
-              </Button>
-            </div>
           </div>
         </>
       ) : (
@@ -334,39 +266,6 @@ function statusPanel({
               ? "The SDK is connected to the GrowthBook API."
               : "The SDK is not connected to the GrowthBook API."}
           </Text>
-          {sdkInjected ? (
-            <Callout.Root color="gray" size="1" className="my-2 !flex">
-              <Callout.Icon>
-                <PiCodeBold />
-              </Callout.Icon>
-              <div className="w-full">
-                <Text as="div" size="2">
-                  This SDK was injected by DevTools.
-                </Text>
-                {sdkAutoInjected ? (
-                  <div className="text-xs leading-4 mt-1">
-                    Automatically injected on all page loads.
-                  </div>
-                ) : null}
-                <div className="text-right">
-                  {!refreshingSdk ? (
-                    <Link
-                      size="1"
-                      href="#"
-                      role="button"
-                      onClick={(e) => {
-                        e.preventDefault();
-                        clearInjectedSdk();
-                      }}
-                    >
-                      <PiXBold className="inline-block mr-1" />
-                      Remove SDK
-                    </Link>
-                  ) : null}
-                </div>
-              </div>
-            </Callout.Root>
-          ) : null}
           {!canConnect && hasPayload ? (
             <Callout.Root color="violet" size="1" className="mt-2 mb-4">
               <Callout.Icon>
@@ -481,30 +380,6 @@ function statusPanel({
           </Accordion.Content>
         </Accordion.Item>
       </Accordion.Root>
-
-      <Dialog.Root
-        open={injectModalOpen}
-        onOpenChange={(o) => setInjectModalOpen(o)}
-      >
-        <Dialog.Content className="ModalBody">
-          <Dialog.Title>Inject a Debug SDK</Dialog.Title>
-          <InjectSdkForm
-            injectSdk={injectSdk}
-            close={() => setInjectModalOpen(false)}
-          />
-          <Dialog.Close style={{ position: "absolute", top: 5, right: 5 }}>
-            <IconButton
-              color="gray"
-              highContrast
-              size="1"
-              variant="outline"
-              radius="full"
-            >
-              <PiX size={20} />
-            </IconButton>
-          </Dialog.Close>
-        </Dialog.Content>
-      </Dialog.Root>
     </>
   );
 }
diff --git a/src/app/components/SdkTab/index.tsx b/src/app/components/SdkTab/index.tsx
@@ -40,7 +40,6 @@ export default function SdkTab() {
 
   const {
     sdkFound,
-    sdkInjected,
     externalSdks,
     version,
     canConnect,
@@ -53,7 +52,6 @@ export default function SdkTab() {
     usingOnFeatureUsage,
     isRemoteEval,
     usingStickyBucketing,
-    streaming,
   } = useSdkData();
 
   const numExternalSdks = Object.keys(externalSdks || {}).length;
@@ -125,16 +123,7 @@ export default function SdkTab() {
         >
           <ItemStatus
             title="SDK Status"
-            status={
-              <div className="text-right leading-4">
-                {canConnectStatus}
-                {sdkInjected ? (
-                  <div className="text-xs text-gray-10">
-                    (injected by DevTools)
-                  </div>
-                ) : null}
-              </div>
-            }
+            status={canConnectStatus}
             color={canConnectStatusColor}
           />
         </div>
@@ -148,9 +137,7 @@ export default function SdkTab() {
         >
           <ItemStatus
             title="Back-end SDKs"
-            status={
-              <div className="text-right leading-4">{numExternalSdks}</div>
-            }
+            status={numExternalSdks}
             color="gray"
           />
         </div>
@@ -218,16 +205,6 @@ export default function SdkTab() {
               />
             </div>
 
-            {/*<div*/}
-            {/*  key={`sdkTab_sdkItems_streaming`}*/}
-            {/*  className={clsx("itemCard flex items-center justify-between", {*/}
-            {/*    selected: selectedItem === "streaming",*/}
-            {/*  })}*/}
-            {/*  onClick={() => setSelectedItem("streaming")}*/}
-            {/*>*/}
-            {/*  <ItemStatus title="Streaming" status={streaming} color="gray" />*/}
-            {/*</div>*/}
-
             <div
               key={`sdkTab_sdkItems_payload`}
               className={clsx("itemCard flex items-center justify-between", {
diff --git a/src/content_script/embed_script.ts b/src/content_script/embed_script.ts

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "gb-devtools",`
`3`		`- "version": "1.2.0",`
	`3`	`+ "version": "1.2.1",`
`4`	`4`	`"private": true,`
`5`	`5`	`"scripts": {`
`6`	`6`	`"dev": "webpack --config webpack/webpack.dev.js --watch",`
Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@`
`3`	`3`
`4`	`4`	`"name": "GrowthBook DevTools",`
`5`	`5`	`"description": "GrowthBook DevTools helps you debug feature flags and experiments and design A/B tests visually — all from your browser.",`
`6`		`- "version": "1.2.0",`
	`6`	`+ "version": "1.2.1",`
`7`	`7`
`8`	`8`	`"content_scripts": [`
`9`	`9`	`{`