Add Extension Template

apps/an-extension/README.md

@@ -0,0 +1,37 @@
+# an-extension
+
+> This project was bootstrapped using the Extension.js React-TypeScript template.
+
+## Scripts Available
+
+In the project directory, you can run:
+
+### npm dev
+
+```
+// Runs the app in the development mode.
+// Will open a new browser instance with your extension loaded.
+// The page will reload when you make changes.
+npm dev
+```
+
+### npm start
+
+```
+// Runs the app in the production mode.
+// Will open a new browser instance with your extension loaded.
+// This is how your browser extension will work once published.
+npm start
+```
+
+### npm build
+
+```
+// Builds the app for production.
+// Bundles your browser extension in production mode for the target browser.
+npm run build
+```
+
+## Learn More
+
+You can learn more in the [Extension.js](https://extension.js.org) documentation.

apps/an-extension/background.ts

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

apps/an-extension/content/ContentApp.tsx

@@ -0,0 +1,87 @@
+import React from 'react'
+import reactLogo from '../public/react.png'
+import tailwindBg from '../public/tailwind_bg.png'
+import typescriptLogo from '../public/typescript.png'
+import tailwindLogo from '../public/tailwind.png'
+import chromeWindowBg from '../public/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">
+            <img
+              alt="React logo"
+              src={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>
+  )
+}

apps/an-extension/content/base.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

apps/an-extension/content/content.css

@@ -0,0 +1,6 @@
+#extension-root {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  z-index: 99999;
+}

apps/an-extension/content/content.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import ContentApp from './ContentApp'
+import('./base.css')
+import('./content.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 />)
+}

apps/an-extension/extension-env.d.ts

@@ -0,0 +1,9 @@
+// Required Extension.js types for TypeScript projects.
+// This file auto-generated and should not be excluded.
+// If you need extra types, consider creating a new *.d.ts and
+// referencing it in the "include" array in your tsconfig.json file.
+// See https://www.typescriptlang.org/tsconfig#include for info.
+/// <reference types="@extension-create/develop/dist/types/index.d.ts" />
+
+// Polyfill types for browser.* APIs.
+/// <reference types="@extension-create/develop/dist/types/polyfill.d.ts" />

apps/an-extension/manifest.json

@@ -0,0 +1,23 @@
+{
+  "manifest_version": 3,
+  "version": "1.0",
+  "name": "an-extension",
+  "description": "An extension template using React and TypeScript. This template includes a content script using Tailwind.css. To see it in action, visit https://extension.js.org.",
+  "background": {
+    "service_worker": "./background.ts"
+  },
+  "content_scripts": [
+    {
+      "matches": [
+        "https://extension.js.org/*"
+      ],
+      "js": [
+        "./content/content.tsx"
+      ]
+    }
+  ],
+  "icons": {
+    "16": "public/icon/icon_16.png",
+    "48": "public/icon/icon_48.png"
+  }
+}

apps/an-extension/package.json

@@ -0,0 +1,20 @@
+{
+  "devDependencies": {
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.5",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "tailwindcss": "^3.4.1",
+    "typescript": "5.3.3",
+    "extension": "latest"
+  },
+  "scripts": {
+    "dev": "extension dev",
+    "start": "extension start",
+    "build": "extension build"
+  },
+  "dependencies": {},
+  "name": "an-extension",
+  "private": true,
+  "version": "0.0.0"
+}

apps/an-extension/postcss.config.js

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

apps/an-extension/tailwind.config.js

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

apps/an-extension/tsconfig.json

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