chore(extension): adds permissions (#2713)

floating-ui · Jan 11, 2024 · 7255411 · 7255411
1 parent 292780d
commit 7255411
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 41 deletions.
diff --git a/extension/public/content-script.js b/extension/public/content-script.js
diff --git a/extension/public/devtools-page.js b/extension/public/devtools-page.js
@@ -1,3 +1,6 @@
+//@ts-check
+/// <reference types="chrome" />
+
 // biome-ignore lint/style/noRestrictedGlobals:
 chrome.devtools.panels.elements.createSidebarPane(
   'Floating UI',

diff --git a/extension/public/manifest.json b/extension/public/manifest.json
@@ -9,12 +9,6 @@
     "48": "./images/favicon-32x32.png",
     "128": "./images/android-chrome-192x192.png"
   },
-  "content_scripts": [
-    {
-      "matches": ["<all_urls>"],
-      "js": ["content-script.js"],
-      "all_frames": true,
-      "run_at": "document_start"
-    }
-  ]
+  "permissions": ["scripting"],
+  "host_permissions": ["<all_urls>"]
 }
diff --git a/extension/src/contexts/devtools.tsx b/extension/src/contexts/devtools.tsx
@@ -5,7 +5,11 @@
  */
 
 import * as React from 'react';
-import {CONTROLLER, ELEMENT_METADATA} from '../utils/constants';
+import {
+  CONTROLLER,
+  ELEMENT_METADATA,
+  type SERIALIZED_DATA_CHANGE,
+} from '../utils/constants';
 import {ReferenceId} from '../utils/references';
 import themes from '../styles/themes.module.css';
 
@@ -72,6 +76,35 @@ export const useDevtools = () => React.useContext(DevtoolsContext);
 
 export const useChromeDevtoolsContextValue = (): DevtoolsContextValue => {
   const [error, setError] = React.useState<unknown>(undefined);
+  React.useEffect(() => {
+    // biome-ignore lint/style/noRestrictedGlobals:
+    chrome.scripting.executeScript({
+      // biome-ignore lint/style/noRestrictedGlobals:
+      target: {tabId: chrome.devtools.inspectedWindow.tabId, allFrames: true},
+      /**
+       * Everything in this function should be local to the inspected page
+       * nothing should be injected from the extension
+       */
+      func: () => {
+        // FIXME: devtools should be agnostic of serialization
+        // there should be a middle layer to abstract messaging and serialization
+        const LOCAL_SERIALIZED_DATA_CHANGE: typeof SERIALIZED_DATA_CHANGE =
+          '__FUIDT_SERIALIZED_DATA_CHANGE__';
+        window.addEventListener(
+          'message',
+          (event) => {
+            if (
+              event.data === LOCAL_SERIALIZED_DATA_CHANGE
+            ) {
+              // biome-ignore lint/style/noRestrictedGlobals:
+              chrome.runtime.sendMessage(event.data);
+            }
+          },
+          false,
+        );
+      },
+    });
+  }, []);
   return {
     error,
     // biome-ignore lint/style/noRestrictedGlobals: @see top of file

diff --git a/extension/src/views/fluentui/components/FluentUIMiddleware.tsx b/extension/src/views/fluentui/components/FluentUIMiddleware.tsx
@@ -64,7 +64,6 @@ export const FluentUIMiddleware = React.memo(() => {
   );
   const selectedSerializedDataIndex = serializedData.length - 1 - index;
   const selectedSerializedData = serializedData[selectedSerializedDataIndex];
-  console.log(serializedData);
   const {
     middlewareState: {middlewareData, y, x, strategy, rects},
     initialPlacement,

diff --git a/extension/vite.config.mts b/extension/vite.config.mts
@@ -8,6 +8,10 @@ import {defineViteConfig} from 'config';
 // @storybook/react-vite seems to be using vite v4 but it works fine with vite v5
 export default defineViteConfig({
   plugins: [react()],
+  build: {
+    // minification is discouraged for extensions as the code will be reviewed before publishing
+    minify: false
+  },
   define: {
     // This is only used in storybook
     __DEV__: true,