Fix PR #329

manifest.js

@@ -15,7 +15,8 @@ const manifest = {
   name: '__MSG_extensionName__',
   version: packageJson.version,
   description: '__MSG_extensionDescription__',
-  permissions: ['storage', 'sidePanel'],
+  host_permissions: ['<all_urls>'],
+  permissions: ['storage', 'sidePanel', 'scripting'],
   side_panel: {
     default_path: 'src/pages/sidepanel/index.html',
   },

src/pages/content/runtime/app.tsx

@@ -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-text">runtime content view</div>;
+}

src/pages/content/runtime/index.css

@@ -0,0 +1,3 @@
+.runtime-content-view-text {
+  font-size: 20px;
+}

src/pages/content/runtime/index.ts

@@ -0,0 +1,11 @@
+/**
+ * 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');

src/pages/content/runtime/root.tsx

@@ -0,0 +1,31 @@
+import { createRoot } from 'react-dom/client';
+import App from '@pages/content/runtime/app';
+import refreshOnUpdate from 'virtual:reload-on-update-in-view';
+import injectedStyle from '@pages/content/runtime/index.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 />);

src/pages/content/ui/app.tsx

@@ -5,5 +5,5 @@ export default function App() {
     console.log('content view loaded');
   }, []);
 
-  return <div className="">content view</div>;
+  return <div className="content-view-text">content view</div>;
 }

src/pages/content/ui/index.css

@@ -0,0 +1,3 @@
+.content-view-text {
+  font-size: 16px;
+}

src/pages/content/ui/root.tsx

@@ -1,7 +1,7 @@
 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';
+import injectedStyle from '@pages/content/ui/index.css?inline';
 
 refreshOnUpdate('pages/content');
 

src/pages/popup/Popup.tsx

@@ -9,6 +9,15 @@ import withErrorBoundary from '@src/shared/hoc/withErrorBoundary';
 const Popup = () => {
   const theme = useStorage(exampleThemeStorage);
 
+  const injectContentScript = async () => {
+    const [tab] = await chrome.tabs.query({ currentWindow: true, active: true });
+
+    await chrome.scripting.executeScript({
+      target: { tabId: tab.id },
+      files: ['src/pages/contentRuntime/index.js'],
+    });
+  };
+
   return (
     <div
       className="App"
@@ -36,6 +45,15 @@ const Popup = () => {
           onClick={exampleThemeStorage.toggle}>
           Toggle theme
         </button>
+
+        <button
+          style={{
+            backgroundColor: theme === 'light' ? '#fff' : '#000',
+            color: theme === 'light' ? '#000' : '#fff',
+          }}
+          onClick={injectContentScript}>
+          Click to inject Content Script
+        </button>
       </header>
     </div>
   );

utils/plugins/inline-vite-preload-script.ts

@@ -10,7 +10,7 @@ export default function inlineVitePreloadScript(): PluginOption {
   return {
     name: 'replace-vite-preload-script-plugin',
     async renderChunk(code, chunk, options, meta) {
-      if (!/content/.test(chunk.fileName)) {
+      if (!/content/.test(chunk.fileName.toLowerCase())) {
         return null;
       }
       if (!__vitePreload) {

vite.config.ts

@@ -34,6 +34,7 @@ export default defineConfig({
       input: {
         devtools: resolve(pagesDir, 'devtools', 'index.html'),
         panel: resolve(pagesDir, 'panel', 'index.html'),
+        contentRuntime: resolve(pagesDir, 'content', 'runtime', 'index.ts'),
         contentInjected: resolve(pagesDir, 'content', 'injected', 'index.ts'),
         contentUI: resolve(pagesDir, 'content', 'ui', 'index.ts'),
         background: resolve(pagesDir, 'background', 'index.ts'),