using my boilerplate yuh

src/views/content/components/Button/Button.module.scss

@@ -0,0 +1,19 @@
+@import 'src/views/styles/base.module.scss';
+
+.button {
+    background-color: #000;
+    color: #fff;
+    padding: 10px;
+    border-radius: 5px;
+    border: none;
+    cursor: pointer;
+    font-size: 16px;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    font-family: 'Inter';
+
+    &:hover {
+        background-color: #fff;
+        color: #000;
+    }
+}

src/views/content/components/Button/Button.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { bMessenger } from 'src/shared/messages';
+import styles from './Button.module.scss';
+
+export function Button(): JSX.Element {
+    const handleOpenUrl = (url: string) => () => {
+        bMessenger.openNewTab({ url });
+    };
+
+    return (
+        <button className={styles.button} onClick={handleOpenUrl('https://www.google.com')}>
+            Click me
+        </button>
+    );
+}

src/views/content/content.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { render } from 'react-dom';
+import { bMessenger } from 'src/shared/messages';
+import { ContextInvalidated, createShadowDOM, onContextInvalidated } from 'chrome-extension-toolkit';
+import { Button } from './components/Button/Button';
+
+bMessenger.getTabId().then(tabId => {
+    console.log('tabId', tabId);
+});
+
+injectReact();
+
+async function injectReact() {
+    const shadowDom = createShadowDOM('extension-dom-container');
+    render(<Button />, shadowDom.shadowRoot);
+    await shadowDom.addStyle('static/css/content.css');
+}
+
+if (process.env.NODE_ENV === 'development') {
+    onContextInvalidated(() => {
+        const div = document.createElement('div');
+        div.id = 'context-invalidated-container';
+        document.body.appendChild(div);
+        render(<ContextInvalidated color='black' backgroundColor='orange' />, div);
+    });
+}

src/views/hooks/useTabMessage.ts

@@ -0,0 +1,4 @@
+import { createUseMessage } from 'chrome-extension-toolkit';
+import TAB_MESSAGES from 'src/shared/messages/TabMessages';
+
+export const useTabMessage = createUseMessage<TAB_MESSAGES>();

src/views/popup/popup.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { render } from 'react-dom';
+
+console.log('test');
+
+console.log('test2');
+
+// Path: src/views/popup/popup.tsx
+
+console.log('test3');
+
+render(
+    <div>
+        <h1>Test</h1>
+    </div>,
+    document.getElementById('root')
+);

src/views/reactDevtools.ts

@@ -0,0 +1,24 @@
+// this is a custom wrapper around react-devtools
+// that changes it so that we only send messages to the devtools when the current tab is active;
+import { connectToDevTools } from 'react-devtools-core';
+
+// connect to the devtools server
+let ws = new WebSocket('ws://localhost:8097');
+
+connectToDevTools({
+    websocket: ws,
+});
+
+// when the tab's visibile state changes, we connect or disconnect from the devtools
+const onVisibilityChange = () => {
+    if (document.visibilityState === 'visible') {
+        ws = new WebSocket('ws://localhost:8097');
+        connectToDevTools({
+            websocket: ws,
+        });
+    } else {
+        ws.close();
+    }
+};
+
+document.addEventListener('visibilitychange', onVisibilityChange);

src/views/styles/base.module.scss

@@ -0,0 +1,2 @@
+@import './colors.module.scss';
+@import './fonts.module.scss';

src/views/styles/fonts.module.scss

@@ -0,0 +1,9 @@
+@each $weights in '100' '200' '300' '400' '500' '600' '700' '800' '900' {
+    @font-face {
+        font-family: 'Inter';
+        src: url('chrome-extension://__MSG_@@extension_id__/fonts/inter-#{$weights}.woff2') format('woff2');
+        font-display: auto;
+        font-style: normal;
+        font-weight: #{$weights};
+    }
+}