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

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

@@ -1,35 +0,0 @@
-{
-  "manifest_version": 3,
-  "version": "0.0.1",
-  "name": "test-template-content-tailwind",
-  "description": "An Extension.js example.",
-  "icons": {
-    "16": "images/extension_16.png",
-    "48": "images/extension_48.png",
-    "128": "images/extension_128.png"
-  },
-  "permissions": [
-    "activeTab",
-    "scripting"
-  ],
-  "host_permissions": [
-    "<all_urls>"
-  ],
-  "background": {
-    "chromium:service_worker": "background.js",
-    "firefox:scripts": [
-      "background.js"
-    ]
-  },
-  "content_scripts": [
-    {
-      "matches": [
-        "<all_urls>"
-      ],
-      "js": [
-        "content/scripts.js"
-      ]
-    }
-  ],
-  "author": "Your Name"
-}

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

@@ -1,23 +0,0 @@
-{
-  "private": true,
-  "name": "test-template-content-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": {
-    "tailwindcss": "^3.4.1"
-  },
-  "scripts": {
-    "dev": "extension dev",
-    "start": "extension start",
-    "build": "extension build"
-  },
-  "devDependencies": {
-    "extension": "latest"
-  }
-}

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

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

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

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

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

@@ -1,35 +0,0 @@
-# test-template-content-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-content-typescript/background.ts

@@ -1,26 +0,0 @@
-console.log('hello from background script')
-
-// eslint-disable-next-line no-undef
-chrome.runtime.onMessage.addListener((request, sender) => {
-  if (request.action === 'changeBackgroundColor') {
-    changeBackgroundColor(request.color, sender.tab?.id)
-  }
-})
-
-function changeBackgroundColor(color: string, tabId: number | undefined) {
-  if (!tabId) {
-    return
-  }
-
-  chrome.scripting
-    .executeScript({
-      target: {tabId},
-      func: setPageBackgroundColor,
-      args: [color]
-    })
-    .catch(console.error)
-}
-
-function setPageBackgroundColor(color: string) {
-  document.body.style.backgroundColor = color
-}

package/dist/test-template-content-typescript/content/scripts.ts

@@ -1,33 +0,0 @@
-import extensionJsLogo from '../images/extension_128.png'
-import './styles.css'
-
-console.log('hello from content_scripts')
-
-document.body.innerHTML += `
-<div class="content_script-box">
-  <img class="content_script-logo" src=${extensionJsLogo} />
-  <h1 class="content_script-title">
-    Change the background-color ⬇
-  </h1>
-  <input type="color" class="content_script-colorPicker" id="colorPicker">
-  <p class="content_script-description">
-    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>
-`
-
-document.getElementById('colorPicker')?.addEventListener('input', (event) => {
-  chrome.runtime
-    .sendMessage({
-      action: 'changeBackgroundColor',
-      // @ts-expect-error
-      color: event.target?.value
-    })
-    .catch(console.error)
-})

package/dist/test-template-content-typescript/content/styles.css

@@ -1,51 +0,0 @@
-.content_script-box {
-  background: white;
-  position: fixed;
-  right: 0;
-  bottom: 0;
-  z-index: 9;
-  width: 315px;
-  height: 345px;
-  margin: 1em;
-  padding: 1em;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  gap: 1em;
-  box-shadow: 0px 0px 4px 1px #ccc;
-}
-
-.content_script-logo {
-  width: 90px;
-  align-self: flex-start;
-  filter: grayscale(1);
-  transition: filter 2s;
-}
-
-.content_script-logo:hover {
-  filter: grayscale(0);
-}
-
-.content_script-title {
-  font-size: 1.85em;
-  color: #333;
-  line-height: 1.1;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
-  font-weight: 700;
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-  -ms-word-break: break-all;
-  word-break: break-word;
-}
-
-.content_script-description {
-  color: #999;
-}
-
-.content_script-colorPicker {
-  display: block;
-  width: 100%;
-  height: 50px;
-}

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

@@ -1,35 +0,0 @@
-{
-  "manifest_version": 3,
-  "version": "0.0.1",
-  "name": "test-template-content-typescript",
-  "description": "An Extension.js example.",
-  "icons": {
-    "16": "images/extension_16.png",
-    "48": "images/extension_48.png",
-    "128": "images/extension_128.png"
-  },
-  "permissions": [
-    "activeTab",
-    "scripting"
-  ],
-  "host_permissions": [
-    "<all_urls>"
-  ],
-  "background": {
-    "chromium:service_worker": "background.ts",
-    "firefox:scripts": [
-      "background.ts"
-    ]
-  },
-  "content_scripts": [
-    {
-      "matches": [
-        "<all_urls>"
-      ],
-      "js": [
-        "content/scripts.ts"
-      ]
-    }
-  ],
-  "author": "Your Name"
-}

package/dist/test-template-content-typescript/package.json

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

package/dist/test-template-content-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-content-vue/README.md

@@ -1,35 +0,0 @@
-# test-template-content-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-content-vue/background.ts

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

package/dist/test-template-content-vue/content/ContentApp.vue

@@ -1,90 +0,0 @@
-<script lang="ts" setup>
-import {ref} from 'vue'
-
-const isdialogOpen = ref(true)
-const setIsDialogOpen = (value: boolean) => (isdialogOpen.value = value)
-</script>
-<template>
-  <div v-if="isdialogOpen">
-    <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="../images/tailwind_bg.png"
-                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="Vue logo"
-              src="../images/vue.svg"
-              className="relative inline-block w-12"
-            />
-            <div className="text-3xl text-white">+</div>
-            <img
-              alt="TypeScript logo"
-              src="../images/typescript.png"
-              className="relative inline-block w-12"
-            />
-            <div className="text-3xl text-white">+</div>
-            <img
-              alt="Tailwind logo"
-              src="../images/tailwind.png"
-              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 Vue, 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
-              @click="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="../images/chromeWindow.png"
-            alt="Chrome window screenshot"
-            width="1824"
-            height="1080"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div v-else>
-    <div className="mx-auto p-6">
-      <button
-        @click="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>
-  </div>
-</template>

package/dist/test-template-content-vue/content/scripts.ts

@@ -1,13 +0,0 @@
-import {createApp} from 'vue'
-import ContentApp from './ContentApp.vue'
-import './styles.css'
-
-function initial() {
-  const rootDiv = document.createElement('div')
-  rootDiv.id = 'extension-root'
-  document.body.appendChild(rootDiv)
-
-  createApp(ContentApp).mount(rootDiv)
-}
-
-setTimeout(initial, 1000)

package/dist/test-template-content-vue/content/shims-vue.d.ts

@@ -1,6 +0,0 @@
-/* eslint-disable */
-declare module '*.vue' {
-  import type {DefineComponent} from 'vue'
-  const component: DefineComponent<{}, {}, any>
-  export default component
-}

package/dist/test-template-content-vue/content/styles.css

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

package/dist/test-template-content-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-content-vue/manifest.json

@@ -1,31 +0,0 @@
-{
-  "manifest_version": 3,
-  "version": "0.0.1",
-  "name": "test-template-content-vue",
-  "description": "An Extension.js example.",
-  "icons": {
-    "16": "images/extension_16.png",
-    "48": "images/extension_48.png",
-    "128": "images/extension_128.png"
-  },
-  "background": {
-    "chromium:service_worker": "background.ts",
-    "firefox:scripts": [
-      "background.ts"
-    ]
-  },
-  "content_scripts": [
-    {
-      "matches": [
-        "https://extension.js.org/*"
-      ],
-      "js": [
-        "./content/scripts.ts"
-      ],
-      "css": [
-        "./content/styles.css"
-      ]
-    }
-  ],
-  "author": "Your Name"
-}

package/dist/test-template-content-vue/package.json

@@ -1,25 +0,0 @@
-{
-  "private": true,
-  "name": "test-template-content-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",
-    "tailwindcss": "^3.4.1"
-  },
-  "devDependencies": {
-    "typescript": "5.3.3",
-    "extension": "latest"
-  },
-  "scripts": {
-    "dev": "extension dev",
-    "start": "extension start",
-    "build": "extension build"
-  }
-}

package/dist/test-template-content-vue/postcss.config.js

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

package/dist/test-template-content-vue/tailwind.config.js

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

package/dist/test-template-content-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-declarative_net_request/README.md

@@ -1,35 +0,0 @@
-# test-template-declarative_net_request
-
-> 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).