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

package/dist/test-template-config-stylelint/newtab/styles.css

@@ -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

@@ -0,0 +1,23 @@
+{
+  "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": "stylelint '**/*.css'",
+    "dev": "extension dev",
+    "start": "extension start",
+    "build": "extension build"
+  },
+  "devDependencies": {
+    "stylelint": "^16.7.0",
+    "stylelint-config-standard": "^36.0.1",
+    "extension": "latest"
+  },
+  "dependencies": {}
+}

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

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

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

@@ -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

@@ -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

@@ -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

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

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

@@ -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"
+}

package/dist/test-template-content-css-module/package.json

@@ -0,0 +1,20 @@
+{
+  "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-less/README.md

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

@@ -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-less/content/scripts.js

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,51 @@
+.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

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

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