extension-create 2.0.0-alpha.3 → 2.0.0-alpha.5

package/dist/new-tailwind/README.md

@@ -0,0 +1,37 @@
+# new-tailwind
+
+> An Extension.js example.
+
+## Scripts Available
+
+In the project directory, you can run:
+
+### yarn 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.
+yarn dev
+```
+
+### yarn 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.
+yarn start
+```
+
+### yarn build
+
+```
+// Builds the app for production.
+// Bundles your browser extension in production mode for the target browser.
+yarn build
+```
+
+## Learn More
+
+Learn more about creating cross-browser extensions in the [Extension.js](https://extension.js.org) documentation.

package/dist/new-tailwind/extension-env.d.ts

@@ -0,0 +1,9 @@
+// Required Extension.js types for TypeScript projects.
+// This file is 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 of your tsconfig.json file.
+// See https://www.typescriptlang.org/tsconfig#include for info.
+/// <reference types="../../programs/develop/types/index.d.ts" />
+
+// Polyfill types for browser.* APIs.
+/// <reference types="../../programs/develop/types/polyfill.d.ts" />

package/dist/new-tailwind/manifest.json

@@ -0,0 +1,15 @@
+{
+  "manifest_version": 3,
+  "version": "0.0.1",
+  "name": "new-tailwind",
+  "description": "An Extension.js example.",
+  "icons": {
+    "16": "images/extension_16.png",
+    "48": "images/extension_48.png",
+    "128": "images/extension_128.png"
+  },
+  "chrome_url_overrides": {
+    "newtab": "newtab/index.html"
+  },
+  "author": "Your Name"
+}

package/dist/new-tailwind/newtab/NewTabApp.tsx

@@ -0,0 +1,67 @@
+import reactLogo from '../images/react.png'
+import tailwindLogo from '../images/tailwind.png'
+import chromeWindowBg from '../images/chromeWindow.png'
+
+export default function NewTabApp() {
+  return (
+    <div className="h-[100vh] items-center relative isolate overflow-hidden bg-gray-900 shadow-2xl sm:px-16 md:pt-24 lg:flex lg:gap-x-20 lg:px-24 lg:pt-0">
+      <svg
+        viewBox="0 0 1024 1024"
+        className="absolute left-1/2 top-1/2 -z-10 h-[64rem] w-[64rem] -translate-y-1/2 [mask-image:radial-gradient(closest-side,white,transparent)] sm:left-full sm:-ml-80 lg:left-1/2 lg:ml-0 lg:-translate-x-1/2 lg:translate-y-0"
+        aria-hidden="true"
+      >
+        <circle
+          cx="512"
+          cy="512"
+          r="512"
+          fill="url(#759c1415-0410-454c-8f7c-9a820de03641)"
+          fillOpacity="0.7"
+        />
+        <defs>
+          <radialGradient id="759c1415-0410-454c-8f7c-9a820de03641">
+            <stop stopColor="#6de935" />
+            <stop offset="1" stopColor="#75d682" />
+          </radialGradient>
+        </defs>
+      </svg>
+      <div className="mx-auto max-w-md text-center lg:mx-0 lg:flex-auto lg:py-32 lg:text-left">
+        <div className="flex items-center justify-center lg:justify-start space-x-4 mx-auto mt-10 mb-4">
+          <img
+            alt="React logo"
+            src={reactLogo}
+            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 new tab page running React and Tailwind.css.
+        </h2>
+        <p className="mt-6 text-lg leading-8 text-gray-300">
+          Learn more about creating cross-browser extensions at{' '}
+          <a
+            className="underline hover:no-underline"
+            href="https://extension.js.org"
+            target="_blank"
+          >
+            https://extension.js.org
+          </a>
+          .
+        </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 screenshot"
+          width="1824"
+          height="1080"
+        />
+      </div>
+    </div>
+  )
+}

package/dist/new-tailwind/newtab/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Tailwind Template</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this extension.</noscript>
+    <div id="root"></div>
+  </body>
+  <script src="./scripts.tsx"></script>
+</html>

package/dist/new-tailwind/newtab/scripts.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import NewTabApp from './NewTabApp'
+import './styles.css'
+
+const root = ReactDOM.createRoot(document.getElementById('root')!)
+
+root.render(
+  <React.StrictMode>
+    <NewTabApp />
+  </React.StrictMode>
+)

package/dist/new-tailwind/newtab/styles.css

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

package/dist/new-tailwind/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "new-tailwind",
+  "description": "An Extension.js example.",
+  "version": "0.0.1",
+  "author": {
+    "name": "Your Name",
+    "email": "your@email.com",
+    "url": "https://yourwebsite.com"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "tailwindcss": "^3.4.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.21",
+    "typescript": "5.3.3",
+    "extension": "latest"
+  },
+  "scripts": {
+    "dev": "extension dev",
+    "start": "extension start",
+    "build": "extension build"
+  },
+  "private": true
+}

package/dist/new-tailwind/postcss.config.js

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

package/dist/new-tailwind/tailwind.config.js

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

package/dist/new-tailwind/tsconfig.json

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

package/dist/new-typescript/README.md

@@ -0,0 +1,37 @@
+# new-typescript
+
+> An Extension.js example.
+
+## Scripts Available
+
+In the project directory, you can run:
+
+### yarn 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.
+yarn dev
+```
+
+### yarn 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.
+yarn start
+```
+
+### yarn build
+
+```
+// Builds the app for production.
+// Bundles your browser extension in production mode for the target browser.
+yarn build
+```
+
+## Learn More
+
+Learn more about creating cross-browser extensions in the [Extension.js](https://extension.js.org) documentation.

package/dist/new-typescript/extension-env.d.ts

@@ -0,0 +1,9 @@
+// Required Extension.js types for TypeScript projects.
+// This file is 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 of your tsconfig.json file.
+// See https://www.typescriptlang.org/tsconfig#include for info.
+/// <reference types="../../programs/develop/types/index.d.ts" />
+
+// Polyfill types for browser.* APIs.
+/// <reference types="../../programs/develop/types/polyfill.d.ts" />

package/dist/new-typescript/manifest.json

@@ -0,0 +1,15 @@
+{
+  "manifest_version": 3,
+  "version": "0.0.1",
+  "name": "new-typescript",
+  "description": "An Extension.js example.",
+  "icons": {
+    "16": "images/extension_16.png",
+    "48": "images/extension_48.png",
+    "128": "images/extension_128.png"
+  },
+  "chrome_url_overrides": {
+    "newtab": "newtab/index.html"
+  },
+  "author": "Your Name"
+}

package/dist/new-typescript/newtab/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>TypeScript Extension</title>
+    <link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css" media="screen" />
+    <link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura-dark.css" media="screen and (prefers-color-scheme: dark)" />
+    <link rel="stylesheet" href="./styles.css" media="screen" />
+  </head>
+  <body>
+    <header>
+      <h1>
+        <img class="typescript" src="../images/typescript.png" alt="The TypeScript logo" width="120px" />
+        <br />
+        Welcome to your TypeScript Extension.
+      </h1>
+      <p>
+        Learn more about creating cross-browser extensions at 
+        <a href="https://extension.js.org" target="_blank">https://extension.js.org</a>.
+      </p>
+    </header>
+  </body>
+  <script src="./scripts.ts"></script>
+</html>

package/dist/new-typescript/newtab/scripts.ts

@@ -0,0 +1,10 @@
+function getManifest() {
+  return chrome.runtime.getManifest()
+}
+const manifest = getManifest()
+
+console.table({
+  name: manifest.name,
+  version: manifest.version,
+  description: manifest.description
+})

package/dist/new-typescript/newtab/styles.css

@@ -0,0 +1,18 @@
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: calc(100vh - 26px);
+}
+
+h1 {
+  font-size: 3.7em;
+}
+
+.typescript {
+	transition: all 400ms cubic-bezier(.47,1.64,.41,.8);
+}
+
+.typescript:hover {
+  transform: scale(1.5);
+}

package/dist/new-typescript/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "new-typescript",
+  "description": "An Extension.js example.",
+  "version": "0.0.1",
+  "author": {
+    "name": "Your Name",
+    "email": "your@email.com",
+    "url": "https://yourwebsite.com"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "typescript": "5.3.3",
+    "extension": "latest"
+  },
+  "scripts": {
+    "dev": "extension dev",
+    "start": "extension start",
+    "build": "extension build"
+  },
+  "dependencies": {},
+  "private": true
+}

package/dist/new-typescript/tsconfig.json

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

package/dist/new-vue/README.md

@@ -0,0 +1,37 @@
+# new-vue
+
+> An Extension.js example.
+
+## Scripts Available
+
+In the project directory, you can run:
+
+### yarn 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.
+yarn dev
+```
+
+### yarn 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.
+yarn start
+```
+
+### yarn build
+
+```
+// Builds the app for production.
+// Bundles your browser extension in production mode for the target browser.
+yarn build
+```
+
+## Learn More
+
+Learn more about creating cross-browser extensions in the [Extension.js](https://extension.js.org) documentation.

package/dist/new-vue/extension-env.d.ts

@@ -0,0 +1,9 @@
+// Required Extension.js types for TypeScript projects.
+// This file is 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 of your tsconfig.json file.
+// See https://www.typescriptlang.org/tsconfig#include for info.
+/// <reference types="../../programs/develop/dist/types/index.d.ts" />
+
+// Polyfill types for browser.* APIs.
+/// <reference types="../../programs/develop/dist/types/polyfill.d.ts" />

package/dist/new-vue/images/vue.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+  <style>
+    .st0 { fill: #42B883; }
+    .st1 { fill: #35495E; }
+  </style>
+  <path class="st0" d="M78.8,10L64,35.4L49.2,10H0l64,110l64-110C128,10,78.8,10,78.8,10z" />
+  <path class="st1" d="M78.8,10L64,35.4L49.2,10H25.6L64,76l38.4-66H78.8z" />
+</svg>

package/dist/new-vue/manifest.json

@@ -0,0 +1,15 @@
+{
+  "manifest_version": 3,
+  "version": "0.0.1",
+  "name": "new-vue",
+  "description": "An Extension.js example.",
+  "icons": {
+    "16": "images/extension_16.png",
+    "48": "images/extension_48.png",
+    "128": "images/extension_128.png"
+  },
+  "chrome_url_overrides": {
+    "newtab": "newtab/index.html"
+  },
+  "author": "Your Name"
+}

package/dist/new-vue/newtab/NewTabApp.vue

@@ -0,0 +1,30 @@
+<script lang="ts">
+export default {
+  data() {
+    return {
+      message: 'Welcome to your Vue Extension.'
+    }
+  }
+}
+</script>
+<template>
+  <header>
+    <h1>
+      <img
+        class="vue"
+        src="../images/vue.svg"
+        alt="The Vue logo"
+        width="120px"
+      />
+      <br />
+      {{message}}
+    </h1>
+    <p>
+      Learn more about creating cross-browser extensions at 
+      <a href="https://extension.js.org" target="_blank">
+        https://extension.js.org
+      </a>
+      .
+    </p>
+  </header>
+</template>

package/dist/new-vue/newtab/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Vue Template</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this extension.</noscript>
+    <div id="app"></div>
+  </body>
+  <script type="module" src="./scripts.ts"></script>
+</html>

package/dist/new-vue/newtab/scripts.ts

@@ -0,0 +1,7 @@
+import 'sakura.css'
+import './styles.css'
+
+import {createApp} from 'vue'
+import NewTabApp from './NewTabApp.vue'
+
+createApp(NewTabApp).mount('#app')

package/dist/new-vue/newtab/styles.css

@@ -0,0 +1,36 @@
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: calc(100vh - 26px);
+}
+
+h1 {
+  font-size: 4.7em;
+}
+
+.vue {
+  animation: heartbeat 1s linear infinite;
+}
+
+@keyframes heartbeat {
+  0% {
+    transform: scale(0.9);
+  }
+
+  20% {
+    transform: scale(1);
+  }
+
+  30% {
+    transform: scale(0.9);
+  }
+
+  40% {
+    transform: scale(1);
+  }
+
+  100% {
+    transform: scale(0.9);
+  }
+}

package/dist/new-vue/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "new-vue",
+  "description": "An Extension.js example.",
+  "version": "0.0.1",
+  "author": {
+    "name": "Your Name",
+    "email": "your@email.com",
+    "url": "https://yourwebsite.com"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "vue": "^3.4.27",
+    "sakura.css": "^1.5.0"
+  },
+  "devDependencies": {
+    "typescript": "5.3.3",
+    "extension": "latest"
+  },
+  "scripts": {
+    "dev": "extension dev",
+    "start": "extension start",
+    "build": "extension build"
+  },
+  "private": true
+}

package/dist/new-vue/tsconfig.json

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