diff --git a/.all-contributorsrc b/.all-contributorsrc index 1864dc6b7..181b9200e 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -302,6 +302,34 @@ "contributions": [ "doc" ] + }, + { + "login": "romaindequidt", + "name": "Romain Dequidt", + "avatar_url": "https://avatars.githubusercontent.com/u/521473?v=4", + "profile": "http://www.iotercom.com", + "contributions": [ + "doc" + ] + }, + { + "login": "jguddas", + "name": "Jakob Guddas", + "avatar_url": "https://avatars.githubusercontent.com/u/25524993?v=4", + "profile": "http://linkedin.com/in/jguddas", + "contributions": [ + "doc", + "bug" + ] + }, + { + "login": "D1no", + "name": "Dino Scheidt", + "avatar_url": "https://avatars.githubusercontent.com/u/2397125?v=4", + "profile": "http://din.ooo", + "contributions": [ + "code" + ] } ] } diff --git a/README.md b/README.md index 4c83fac5e..9ba40ef4c 100755 --- a/README.md +++ b/README.md @@ -169,13 +169,13 @@ root.render();
src/pages/content/ui/index.tsx -"""tsx +```tsx import { attachTwindStyle } from '@src/shared/style/twind'; ... attachTwindStyle(rootIntoShadow, shadowRoot); createRoot(rootIntoShadow).render(); -""" +```
[See more examples](https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/pull/244/) @@ -471,6 +471,9 @@ manifest.json Rasul
Rasul

📖 gavinhow
gavinhow

🐛 Anand D.
Anand D.

📖 + Romain Dequidt
Romain Dequidt

📖 + Jakob Guddas
Jakob Guddas

📖 🐛 + Dino Scheidt
Dino Scheidt

💻 diff --git a/src/pages/content/ui/index.tsx b/src/pages/content/ui/index.tsx index 3e623be07..90898f6fa 100644 --- a/src/pages/content/ui/index.tsx +++ b/src/pages/content/ui/index.tsx @@ -1,6 +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'; refreshOnUpdate('pages/content'); @@ -15,6 +16,11 @@ 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 * diff --git a/src/pages/content/ui/injected.css b/src/pages/content/ui/injected.css new file mode 100644 index 000000000..e69de29bb diff --git a/utils/plugins/custom-dynamic-import.ts b/utils/plugins/custom-dynamic-import.ts index 6717fd1aa..52090076a 100644 --- a/utils/plugins/custom-dynamic-import.ts +++ b/utils/plugins/custom-dynamic-import.ts @@ -6,8 +6,12 @@ export default function customDynamicImport(): PluginOption { renderDynamicImport({ moduleId }) { if (!moduleId.includes('node_modules') && process.env.__FIREFOX__) { return { - left: `import(browser.runtime.getURL('./') + `, - right: ".split('../').join(''));", + left: ` + { + const dynamicImport = (path) => import(path); + dynamicImport(browser.runtime.getURL('./') + + `, + right: ".split('../').join(''))}", }; } return { diff --git a/utils/plugins/make-manifest.ts b/utils/plugins/make-manifest.ts index f5aa2a288..afc354499 100644 --- a/utils/plugins/make-manifest.ts +++ b/utils/plugins/make-manifest.ts @@ -33,7 +33,7 @@ export default function makeManifest(config?: { getCacheInvalidationKey?: () => if (cacheKey) { // Naming change for cache invalidation manifest.content_scripts.forEach(script => { - script.css = script.css.map(css => css.replace('', cacheKey)); + script.css &&= script.css.map(css => css.replace('', cacheKey)); }); }