Skip to content

Commit

Permalink
feat: add runtime ui component
Browse files Browse the repository at this point in the history
  • Loading branch information
Jonghakseo committed Jun 17, 2024
1 parent 4008e69 commit 300095e
Show file tree
Hide file tree
Showing 5 changed files with 59 additions and 2 deletions.
9 changes: 9 additions & 0 deletions src/pages/content/runtime/app.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { useEffect } from 'react';

export default function App() {
useEffect(() => {
console.log('runtime content view loaded');
}, []);

return <div className="">runtime content view</div>;
}
12 changes: 11 additions & 1 deletion src/pages/content/runtime/index.ts
Original file line number Diff line number Diff line change
@@ -1 +1,11 @@
console.log('runtime content loaded');
/**
* DO NOT USE import someModule from '...';
*
* @issue-url https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/issues/160
*
* Chrome extensions don't support modules in content scripts.
* If you want to use other modules in content scripts, you need to import them via these files.
*
*/
import('@pages/content/runtime/root');
console.log('runtime script loaded');
Empty file.
31 changes: 31 additions & 0 deletions src/pages/content/runtime/root.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import { createRoot } from 'react-dom/client';
import App from '@pages/content/ui/app';
import refreshOnUpdate from 'virtual:reload-on-update-in-view';
import injectedStyle from './injected.css?inline';

refreshOnUpdate('pages/content');

const root = document.createElement('div');
root.id = 'chrome-extension-boilerplate-react-vite-runtime-content-view-root';

document.body.append(root);

const rootIntoShadow = document.createElement('div');
rootIntoShadow.id = 'shadow-root';

const shadowRoot = root.attachShadow({ mode: 'open' });
shadowRoot.appendChild(rootIntoShadow);

/** Inject styles into shadow dom */
const styleElement = document.createElement('style');
styleElement.innerHTML = injectedStyle;
shadowRoot.appendChild(styleElement);

/**
* https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/pull/174
*
* In the firefox environment, the adoptedStyleSheets bug may prevent contentStyle from being applied properly.
* Please refer to the PR link above and go back to the contentStyle.css implementation, or raise a PR if you have a better way to improve it.
*/

createRoot(rootIntoShadow).render(<App />);
9 changes: 8 additions & 1 deletion src/pages/popup/Popup.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,14 @@ const Popup = () => {
Toggle theme
</button>

<button onClick={injectContentScript}>Click to inject Content Script</button>
<button
style={{
backgroundColor: theme === 'light' ? '#fff' : '#000',
color: theme === 'light' ? '#000' : '#fff',
}}
onClick={injectContentScript}>
Click to inject Content Script
</button>
</header>
</div>
);
Expand Down

0 comments on commit 300095e

Please sign in to comment.