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/injectedContent/index.ts

@@ -0,0 +1,12 @@
+/**
+ * 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/injectedContent/ui');
+
+console.log('injected content loaded');

src/pages/injectedContent/style.scss

@@ -0,0 +1,7 @@
+@import '@assets/style/theme.scss';
+
+// CSS that can pollute global styles. Use it with caution.
+// If you use ShodowRoot for style pollution, this style will not be applied inside the content script.
+.content-view-style-may-be-not-working {
+  font-size: 30px;
+}

src/pages/injectedContent/ui/app.test.tsx

@@ -0,0 +1,16 @@
+import { describe, test } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import App from '@pages/injectedContent/ui/app';
+
+describe('appTest', () => {
+  test('render text', () => {
+    // given
+    const text = 'injected content view';
+
+    // when
+    render(<App />);
+
+    // then
+    screen.getByText(text);
+  });
+});

src/pages/injectedContent/ui/app.tsx

@@ -0,0 +1,9 @@
+import { useEffect } from 'react';
+
+export default function App() {
+  useEffect(() => {
+    console.log('injected content view loaded');
+  }, []);
+
+  return <div className="">injected content view</div>;
+}

src/pages/injectedContent/ui/index.tsx

@@ -0,0 +1,31 @@
+import { createRoot } from 'react-dom/client';
+import App from '@pages/injectedContent/ui/app';
+import refreshOnUpdate from 'virtual:reload-on-update-in-view';
+import injectedStyle from './injected.css?inline';
+
+refreshOnUpdate('pages/injectedContent');
+
+const root = document.createElement('div');
+root.id = 'chrome-extension-boilerplate-react-vite-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/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 });
+    console.log(tab.id)
+    chrome.scripting.executeScript({
+            target: { tabId: tab.id },
+            files: ['src/pages/injectedContent/index.js'],
+    });
+  }
+
   return (
     <div
       className="App"
@@ -36,6 +45,10 @@ const Popup = () => {
           onClick={exampleThemeStorage.toggle}>
           Toggle theme
         </button>
+
+        <button 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,8 +34,10 @@ export default defineConfig({
       input: {
         devtools: resolve(pagesDir, 'devtools', 'index.html'),
         panel: resolve(pagesDir, 'panel', 'index.html'),
+        injectedContent: resolve(pagesDir, 'injectedContent', 'index.ts'),
         contentInjected: resolve(pagesDir, 'content', 'injected', 'index.ts'),
         contentUI: resolve(pagesDir, 'content', 'ui', 'index.ts'),
+
         background: resolve(pagesDir, 'background', 'index.ts'),
         contentStyle: resolve(pagesDir, 'content', 'style.scss'),
         popup: resolve(pagesDir, 'popup', 'index.html'),