Second iteration ;)

package.json

@@ -6,7 +6,7 @@
   },
   "packageManager": "npm@8.5.0",
   "scripts": {
-    "prepare": "npm run build",
+    "prepare": "turbo build",
     "check-types": "tsc --noEmit",
     "build": "turbo check-types build",
     "dev": "turbo dev"
@@ -23,9 +23,12 @@
   "devDependencies": {
     "@types/chrome": "^0.0.287",
     "@types/node": "^22.10.2",
+    "copy-webpack-plugin": "^12.0.2",
+    "css-loader": "^7.1.2",
     "microbundle": "^0.15.1",
     "msw": "^2.7.0",
     "prettier": "^3.4.2",
+    "style-loader": "^4.0.0",
     "ts-loader": "^9.5.1",
     "turbo": "^2.3.3",
     "typescript": "^5.7.2",

packages/connect/global.d.ts

@@ -0,0 +1,7 @@
+import { WindowWithMswDevtools } from '@msw-devtools/core'
+
+declare global {
+  interface Window extends WindowWithMswDevtools {}
+}
+
+export {}

packages/connect/package.json

@@ -4,7 +4,7 @@
   "type": "module",
   "license": "MIT",
   "types": "./dist/index.d.ts",
-  "source": "src/index.ts",
+  "source": "./src/index.ts",
   "exports": {
     "require": "./dist/index.cjs",
     "default": "./dist/index.modern.js"

packages/connect/src/index.ts

@@ -1,2 +1 @@
 export * from './resolver'
-export * from './constants'

packages/connect/src/resolver.ts

@@ -1,47 +1,20 @@
-import { HttpResponse, passthrough, ResponseResolver } from 'msw'
-
-import { MESSAGE_TYPE } from './constants'
+import { passthrough, ResponseResolver, HttpResponse } from 'msw'
 
 export const responseResolver: ResponseResolver = ({ requestId, request }) => {
   return new Promise((resolve, reject) => {
-    window.postMessage(
-      {
-        type: MESSAGE_TYPE.injected,
-        requestId,
-        request: {
-          id: requestId,
-          method: request.method,
-          url: request.url
-        }
-      },
-      window.location.origin
-    )
-    const handleMessage = (
-      e: MessageEvent<{
-        type: (typeof MESSAGE_TYPE)[keyof typeof MESSAGE_TYPE]
-        requestId: string
-        response: {
-          body: BodyInit
-          init?: ResponseInit
-        }
-      }>
-    ) => {
-      if (
-        e.data.requestId !== requestId ||
-        e.data.type === MESSAGE_TYPE.injected
-      ) {
-        return
-      }
-
-      window.removeEventListener('message', handleMessage)
-
-      if (e.data.type === MESSAGE_TYPE.unhandledRequest) {
-        resolve(passthrough())
-      } else if (e.data.type === MESSAGE_TYPE.handledRequest) {
-        resolve(new HttpResponse(e.data.response.body, e.data.response.init))
-      }
+    if (window.__MSW_DEVTOOLS_EXTENSION?.resolve) {
+      window.__MSW_DEVTOOLS_EXTENSION
+        .resolve({ requestId, request })
+        .then((response) => {
+          resolve(new HttpResponse(response.body, response.init))
+        })
+        .catch((e) => {
+          console.log(e)
+          resolve(passthrough())
+        })
+    } else {
+      resolve(passthrough())
     }
-    window.addEventListener('message', handleMessage)
   })
 }
 

packages/connect/tsconfig.json

@@ -1,4 +1,4 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["src/**/*.ts"]
+  "include": ["./src/**/*", "./global.d.ts"]
 }

packages/core/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@msw-devtools/core",
+  "version": "0.1",
+  "type": "module",
+  "license": "MIT",
+  "types": "./dist/index.d.ts",
+  "source": "./src/index.ts",
+  "main": "./dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "microbundle --no-pkg-main -f modern",
+    "dev": "microbundle watch --no-pkg-main -f modern"
+  }
+}

packages/core/src/index.ts

@@ -0,0 +1 @@
+export * from './types'

packages/core/src/types.ts

@@ -0,0 +1,68 @@
+import type { JsonConfig } from '@msw-devtools/json-config'
+import type { ResponseResolver } from 'msw'
+
+export enum MessageType {
+  Content = 'msw-devtools-extension-content',
+  HandledRequest = 'msw-devtools-extension_handled',
+  SetJsonConfig = 'msw-devtools-extension_setJsonConfig',
+  UnhandledRequest = 'msw-devtools-extension_unhandled',
+  Status = 'msw-devtools-extension_status',
+  Injected = 'msw-devtools-extension-injected'
+}
+
+export type MswDevtoolsExtensionTransporter = {
+  resolve: (...args: Parameters<ResponseResolver>) => Promise<any>
+}
+
+export interface WindowWithMswDevtools {
+  __MSW_DEVTOOLS_EXTENSION?: MswDevtoolsExtensionTransporter
+}
+
+export type ChromeExtensionLocalStorage = {
+  jsonConfig: JsonConfig
+}
+
+export type BackgroundReceiveMessage =
+  | {
+      type: MessageType.Content
+      request: {
+        url: string
+        method: string
+      }
+    }
+  | {
+      type: MessageType.SetJsonConfig
+      payload: JsonConfig
+    }
+  | {
+      type: MessageType.Status
+    }
+
+export type BackgroundResponseMessage =
+  | {
+      type: MessageType.HandledRequest
+      response: JsonConfig[string]
+    }
+  | {
+      type: MessageType.UnhandledRequest
+    }
+  | {
+      type: MessageType.SetJsonConfig
+      status: 'success'
+    }
+  | ({
+      type: MessageType.Status
+    } & (
+      | { status: 'error' }
+      | {
+          status: 'success'
+          payload: {
+            host: string
+            hasHandle: boolean
+            hasConfig: boolean
+            configIsValid: boolean
+          }
+        }
+    ))
+
+export type { JsonConfig }

packages/core/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["./src/**/*"]
+}

packages/demo/package.json

@@ -7,11 +7,12 @@
     "build": "NODE_ENV=production npx webpack"
   },
   "devDependencies": {
-    "@msw-devtools/connect": "*"
+    "@msw-devtools/connect": "*",
+    "@msw-devtools/json-config": "*"
   },
   "msw": {
     "workerDirectory": [
-      "public"
+      "dist"
     ]
   }
 }

packages/demo/webpack.config.js

@@ -1,7 +1,7 @@
 const createWebpackConfig = require('../../webpack.common.js')
 
 module.exports = {
-  ...createWebpackConfig({ root: __dirname }),
+  ...createWebpackConfig({ root: __dirname, port: 8081 }),
   entry: {
     main: './src/index.ts'
   }

packages/extension/declaration.d.ts

@@ -0,0 +1,4 @@
+declare module '*.css' {
+  const content: Record<string, string>
+  export default content
+}

packages/extension/global.d.ts

@@ -0,0 +1,7 @@
+import { WindowWithMswDevtools } from '@msw-devtools/core'
+
+declare global {
+  interface Window extends WindowWithMswDevtools {}
+}
+
+export {}

packages/extension/package.json

@@ -7,6 +7,12 @@
     "build": "NODE_ENV=production npx webpack"
   },
   "devDependencies": {
-    "@msw-devtools/connect": "*"
+    "@msw-devtools/connect": "*",
+    "@msw-devtools/json-config": "*",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
+    "clsx": "^2.1.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   }
 }

packages/extension/public/manifest.json

@@ -13,8 +13,15 @@
       "run_at": "document_start"
     }
   ],
+  "web_accessible_resources": [
+    {
+      "resources": ["injected.js"],
+      "matches": ["<all_urls>"]
+    }
+  ],
   "permissions": ["storage", "tabs", "activeTab"],
   "action": {
+    "default_icon": "icon.png",
     "default_popup": "popup.html",
     "default_title": "Upload JSON"
   }

packages/extension/public/popup.html

@@ -1,19 +1,10 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <title>Upload JSON</title>
-    <style>
-      body {
-        font-family: Arial, sans-serif;
-        padding: 0;
-        margin: 0;
-      }
-    </style>
+    <title>MSW devtools extension</title>
   </head>
   <body>
-    <input type="file" id="fileInput" accept=".json" />
-    <button id="uploadButton">Upload</button>
-    <p id="status"></p>
+    <div id="root"></div>
     <script type="module" src="popup.js"></script>
   </body>
 </html>