Add custom font example for react content ui (#20)

Co-authored-by: Aaron <[email protected]>

Author: brkunver

examples/react-content-ui-custom-font/.gitignore

@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.output
+stats.html
+stats-*.json
+.wxt
+web-ext.config.ts
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

examples/react-content-ui-custom-font/README.md

@@ -0,0 +1,11 @@
+---
+name: React Content Script UI Custom Font
+description: Basic example of using a custom ttf font in your react content ui.
+apis:
+  - createShadowRootUi
+---
+
+```sh
+pnpm i
+pnpm dev
+```

examples/react-content-ui-custom-font/entrypoints/content/App.tsx

@@ -0,0 +1,8 @@
+export default function App() {
+	// use font family in your components
+	return (
+		<div style={{ fontFamily: "JB Mono", position: "fixed", top: 0, left: 0, zIndex: 9999 }}>
+			<h1>Hello Custom Font</h1>
+		</div>
+	)
+}

examples/react-content-ui-custom-font/entrypoints/content/index.tsx

@@ -0,0 +1,47 @@
+import ReactDOM from "react-dom/client"
+import App from "./App.tsx"
+
+export default defineContentScript({
+	matches: ["*://*.google.com/*"],
+	cssInjectionMode: "ui",
+
+	async main(ctx) {
+		const ui = await createShadowRootUi(ctx, {
+			name: "custom-font",
+			position: "inline",
+			anchor: "body",
+			append: "first",
+			onMount: (container) => {
+				// Load custom font. Don't forget add font to web accessible resources in wxt.config.ts
+				const fontUrl = browser.runtime.getURL("/fonts/jbmono.ttf")
+
+				// create a style element
+				const fontStyle = document.createElement("style")
+
+				// add font face
+				fontStyle.textContent = `
+                    @font-face {
+                      font-family: 'JB Mono';
+                      src: url('${fontUrl}') format('truetype');
+                      font-weight: 400;
+                      font-style: normal;
+                    }
+                `
+				// append style element to head
+				document.head.appendChild(fontStyle)
+
+				const wrapper = document.createElement("div")
+				container.append(wrapper)
+
+				const root = ReactDOM.createRoot(wrapper)
+				root.render(<App />)
+				return { root, wrapper }
+			},
+			onRemove: (elements) => {
+				elements?.root.unmount()
+				elements?.wrapper.remove()
+			},
+		})
+		ui.mount()
+	},
+})

examples/react-content-ui-custom-font/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "react-content-ui-custom-font",
+  "description": "Custom font example for react content ui",
+  "private": false,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "wxt",
+    "dev:firefox": "wxt -b firefox",
+    "build": "wxt build",
+    "build:firefox": "wxt build -b firefox",
+    "zip": "wxt zip",
+    "zip:firefox": "wxt zip -b firefox",
+    "compile": "tsc --noEmit",
+    "postinstall": "wxt prepare"
+  },
+  "dependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.2",
+    "@wxt-dev/module-react": "^1.1.3",
+    "typescript": "^5.8.3",
+    "wxt": "^0.20.0"
+  }
+}

examples/react-content-ui-custom-font/public/fonts/jbmono.ttf

@@ -0,0 +1,7 @@
+{
+  "extends": "./.wxt/tsconfig.json",
+  "compilerOptions": {
+    "allowImportingTsExtensions": true,
+    "jsx": "react-jsx"
+  }
+}

examples/react-content-ui-custom-font/public/icon/128.png

@@ -0,0 +1,11 @@
+import { defineConfig } from "wxt"
+
+// See https://wxt.dev/api/config.html
+export default defineConfig({
+	modules: ["@wxt-dev/module-react"],
+
+	// add font to web accessible resources
+	manifest: {
+		web_accessible_resources: [{ resources: ["fonts/*"], matches: ["*://*.google.com/*"] }],
+	},
+})

examples/react-content-ui-custom-font/public/icon/16.png

@@ -248,6 +248,22 @@
       ],
       "permissions": []
     },
+    {
+      "name": "React Content Script UI Custom Font",
+      "description": "Basic example of using a custom ttf font in your react content ui.",
+      "searchText": "React Content Script UI Custom Font|Basic example of using a custom ttf font in your react content ui.|react|react-dom|@wxt-dev/module-react|browser.runtime.getURL|createShadowRootUi",
+      "url": "https://github.com/wxt-dev/examples/tree/main/examples/react-content-ui-custom-font",
+      "apis": [
+        "browser.runtime.getURL",
+        "createShadowRootUi"
+      ],
+      "packages": [
+        "react",
+        "react-dom",
+        "@wxt-dev/module-react"
+      ],
+      "permissions": []
+    },
     {
       "name": "React Mantine",
       "description": "Add mantine to HTML pages and content scripts",