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

extension-create 2.0.0-alpha.23 → 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 (364) hide show

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/README.md ADDED Viewed

@@ -0,0 +1,35 @@
+# test-template-config-stylelint
+> 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-stylelint/images/extension_128.png ADDED Viewed

Binary file

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

Binary file

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

Binary file

package/dist/test-template-config-stylelint/images/stylelint.svg ADDED Viewed

@@ -0,0 +1 @@

+ <svg width="2500" height="2393" viewBox="0 0 256 245" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M129.74 243.648c28-100.109 27.188-100.563 47.425-171.942l4.864 2.816c2.65 1.516 4.813.268 4.813-2.778V37.696C192.218 18.893 196.416 4.352 197.658 0h21.92L256 33.728 232.077 54.4l18.093 19.565-119.226 169.683c-.576.96-1.389.742-1.203 0zm13.025-215.782c1.088 0 1.958.595 1.958 1.344v17.44c0 .73-.877 1.324-1.958 1.324h-29.44c-1.088 0-1.965-.595-1.965-1.33V29.196c0-.736.877-1.344 1.958-1.344h29.44l.007.013zM179.117 8.55L146.72 27.251c.371.576.602 1.235.602 1.952v17.453c0 .896-.359 1.715-.935 2.368l32.723 18.893c2.228 1.293 4.058.237 4.058-2.336V10.893c0-2.58-1.818-3.629-4.051-2.343zm-70.362 38.106v-17.46c0-.716.23-1.375.602-1.945L76.96 8.538c-2.227-1.28-4.058-.23-4.058 2.342v54.688c0 2.573 1.83 3.629 4.064 2.336l32.717-18.893c-.576-.659-.921-1.472-.921-2.368l-.007.013zm16.301 196.992h1.203C98.266 143.539 99.072 143.085 78.835 71.706l-4.864 2.816c-2.643 1.516-4.813.268-4.813-2.778V37.696C63.782 18.899 59.584 4.352 58.342 0H36.43L0 33.728 23.917 54.4 5.824 73.971l119.232 169.677zM127.11 84.41a8.845 8.845 0 1 0 0-17.69 8.845 8.845 0 0 0 0 17.69zm0 52.576a8.845 8.845 0 1 0 0-17.69 8.845 8.845 0 0 0 0 17.69zm0 52.588a8.845 8.845 0 1 0 0-17.69 8.845 8.845 0 0 0 0 17.69z"/></svg>

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

@@ -0,0 +1,15 @@
+{
+  "manifest_version": 3,
+  "version": "0.0.1",
+  "name": "test-template-config-stylelint",
+  "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-stylelint/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>Stylelint 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.scss" media="screen" />
+  </head>
+  <body>
+    <header>
+      <h1>
+        <img
+          class="stylelint"
+          src="../images/stylelint.svg"
+          alt="The Stylelint logo"
+          width="120px"
+        />
+        <br />
+        Welcome to your Stylelint 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-stylelint/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-stylelint/newtab/styles.scss ADDED Viewed

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

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

@@ -0,0 +1,24 @@
+{
+  "private": true,
+  "name": "test-template-config-stylelint",
+  "description": "An Extension.js example.",
+  "version": "0.0.1",
+  "author": {
+    "name": "Your Name",
+    "email": "your@email.com",
+    "url": "https://yourwebsite.com"
+  },
+  "scripts": {
+    "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-scss": "^13.1.0",
+    "extension": "latest"
+  },
+  "dependencies": {}
+}

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

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

@@ -0,0 +1,21 @@
+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/content/scripts.js ADDED Viewed

@@ -0,0 +1,32 @@
+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 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/content/styles.css ADDED Viewed

@@ -0,0 +1,54 @@
+.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,
+    border-color 2s;
+}
+.content_script-logo:hover {
+  filter: grayscale(0);
+  border-color: aquamarine;
+}
+.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/images/extension_128.png ADDED Viewed

Binary file

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

Binary file

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

Binary file

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

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

@@ -0,0 +1,20 @@
+{
+  "private": true,
+  "name": "test-template-content",
+  "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-css-module/README.md ADDED Viewed

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

@@ -0,0 +1,21 @@
+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-css-module/content/Logo.module.css ADDED Viewed

@@ -0,0 +1,11 @@
+.logo {
+  width: 90px;
+  align-self: flex-start;
+  filter: grayscale(1);
+  transition: filter 2s;
+}
+.logo:hover {
+  filter: grayscale(0);
+}

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

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

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

Binary file

package/dist/test-template-content-css-module/images/extension_16.png ADDED Viewed

Binary file

package/dist/test-template-content-css-module/images/extension_48.png ADDED Viewed

Binary file

package/dist/test-template-content-css-module/manifest.json ADDED Viewed

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