Skip to content

Commit

Permalink
Merge pull request #8 from janek26/feature/auto-connect-for-extensions
Browse files Browse the repository at this point in the history
Feature/auto-connect-for-extensions
  • Loading branch information
janek26 authored Oct 26, 2023
2 parents 4faa5fd + 8d69f87 commit 0380b7b
Show file tree
Hide file tree
Showing 9 changed files with 3,633 additions and 2,353 deletions.
2 changes: 1 addition & 1 deletion examples/with-plasmo/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
8 changes: 8 additions & 0 deletions examples/with-plasmo/src/contents/content.ts
Original file line number Diff line number Diff line change
@@ -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');
});
43 changes: 43 additions & 0 deletions examples/with-plasmo/src/contents/inpage.tsx
Original file line number Diff line number Diff line change
@@ -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;
3 changes: 3 additions & 0 deletions examples/with-plasmo/src/popup.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,9 @@ function Popup() {
flexDirection: 'column',
padding: 16,
gap: 8,

width: 420,
height: 600,
}}
>
<h2>Extension using tRPC & Plasmo</h2>
Expand Down
25 changes: 13 additions & 12 deletions examples/with-plasmo/tsconfig.json
Original file line number Diff line number Diff line change
@@ -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/*"]
}
}
}
Loading

0 comments on commit 0380b7b

Please sign in to comment.