extension-create 2.0.0-alpha.27 → 2.0.0-alpha.28

package/dist/test-template-new-tailwind/README.md

@@ -1,35 +0,0 @@
-# test-template-new-tailwind
-
-> An Extension.js example.
-
-## Available Scripts
-
-In the project directory, you can run the following scripts:
-
-### pnpm dev
-
-**Development Mode**: This command runs your extension in development mode. It will launch a new browser instance with your extension loaded. The page will automatically reload whenever you make changes to your code, allowing for a smooth development experience.
-
-```bash
-pnpm dev
-```
-
-### pnpm start
-
-**Production Preview**: This command runs your extension in production mode. It will launch a new browser instance with your extension loaded, simulating the environment and behavior of your extension as it will appear once published.
-
-```bash
-pnpm start
-```
-
-### pnpm build
-
-**Build for Production**: This command builds your extension for production. It optimizes and bundles your extension, preparing it for deployment to the target browser's store.
-
-```bash
-pnpm build
-```
-
-## Learn More
-
-To learn more about creating cross-browser extensions with Extension.js, visit the [official documentation](https://extension.js.org).

package/dist/test-template-new-tailwind/manifest.json

@@ -1,15 +0,0 @@
-{
-  "manifest_version": 3,
-  "version": "0.0.1",
-  "name": "test-template-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/test-template-new-tailwind/newtab/NewTabApp.tsx

@@ -1,67 +0,0 @@
-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/test-template-new-tailwind/newtab/index.html

@@ -1,13 +0,0 @@
-<!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/test-template-new-tailwind/newtab/scripts.tsx

@@ -1,12 +0,0 @@
-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/test-template-new-tailwind/newtab/styles.css

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

package/dist/test-template-new-tailwind/package.json

@@ -1,28 +0,0 @@
-{
-  "private": true,
-  "name": "test-template-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"
-  }
-}

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

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

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

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

package/dist/test-template-new-tailwind/tsconfig.json

@@ -1,22 +0,0 @@
-{
-  "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"]
-}

package/dist/test-template-new-typescript/README.md

@@ -1,35 +0,0 @@
-# test-template-new-typescript
-
-> An Extension.js example.
-
-## Available Scripts
-
-In the project directory, you can run the following scripts:
-
-### pnpm dev
-
-**Development Mode**: This command runs your extension in development mode. It will launch a new browser instance with your extension loaded. The page will automatically reload whenever you make changes to your code, allowing for a smooth development experience.
-
-```bash
-pnpm dev
-```
-
-### pnpm start
-
-**Production Preview**: This command runs your extension in production mode. It will launch a new browser instance with your extension loaded, simulating the environment and behavior of your extension as it will appear once published.
-
-```bash
-pnpm start
-```
-
-### pnpm build
-
-**Build for Production**: This command builds your extension for production. It optimizes and bundles your extension, preparing it for deployment to the target browser's store.
-
-```bash
-pnpm build
-```
-
-## Learn More
-
-To learn more about creating cross-browser extensions with Extension.js, visit the [official documentation](https://extension.js.org).

package/dist/test-template-new-typescript/manifest.json

@@ -1,15 +0,0 @@
-{
-  "manifest_version": 3,
-  "version": "0.0.1",
-  "name": "test-template-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/test-template-new-typescript/newtab/index.html

@@ -1,25 +0,0 @@
-<!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/test-template-new-typescript/newtab/scripts.ts

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

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

@@ -1,18 +0,0 @@
-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/test-template-new-typescript/package.json

@@ -1,22 +0,0 @@
-{
-  "private": true,
-  "name": "test-template-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": {}
-}

package/dist/test-template-new-typescript/tsconfig.json

@@ -1,22 +0,0 @@
-{
-  "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"]
-}

package/dist/test-template-new-vue/README.md

@@ -1,35 +0,0 @@
-# test-template-new-vue
-
-> An Extension.js example.
-
-## Available Scripts
-
-In the project directory, you can run the following scripts:
-
-### pnpm dev
-
-**Development Mode**: This command runs your extension in development mode. It will launch a new browser instance with your extension loaded. The page will automatically reload whenever you make changes to your code, allowing for a smooth development experience.
-
-```bash
-pnpm dev
-```
-
-### pnpm start
-
-**Production Preview**: This command runs your extension in production mode. It will launch a new browser instance with your extension loaded, simulating the environment and behavior of your extension as it will appear once published.
-
-```bash
-pnpm start
-```
-
-### pnpm build
-
-**Build for Production**: This command builds your extension for production. It optimizes and bundles your extension, preparing it for deployment to the target browser's store.
-
-```bash
-pnpm build
-```
-
-## Learn More
-
-To learn more about creating cross-browser extensions with Extension.js, visit the [official documentation](https://extension.js.org).

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

@@ -1,8 +0,0 @@
-<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/test-template-new-vue/manifest.json

@@ -1,15 +0,0 @@
-{
-  "manifest_version": 3,
-  "version": "0.0.1",
-  "name": "test-template-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/test-template-new-vue/newtab/NewTabApp.vue

@@ -1,30 +0,0 @@
-<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/test-template-new-vue/newtab/index.html

@@ -1,13 +0,0 @@
-<!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/test-template-new-vue/newtab/scripts.ts

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

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

@@ -1,36 +0,0 @@
-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/test-template-new-vue/package.json

@@ -1,25 +0,0 @@
-{
-  "private": true,
-  "name": "test-template-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"
-  }
-}

package/dist/test-template-new-vue/tsconfig.json

@@ -1,22 +0,0 @@
-{
-  "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"]
-}

package/dist/test-template-sidebar/README.md

@@ -1,35 +0,0 @@
-# test-template-sidebar
-
-> An Extension.js example.
-
-## Available Scripts
-
-In the project directory, you can run the following scripts:
-
-### pnpm dev
-
-**Development Mode**: This command runs your extension in development mode. It will launch a new browser instance with your extension loaded. The page will automatically reload whenever you make changes to your code, allowing for a smooth development experience.
-
-```bash
-pnpm dev
-```
-
-### pnpm start
-
-**Production Preview**: This command runs your extension in production mode. It will launch a new browser instance with your extension loaded, simulating the environment and behavior of your extension as it will appear once published.
-
-```bash
-pnpm start
-```
-
-### pnpm build
-
-**Build for Production**: This command builds your extension for production. It optimizes and bundles your extension, preparing it for deployment to the target browser's store.
-
-```bash
-pnpm build
-```
-
-## Learn More
-
-To learn more about creating cross-browser extensions with Extension.js, visit the [official documentation](https://extension.js.org).