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

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

@@ -1,28 +0,0 @@
-{
-  "manifest_version": 3,
-  "version": "0.0.1",
-  "name": "test-template-content-react",
-  "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.tsx"
-      ]
-    }
-  ],
-  "author": "Your Name"
-}

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

@@ -1,28 +0,0 @@
-{
-  "private": true,
-  "name": "test-template-content-react",
-  "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.0.9",
-    "@types/react-dom": "^18.0.5",
-    "typescript": "5.3.3",
-    "extension": "latest"
-  },
-  "scripts": {
-    "dev": "extension dev",
-    "start": "extension start",
-    "build": "extension build"
-  }
-}

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

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

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

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

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

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

@@ -1,21 +0,0 @@
-console.log('hello from background script')
-
-chrome.runtime.onMessage.addListener((request, sender) => {
-  if (request.action === 'changeBackgroundColor') {
-    changeBackgroundColor(request.color, sender.tab.id)
-  }
-})
-
-function changeBackgroundColor(color, tabId) {
-  chrome.scripting
-    .executeScript({
-      target: {tabId},
-      function: setPageBackgroundColor,
-      args: [color]
-    })
-    .catch(console.error)
-}
-
-function setPageBackgroundColor(color) {
-  document.body.style.backgroundColor = color
-}

package/dist/test-template-content-sass/content/scripts.js

@@ -1,32 +0,0 @@
-import extensionJsLogo from '../images/extension_128.png'
-import './styles.scss'
-
-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 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',
-      color: event.target.value
-    })
-    .catch(console.error)
-})

package/dist/test-template-content-sass/content/styles.scss

@@ -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-sass/manifest.json

@@ -1,35 +0,0 @@
-{
-  "manifest_version": 3,
-  "version": "0.0.1",
-  "name": "test-template-content-sass",
-  "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-sass/package.json

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

package/dist/test-template-content-sass-module/README.md

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

@@ -1,21 +0,0 @@
-console.log('hello from background script')
-
-chrome.runtime.onMessage.addListener((request, sender) => {
-  if (request.action === 'changeBackgroundColor') {
-    changeBackgroundColor(request.color, sender.tab.id)
-  }
-})
-
-function changeBackgroundColor(color, tabId) {
-  chrome.scripting
-    .executeScript({
-      target: {tabId},
-      function: setPageBackgroundColor,
-      args: [color]
-    })
-    .catch(console.error)
-}
-
-function setPageBackgroundColor(color) {
-  document.body.style.backgroundColor = color
-}

package/dist/test-template-content-sass-module/content/Logo.module.scss

@@ -1,18 +0,0 @@
-.logo {
-  background: white;
-  width: 90px;
-  align-self: flex-start;
-  border: 4px solid;
-  border-color: #ccc;
-  border-radius: 24px;
-  filter: grayscale(1);
-  transition:
-    filter 2s,
-    border-color 2s;
-}
-
-.logo:hover {
-  filter: grayscale(0);
-  border-color: aquamarine;
-}
-

package/dist/test-template-content-sass-module/content/scripts.js

@@ -1,33 +0,0 @@
-import extensionJsLogo from '../images/extension_128.png'
-import './styles.scss'
-import styles from './Logo.module.scss'
-
-console.log('hello from content_scripts')
-
-document.body.innerHTML += `
-<div class="content_script-box">
-  <img class=${styles.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 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',
-      color: event.target.value
-    })
-    .catch(console.error)
-})

package/dist/test-template-content-sass-module/content/styles.scss

@@ -1,40 +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-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-sass-module/manifest.json

@@ -1,35 +0,0 @@
-{
-  "manifest_version": 3,
-  "version": "0.0.1",
-  "name": "test-template-content-sass-module",
-  "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-sass-module/package.json

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

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

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

@@ -1,21 +0,0 @@
-console.log('hello from background script')
-
-chrome.runtime.onMessage.addListener((request, sender) => {
-  if (request.action === 'changeBackgroundColor') {
-    changeBackgroundColor(request.color, sender.tab.id)
-  }
-})
-
-function changeBackgroundColor(color, tabId) {
-  chrome.scripting
-    .executeScript({
-      target: {tabId},
-      function: setPageBackgroundColor,
-      args: [color]
-    })
-    .catch(console.error)
-}
-
-function setPageBackgroundColor(color) {
-  document.body.style.backgroundColor = color
-}

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

@@ -1,45 +0,0 @@
-import tailwindBg from '../images/tailwind_bg.png'
-import tailwindLogo from '../images/tailwind.png'
-import chromeWindowBg from '../images/chromeWindow.png'
-
-export function getContentHtml() {
-  return `
-    <div class="mx-auto max-w-7xl md:px-0 lg:p-6">
-      <div class="relative isolate overflow-hidden bg-gray-900 px-6 pt-16 shadow-2xl lg:rounded-3xl md:pt-12 md:h-full sm:h-[100vh] lg:flex lg:gap-x-20 lg:px-12 lg:pt-0">
-        <div class="absolute z-20 top-0 inset-x-0 flex justify-center overflow-hidden pointer-events-none">
-          <div class="w-[108rem] flex-none flex justify-end">
-            <picture>
-              <img
-                src=${tailwindBg}
-                alt=""
-                class="w-[90rem] flex-none max-w-none hidden dark:block"
-                decoding="async"
-              />
-            </picture>
-          </div>
-        </div>
-        <div class="mx-auto max-w-md text-center lg:py-12 lg:mx-0 lg:flex-auto lg:text-left">
-          <div class="my-4">
-            <img
-              alt="Tailwind logo"
-              src=${tailwindLogo}
-              class="relative inline-block w-12"
-            />
-          </div>
-          <h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl">
-            This is a content script running Tailwind.css.
-          </h2>
-        </div>
-        <div class="relative mt-16 lg:mt-8">
-          <img
-            class="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>
-  `
-}

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

@@ -1,6 +0,0 @@
-import './styles.css'
-import {getContentHtml} from './content'
-
-console.log('hello from content_scripts')
-
-document.body.innerHTML += `<div id="extension-root">${getContentHtml()}</div>`

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

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