npm - extension-create - Versions diffs - 2.0.0-alpha.24 → 2.0.0-alpha.26 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (37) hide show

package/dist/test-template-config-babel/README.md ADDED Viewed

@@ -0,0 +1,35 @@
+# test-template-config-babel
+> 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-config-babel/babel.config.json ADDED Viewed

@@ -0,0 +1,4 @@
+{
+  "presets": ["modern-browser-extension"],
+  "plugins": []
+}

package/dist/test-template-config-babel/extension.config.js ADDED Viewed

@@ -0,0 +1,17 @@
+/** @type {import('extension-develop').FileConfig} */
+module.exports = {
+  config: (config) => {
+    config.module.rules.push(
+      // https://webpack.js.org/loaders/babel-loader/
+      // https://babeljs.io/docs/en/babel-loader
+      {
+        test: /\.(js|mjs|jsx|ts|tsx)$/,
+        include: __dirname,
+        exclude: /node_modules/,
+        loader: require.resolve('babel-loader')
+      }
+    )
+    return config
+  }
+}

package/dist/test-template-config-babel/images/babel.png ADDED Viewed

Binary file

package/dist/test-template-config-babel/images/extension_128.png ADDED Viewed

Binary file

package/dist/test-template-config-babel/images/extension_16.png ADDED Viewed

Binary file

package/dist/test-template-config-babel/images/extension_48.png ADDED Viewed

Binary file

package/dist/test-template-config-babel/manifest.json ADDED Viewed

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

@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Babel 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="babel"
+          src="../images/babel.png"
+          alt="The Babel logo"
+          width="120px"
+        />
+        <br />
+        Welcome to your Babel 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.js"></script>
+</html>

package/dist/test-template-config-babel/newtab/scripts.js ADDED Viewed

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

package/dist/test-template-config-babel/newtab/styles.css ADDED Viewed

@@ -0,0 +1,22 @@
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: calc(100vh - 26px);
+}
+h1 {
+  font-size: 4.7em;
+}
+.babel:hover {
+  filter: grayscale(1);
+  transition:
+    filter 2s,
+    border-color 2s;
+}
+.new:hover {
+  filter: grayscale(0);
+  border-color: aquamarine;
+}

package/dist/test-template-config-babel/package.json ADDED Viewed

@@ -0,0 +1,24 @@
+{
+  "private": true,
+  "name": "test-template-config-babel",
+  "description": "An Extension.js example.",
+  "version": "0.0.1",
+  "author": {
+    "name": "Your Name",
+    "email": "your@email.com",
+    "url": "https://yourwebsite.com"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.9",
+    "babel-loader": "^9.1.3",
+    "babel-preset-modern-browser-extension": "^0.7.0",
+    "stylelint": "^16.7.0",
+    "extension": "latest"
+  },
+  "scripts": {
+    "dev": "extension dev",
+    "start": "extension start",
+    "build": "extension build"
+  },
+  "dependencies": {}
+}

package/dist/test-template-config-stylelint/.stylelintrc.json ADDED Viewed

@@ -0,0 +1,3 @@
+{
+  "extends": "stylelint-config-standard-scss"
+}

package/dist/test-template-config-stylelint/newtab/index.html CHANGED Viewed

@@ -14,7 +14,7 @@
       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" />
+    <link rel="stylesheet" href="./styles.scss" media="screen" />
   </head>
   <body>
     <header>

package/dist/test-template-config-stylelint/package.json CHANGED Viewed

@@ -9,14 +9,15 @@
     "url": "https://yourwebsite.com"
   },
   "scripts": {
-    "lint:css": "stylelint '**/*.css'",
+    "lint:css": "npx stylelint '**/*.scss'",
     "dev": "extension dev",
     "start": "extension start",
     "build": "extension build"
   },
   "devDependencies": {
+    "sass": "^1.77.8",
     "stylelint": "^16.7.0",
-    "stylelint-config-standard": "^36.0.1",
+    "stylelint-config-standard-scss": "^13.1.0",
     "extension": "latest"
   },
   "dependencies": {}

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

@@ -0,0 +1,35 @@
+# 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 ADDED Viewed

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

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

@@ -0,0 +1,82 @@
+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 ADDED Viewed

@@ -0,0 +1,17 @@
+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 ADDED Viewed

@@ -0,0 +1,10 @@
+@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 ADDED Viewed

@@ -0,0 +1,22 @@
+/** @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/chromeWindow.png ADDED Viewed

Binary file

package/dist/test-template-content-extension-config/images/extension_128.png ADDED Viewed

Binary file

package/dist/test-template-content-extension-config/images/extension_16.png ADDED Viewed

Binary file

package/dist/test-template-content-extension-config/images/extension_48.png ADDED Viewed

Binary file

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

@@ -0,0 +1,9 @@
+<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/images/tailwind.png ADDED Viewed

Binary file

package/dist/test-template-content-extension-config/images/tailwind_bg.png ADDED Viewed

Binary file

package/dist/test-template-content-extension-config/images/typescript.png ADDED Viewed

Binary file

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

@@ -0,0 +1,28 @@
+{
+  "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 ADDED Viewed

@@ -0,0 +1,44 @@
+{
+  "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 ADDED Viewed

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

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

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

package/dist/test-template-content-extension-config/tsconfig.json ADDED Viewed

@@ -0,0 +1,22 @@
+{
+  "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/package.json CHANGED Viewed

@@ -9,7 +9,7 @@
     "node": ">=18"
   },
   "name": "extension-create",
-  "version": "2.0.0-alpha.24",
+  "version": "2.0.0-alpha.26",
   "description": "The Extension.js create step",
   "main": "./dist/module.js",
   "types": "./dist/module.d.ts",

package/dist/test-template-config-stylelint/stylelint.config.json DELETED Viewed

	@@ -1 +0,0 @@
1	- {"extends": ["stylelint-config-standard"]}

/package/dist/test-template-config-stylelint/newtab/{styles.css → styles.scss} RENAMED Viewed

File without changes