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

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

@@ -1,33 +0,0 @@
-import extensionJsLogo from '../images/extension_128.png'
-import './styles.css'
-import styles from './Logo.module.css'
-
-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-css-module/content/styles.css

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

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

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

package/dist/test-template-content-extension-config/README.md

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

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

package/dist/test-template-content-extension-config/content/ContentApp.tsx

@@ -1,82 +0,0 @@
-import React from 'react'
-import ReactLogo from '../images/logo.svg'
-import tailwindBg from '../images/tailwind_bg.png'
-import typescriptLogo from '../images/typescript.png'
-import tailwindLogo from '../images/tailwind.png'
-import chromeWindowBg from '../images/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">
-            <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>
-  )
-}

package/dist/test-template-content-extension-config/content/scripts.tsx

@@ -1,17 +0,0 @@
-import ReactDOM from 'react-dom/client'
-import ContentApp from './ContentApp'
-import './styles.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 />)
-}

package/dist/test-template-content-extension-config/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-extension-config/extension.config.js

@@ -1,22 +0,0 @@
-/** @type {import('extension-develop').FileConfig} */
-module.exports = {
-  config: (config) => {
-    config.module.rules.push(
-      {
-        test: /\.svg$/i,
-        type: 'asset',
-        // *.svg?url
-        resourceQuery: /url/
-      },
-      {
-        test: /\.svg$/i,
-        issuer: /\.[jt]sx?$/,
-        // exclude react component if *.svg?url
-        resourceQuery: {not: [/url/]},
-        use: ['@svgr/webpack']
-      }
-    )
-
-    return config
-  }
-}

package/dist/test-template-content-extension-config/images/logo.svg

@@ -1,9 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-11.5 -10.23174 23 20.46348">
-  <title>React Logo</title>
-  <circle cx="0" cy="0" r="2.05" fill="#61dafb"/>
-  <g stroke="#61dafb" stroke-width="1" fill="none">
-    <ellipse rx="11" ry="4.2"/>
-    <ellipse rx="11" ry="4.2" transform="rotate(60)"/>
-    <ellipse rx="11" ry="4.2" transform="rotate(120)"/>
-  </g>
-</svg>

package/dist/test-template-content-extension-config/manifest.json

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

package/dist/test-template-content-extension-config/package.json

@@ -1,44 +0,0 @@
-{
-  "private": true,
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/cezaraugusto/extension.git",
-    "directory": "programs/create/templates/content-extension-config"
-  },
-  "name": "test-template-content-extension-config",
-  "description": "An Extension.js example.",
-  "version": "0.0.1",
-  "author": {
-    "name": "Your Name",
-    "email": "your@email.com",
-    "url": "https://yourwebsite.com"
-  },
-  "files": [
-    "template",
-    "template.json"
-  ],
-  "keywords": [
-    "extension",
-    "browser-extension",
-    "web-extension",
-    "template"
-  ],
-  "dependencies": {
-    "@svgr/webpack": "^8.1.0",
-    "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-extension-config/postcss.config.js

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

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

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

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

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

@@ -1,32 +0,0 @@
-import extensionJsLogo from '../images/extension_128.png'
-import './styles.less'
-
-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-less/content/styles.less

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

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

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