Add content-svgr template

Author: cezaraugusto

examples/content-extension-config/package.json

@@ -14,16 +14,6 @@
     "email": "[email protected]",
     "url": "https://cezaraugusto.com"
   },
-  "files": [
-    "template",
-    "template.json"
-  ],
-  "keywords": [
-    "extension",
-    "browser-extension",
-    "web-extension",
-    "template"
-  ],
   "dependencies": {
     "@svgr/webpack": "^8.1.0",
     "react": "^18.1.0",

examples/content-react-svgr/.gitignore

@@ -0,0 +1,31 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+
+# testing
+coverage
+
+# production
+dist
+
+# misc
+.DS_Store
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# lock files
+yarn.lock
+package-lock.json
+
+# debug files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# extension.js
+extension-env.d.ts

examples/content-react-svgr/background.ts

@@ -0,0 +1 @@
+console.log('Hello from the background script!')

examples/content-react-svgr/content/ContentApp.tsx

@@ -0,0 +1,82 @@
+import React from 'react'
+import ReactLogo from '../images/logo.svg'
+import tailwindBg from '../images/tailwind_bg.png'
+import typescriptLogo from '../images/typescript.png'
+import tailwindLogo from '../images/tailwind.png'
+import chromeWindowBg from '../images/chromeWindow.png'
+
+export default function ContentApp() {
+  const [isdialogOpen, setIsDialogOpen] = React.useState(true)
+
+  if (!isdialogOpen) {
+    return (
+      <div className="mx-auto p-6">
+        <button
+          onClick={() => setIsDialogOpen(true)}
+          className="bg-white rounded-md p-3 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
+        >
+          🧩 Open content script hint <span aria-hidden="true">+</span>
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="mx-auto max-w-7xl md:px-0 lg:p-6">
+      <div className="relative isolate overflow-hidden bg-gray-900 px-6 pt-16 shadow-2xl lg:rounded-3xl md:pt-24 md:h-full sm:h-[100vh] lg:flex lg:gap-x-20 lg:px-24 lg:pt-0">
+        <div className="absolute z-20 top-0 inset-x-0 flex justify-center overflow-hidden pointer-events-none">
+          <div className="w-[108rem] flex-none flex justify-end">
+            <picture>
+              <img
+                src={tailwindBg}
+                alt=""
+                className="w-[90rem] flex-none max-w-none hidden dark:block"
+                decoding="async"
+              />
+            </picture>
+          </div>
+        </div>
+        <div className="mx-auto max-w-md text-center lg:py-12 lg:mx-0 lg:flex-auto lg:text-left">
+          <div className="flex items-center justify-center space-x-4 my-4 mx-auto">
+            <ReactLogo className="relative inline-block w-12" />
+            <div className="text-3xl text-white">+</div>
+            <img
+              alt="TypeScript logo"
+              src={typescriptLogo}
+              className="relative inline-block w-12"
+            />
+            <div className="text-3xl text-white">+</div>
+            <img
+              alt="Tailwind logo"
+              src={tailwindLogo}
+              className="relative inline-block w-12"
+            />
+          </div>
+          <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">
+            This is a content script running React, TypeScript, and Tailwind.css
+          </h2>
+          <p className="mt-6 text-lg leading-8 text-gray-300">
+            Learn more about creating cross-browser extensions by{' '}
+            <button
+              onClick={() => setIsDialogOpen(false)}
+              className="underline hover:no-underline
+            "
+            >
+              closing this hint
+            </button>
+            .
+          </p>
+        </div>
+        <div className="relative mt-16 h-80 lg:mt-8">
+          <img
+            className="absolute left-0 top-0 w-[57rem] max-w-none rounded-md bg-white/5 ring-1 ring-white/10"
+            src={chromeWindowBg}
+            alt="Chrome window screenshot"
+            width="1824"
+            height="1080"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

examples/content-react-svgr/content/scripts.tsx

@@ -0,0 +1,17 @@
+import ReactDOM from 'react-dom/client'
+import ContentApp from './ContentApp'
+import './styles.css'
+
+setTimeout(initial, 1000)
+
+function initial() {
+  // Create a new div element and append it to the document's body
+  const rootDiv = document.createElement('div')
+  rootDiv.id = 'extension-root'
+  document.body.appendChild(rootDiv)
+
+  // Use `createRoot` to create a root, then render the <App /> component
+  // Note that `createRoot` takes the container DOM node, not the React element
+  const root = ReactDOM.createRoot(rootDiv)
+  root.render(<ContentApp />)
+}

examples/content-react-svgr/content/styles.css

@@ -0,0 +1,10 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+#extension-root {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  z-index: 99999;
+}

examples/content-react-svgr/extension.config.js

@@ -0,0 +1,22 @@
+/** @type {import('extension-develop').FileConfig} */
+module.exports = {
+  config: (config) => {
+    config.module.rules.push(
+      {
+        test: /\.svg$/i,
+        type: 'asset',
+        // *.svg?url
+        resourceQuery: /url/
+      },
+      {
+        test: /\.svg$/i,
+        issuer: /\.[jt]sx?$/,
+        // exclude react component if *.svg?url
+        resourceQuery: {not: [/url/]},
+        use: ['@svgr/webpack']
+      }
+    )
+
+    return config
+  }
+}

examples/content-react-svgr/images/chromeWindow.png

@@ -0,0 +1,21 @@
+{
+  "manifest_version": 3,
+  "version": "0.0.1",
+  "name": "content-react-svgr",
+  "description": "An Extension.js example.",
+  "background": {
+    "chromium:service_worker": "background.ts",
+    "firefox:scripts": ["background.ts"]
+  },
+  "content_scripts": [
+    {
+      "matches": ["https://extension.js.org/*"],
+      "js": ["./content/scripts.tsx"]
+    }
+  ],
+  "icons": {
+    "16": "images/extension_16.png",
+    "48": "images/extension_48.png",
+    "128": "images/extension_128.png"
+  }
+}

examples/content-react-svgr/images/extension_128.png

@@ -0,0 +1,28 @@
+{
+  "private": true,
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cezaraugusto/extension.git",
+    "directory": "programs/create/templates/content-react-svgr"
+  },
+  "name": "content-react-svgr",
+  "description": "An Extension.js example.",
+  "version": "0.0.1",
+  "author": {
+    "name": "Cezar Augusto",
+    "email": "[email protected]",
+    "url": "https://cezaraugusto.com"
+  },
+  "dependencies": {
+    "@svgr/webpack": "^8.1.0",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "tailwindcss": "^3.4.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.5",
+    "typescript": "5.3.3"
+  }
+}

examples/content-react-svgr/images/extension_16.png

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+}

examples/content-react-svgr/images/extension_48.png

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./content/**/*.tsx'],
+  theme: {
+    extend: {}
+  },
+  plugins: []
+}

examples/content-react-svgr/images/logo.svg

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "moduleResolution": "node",
+    "module": "esnext",
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "strict": true,
+    "target": "esnext",
+    "verbatimModuleSyntax": true,
+    "useDefineForClassFields": true,
+    "skipLibCheck": true
+  },
+  "include": ["./"],
+  "exclude": ["node_modules", "dist"]
+}

examples/content-react-svgr/images/tailwind.png

@@ -29,20 +29,6 @@ const JS_TEMPLATES: Template[] = [
   //   hasEnv: false,
   //   configFiles: ['babel.config.json']
   // },
-  {
-    name: 'content-extension-config',
-    uiContext: ['content'],
-    uiFramework: 'react',
-    css: 'css',
-    hasBackground: true,
-    hasEnv: false,
-    configFiles: [
-      'extension.config.js',
-      'tsconfig.json',
-      'postcss.config.js',
-      'tailwind.config.js'
-    ]
-  },
   {
     name: 'config-stylelint',
     uiContext: ['newTab'],
@@ -261,6 +247,34 @@ const FRAMEWORK_TEMPLATES: Template[] = [
     hasEnv: false,
     configFiles: ['postcss.config.js', 'tailwind.config.js', 'tsconfig.json']
   },
+  {
+    name: 'content-extension-config',
+    uiContext: ['content'],
+    uiFramework: 'react',
+    css: 'css',
+    hasBackground: true,
+    hasEnv: false,
+    configFiles: [
+      'extension.config.js',
+      'tsconfig.json',
+      'postcss.config.js',
+      'tailwind.config.js'
+    ]
+  },
+  {
+    name: 'content-react-svgr',
+    uiContext: ['content'],
+    uiFramework: 'react',
+    css: 'css',
+    hasBackground: true,
+    hasEnv: false,
+    configFiles: [
+      'extension.config.js',
+      'tsconfig.json',
+      'postcss.config.js',
+      'tailwind.config.js'
+    ]
+  },
   {
     name: 'new-vue',
     uiContext: ['newTab'],