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 📖 |
gavinhow 🐛 |
Anand D. 📖 |
+ Romain Dequidt 📖 |
+ Jakob Guddas 📖 🐛 |
+ 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));
});
}