Update Browser Extension's Vite Config (#2540)

* messaging from background ➡️  content script; chrome + edge troubleshooting

* display editorState changes in React UI

* whittle away TS errors

* clean up folder structure

* change background + content scripts to ts files

* rename devtools.js to .ts; debug in Chrome/Edge

* add ES6-style import in browser extension

* revert ES6-style import in content/background scripts

This reverts commit 84680f310dc7b38bcafea18fde5ba83a537671ab.

* remove linter disables

* convert types to any

Author: noi5e

packages/lexical-devtools/public/background.js

@@ -3,22 +3,22 @@
   "description": "Developer Tools for Lexical",
   "version": "0.0",
   "manifest_version": 2,
-  "devtools_page": "devtools.html",
+  "devtools_page": "src/devtools/index.html",
   "browser_action": {
-    "default_popup": "popup.html",
+    "default_popup": "src/popup/index.html",
     "default_title": "Lexical Developer Tools"
   },
   "icons": {
     "16": "favicon-16x16.png",
     "48": "favicon-32x32.png"
   },
   "background": {
-    "scripts": ["background.js"]
+    "scripts": ["src/background/index.js"]
   },
   "content_scripts": [
     {
       "matches": ["<all_urls>"],
-      "js": ["content.js"]
+      "js": ["src/content/index.js"]
     }
   ],
   "permissions": ["activeTab"]

packages/lexical-devtools/public/devtools.html

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+// Create messaging connection to send editorState updates to Lexical DevTools App.
+const ports = {}; // Each tab will have a separate messaging port for the devTools app & the inspectedWindow's content script, eg. { tabId: { reactPort, contentScriptPort } }
+
+// The Lexical DevTools React UI sends a message to initialize the port.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+chrome.runtime.onConnect.addListener(function (port: any) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  port.onMessage.addListener((message: any) => {
+    if (message.name === 'init' && message.type === 'FROM_APP') {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (ports as any)[message.tabId].react = port;
+      return;
+    }
+
+    if (message.name === 'init' && message.type === 'FROM_CONTENT') {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (ports as any)[port.sender.tab.id] = {};
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (ports as any)[port.sender.tab.id].content = port;
+      return;
+    }
+
+    if (message.name === 'editor-update') {
+      const tabId = port.sender.tab.id;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (ports as any)[tabId].react.postMessage({
+        editorState: message.editorState,
+      });
+    }
+  });
+});

packages/lexical-devtools/public/manifest.json

@@ -5,10 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-'use strict';
-
-// eslint-disable-next-line no-undef
-let port = chrome.runtime.connect();
+const port = chrome.runtime.connect();
 
 port.postMessage({
   name: 'init',

packages/lexical-devtools/src/background/index.ts

@@ -0,0 +1 @@
+<script type="module" src="./index.ts"></script>

…kages/lexical-devtools/public/content.js …es/lexical-devtools/src/content/index.tspackages/lexical-devtools/public/content.js renamed to packages/lexical-devtools/src/content/index.ts packages/lexical-devtools/public/content.js renamed to packages/lexical-devtools/src/content/index.ts

@@ -5,17 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-
-'use strict';
-
 // Create the panel which appears within the browser's DevTools, loading the Lexical DevTools App within index.html.
-// eslint-disable-next-line no-undef
-chrome.devtools.panels.create('Lexical', 'favicon-32x32.png', '../index.html');
+chrome.devtools.panels.create(
+  'Lexical',
+  '/../../favicon-32x32.png',
+  '/src/panel/index.html',
+);
 
 // Use devtools.inspectedWindow.eval() to get editorState updates. For more info on security concerns:
 //   https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts
 //   https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools/inspectedWindow/eval
-// eslint-disable-next-line no-undef
 chrome.devtools.inspectedWindow
   // Attach a registerUpdateListener within the window to subscribe to changes in editorState.
   // After the initial registration, all editorState updates are done via browser.runtime.onConnect & window.postMessage

packages/lexical-devtools/src/devtools/index.html

@@ -6,18 +6,18 @@
  *
  */
 
-import './App.css';
+import './index.css';
 
 import * as React from 'react';
 import {useEffect, useRef, useState} from 'react';
 
-import logo from './images/lexical-white.png';
+import logo from '../../../images/lexical-white.png';
 
 function App(): JSX.Element {
   const [count, setCount] = useState<number>(0);
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [editorState, setEditorState] = useState<object>({});
-  const port = useRef();
+  const port = useRef<object>({});
 
   useEffect(() => {
     // create and initialize the messaging port to receive editorState updates