Merge pull request #8 from janek26/feature/auto-connect-for-extensions

Feature/auto-connect-for-extensions

Author: janek26

examples/with-plasmo/package.json

@@ -10,7 +10,7 @@
   "dependencies": {
     "@trpc/client": "^10.3.0",
     "@trpc/server": "^10.3.0",
-    "plasmo": "^0.59.1",
+    "plasmo": "^0.83.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "zod": "^3.19.1"

examples/with-plasmo/src/contents/content.ts

@@ -0,0 +1,8 @@
+import { relay } from 'trpc-browser/relay';
+import { autoConnect } from 'trpc-browser/shared/chrome';
+
+void autoConnect(chrome, (port) => {
+  return relay(window, port); // return so it has the cleanup function for disconnect
+}).then(() => {
+  return console.log('Content script loaded - bridge initialized');
+});

examples/with-plasmo/src/contents/inpage.tsx

@@ -0,0 +1,43 @@
+import { createTRPCProxyClient } from '@trpc/client';
+import type { PlasmoCSConfig } from 'plasmo';
+import type { FC } from 'react';
+import { windowLink } from 'trpc-browser/link';
+import type { AppRouter } from '~background';
+
+console.log('inpage script loaded');
+
+export const config: PlasmoCSConfig = {
+  matches: ['<all_urls>'],
+  world: 'MAIN',
+};
+
+const windowClient = createTRPCProxyClient<AppRouter>({
+  links: [/* 👉 */ windowLink({ window })],
+});
+
+const ExtensionInpageUi: FC = () => {
+  return (
+    // a button to open google in a new tab
+    <button
+      style={{
+        padding: 16,
+        fontSize: 16,
+        fontWeight: 'bold',
+        borderRadius: 8,
+        border: 'none',
+        backgroundColor: '#000',
+        color: '#fff',
+        cursor: 'pointer',
+      }}
+      onClick={async () => {
+        await windowClient.openNewTab.mutate({
+          url: 'https://google.com',
+        });
+      }}
+    >
+      Open Google
+    </button>
+  );
+};
+
+export default ExtensionInpageUi;

examples/with-plasmo/src/popup.tsx

@@ -30,6 +30,9 @@ function Popup() {
         flexDirection: 'column',
         padding: 16,
         gap: 8,
+
+        width: 420,
+        height: 600,
       }}
     >
       <h2>Extension using tRPC & Plasmo</h2>

examples/with-plasmo/tsconfig.json

@@ -1,12 +1,13 @@
-{
-  "extends": "plasmo/templates/tsconfig.base",
-  "exclude": ["node_modules"],
-  "include": [".plasmo/**/*", "./**/*.ts", "./**/*.tsx"],
-  "compilerOptions": {
-    "strict": true,
-    "baseUrl": ".",
-    "paths": {
-      "~*": ["./src/*"]
-    }
-  }
-}
+{
+  "extends": "plasmo/templates/tsconfig.base",
+  "exclude": ["node_modules"],
+  "include": [".plasmo/index.d.ts", ".plasmo/**/*", "./**/*.ts", "./**/*.tsx"],
+  "compilerOptions": {
+    "strict": true,
+    "baseUrl": ".",
+    "ignoreDeprecations": "5.0",
+    "paths": {
+      "~*": ["./src/*"]
+    }
+  }
+}