extension-create 2.0.0-alpha.4 → 2.0.0-alpha.5

package/dist/content-tailwind/manifest.json

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

@@ -0,0 +1,23 @@
+{
+  "private": true,
+  "name": "content-tailwind",
+  "description": "An Extension.js example.",
+  "version": "0.0.1",
+  "author": {
+    "name": "Your Name",
+    "email": "your@email.com",
+    "url": "https://yourwebsite.com"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "tailwindcss": "^3.4.1"
+  },
+  "scripts": {
+    "dev": "extension dev",
+    "start": "extension start",
+    "build": "extension build"
+  },
+  "devDependencies": {
+    "extension": "latest"
+  }
+}

package/dist/content-tailwind/postcss.config.js

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

package/dist/content-tailwind/tailwind.config.js

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

package/dist/content-typescript/README.md

@@ -0,0 +1,37 @@
+# content-typescript
+
+> An Extension.js example.
+
+## Scripts Available
+
+In the project directory, you can run:
+
+### yarn dev
+
+```
+// Runs the app in the development mode.
+// Will open a new browser instance with your extension loaded.
+// The page will reload when you make changes.
+yarn dev
+```
+
+### yarn start
+
+```
+// Runs the app in the production mode.
+// Will open a new browser instance with your extension loaded.
+// This is how your browser extension will work once published.
+yarn start
+```
+
+### yarn build
+
+```
+// Builds the app for production.
+// Bundles your browser extension in production mode for the target browser.
+yarn build
+```
+
+## Learn More
+
+Learn more about creating cross-browser extensions in the [Extension.js](https://extension.js.org) documentation.

package/dist/content-typescript/background.ts

@@ -0,0 +1,26 @@
+console.log('hello from background script')
+
+// eslint-disable-next-line no-undef
+chrome.runtime.onMessage.addListener((request, sender) => {
+  if (request.action === 'changeBackgroundColor') {
+    changeBackgroundColor(request.color, sender.tab?.id)
+  }
+})
+
+function changeBackgroundColor(color: string, tabId: number | undefined) {
+  if (!tabId) {
+    return
+  }
+
+  chrome.scripting
+    .executeScript({
+      target: {tabId},
+      func: setPageBackgroundColor,
+      args: [color]
+    })
+    .catch(console.error)
+}
+
+function setPageBackgroundColor(color: string) {
+  document.body.style.backgroundColor = color
+}

package/dist/content-typescript/content/scripts.ts

@@ -0,0 +1,33 @@
+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 cross-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',
+      // @ts-expect-error
+      color: event.target?.value
+    })
+    .catch(console.error)
+})

package/dist/content-typescript/content/styles.css

@@ -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/content-typescript/extension-env.d.ts

@@ -0,0 +1,9 @@
+// Required Extension.js types for TypeScript projects.
+// This file is auto-generated and should not be excluded.
+// If you need extra types, consider creating a new *.d.ts and
+// referencing it in the "include" array of your tsconfig.json file.
+// See https://www.typescriptlang.org/tsconfig#include for info.
+/// <reference types="../../programs/develop/dist/types/index.d.ts" />
+
+// Polyfill types for browser.* APIs.
+/// <reference types="../../programs/develop/dist/types/polyfill.d.ts" />

package/dist/content-typescript/manifest.json

@@ -0,0 +1,35 @@
+{
+  "manifest_version": 3,
+  "version": "0.0.1",
+  "name": "content-typescript",
+  "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.ts",
+    "firefox:scripts": [
+      "background.ts"
+    ]
+  },
+  "content_scripts": [
+    {
+      "matches": [
+        "<all_urls>"
+      ],
+      "js": [
+        "content/scripts.ts"
+      ]
+    }
+  ],
+  "author": "Your Name"
+}

package/dist/content-typescript/package.json

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

package/dist/content-typescript/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "moduleResolution": "node",
+    "module": "esnext",
+    "resolveJsonModule": true,
+    "strict": true,
+    "target": "esnext",
+    "verbatimModuleSyntax": true,
+    "useDefineForClassFields": true,
+    "skipLibCheck": true
+  },
+  "include": ["./"],
+  "exclude": ["node_modules", "dist"]
+}

package/dist/content-vue/README.md

@@ -0,0 +1,37 @@
+# content-vue
+
+> An Extension.js example.
+
+## Scripts Available
+
+In the project directory, you can run:
+
+### yarn dev
+
+```
+// Runs the app in the development mode.
+// Will open a new browser instance with your extension loaded.
+// The page will reload when you make changes.
+yarn dev
+```
+
+### yarn start
+
+```
+// Runs the app in the production mode.
+// Will open a new browser instance with your extension loaded.
+// This is how your browser extension will work once published.
+yarn start
+```
+
+### yarn build
+
+```
+// Builds the app for production.
+// Bundles your browser extension in production mode for the target browser.
+yarn build
+```
+
+## Learn More
+
+Learn more about creating cross-browser extensions in the [Extension.js](https://extension.js.org) documentation.

package/dist/content-vue/background.ts

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

package/dist/content-vue/content/ContentApp.vue

@@ -0,0 +1,90 @@
+<script lang="ts" setup>
+import {ref} from 'vue'
+
+const isdialogOpen = ref(true)
+const setIsDialogOpen = (value: boolean) => (isdialogOpen.value = value)
+</script>
+<template>
+  <div v-if="isdialogOpen">
+    <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="../images/tailwind_bg.png"
+                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"
+          >
+            <img
+              alt="Vue logo"
+              src="../images/vue.svg"
+              className="relative inline-block w-12"
+            />
+            <div className="text-3xl text-white">+</div>
+            <img
+              alt="TypeScript logo"
+              src="../images/typescript.png"
+              className="relative inline-block w-12"
+            />
+            <div className="text-3xl text-white">+</div>
+            <img
+              alt="Tailwind logo"
+              src="../images/tailwind.png"
+              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 Vue, 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
+              @click="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="../images/chromeWindow.png"
+            alt="Chrome window screenshot"
+            width="1824"
+            height="1080"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div v-else>
+    <div className="mx-auto p-6">
+      <button
+        @click="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>
+  </div>
+</template>

package/dist/content-vue/content/scripts.ts

@@ -0,0 +1,13 @@
+import {createApp} from 'vue'
+import ContentApp from './ContentApp.vue'
+import './styles.css'
+
+function initial() {
+  const rootDiv = document.createElement('div')
+  rootDiv.id = 'extension-root'
+  document.body.appendChild(rootDiv)
+
+  createApp(ContentApp).mount(rootDiv)
+}
+
+setTimeout(initial, 1000)

package/dist/content-vue/content/shims-vue.d.ts

@@ -0,0 +1,6 @@
+/* eslint-disable */
+declare module '*.vue' {
+  import type {DefineComponent} from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

package/dist/content-vue/content/styles.css

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

package/dist/content-vue/extension-env.d.ts

@@ -0,0 +1,9 @@
+// Required Extension.js types for TypeScript projects.
+// This file is auto-generated and should not be excluded.
+// If you need extra types, consider creating a new *.d.ts and
+// referencing it in the "include" array of your tsconfig.json file.
+// See https://www.typescriptlang.org/tsconfig#include for info.
+/// <reference types="../../programs/develop/dist/types/index.d.ts" />
+
+// Polyfill types for browser.* APIs.
+/// <reference types="../../programs/develop/dist/types/polyfill.d.ts" />

package/dist/content-vue/images/vue.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+  <style>
+    .st0 { fill: #42B883; }
+    .st1 { fill: #35495E; }
+  </style>
+  <path class="st0" d="M78.8,10L64,35.4L49.2,10H0l64,110l64-110C128,10,78.8,10,78.8,10z" />
+  <path class="st1" d="M78.8,10L64,35.4L49.2,10H25.6L64,76l38.4-66H78.8z" />
+</svg>

package/dist/content-vue/manifest.json

@@ -0,0 +1,31 @@
+{
+  "manifest_version": 3,
+  "version": "0.0.1",
+  "name": "content-vue",
+  "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.ts"
+      ],
+      "css": [
+        "./content/styles.css"
+      ]
+    }
+  ],
+  "author": "Your Name"
+}

package/dist/content-vue/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "content-vue",
+  "description": "An Extension.js example.",
+  "version": "0.0.1",
+  "author": {
+    "name": "Your Name",
+    "email": "your@email.com",
+    "url": "https://yourwebsite.com"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "vue": "^3.4.27",
+    "tailwindcss": "^3.4.1"
+  },
+  "devDependencies": {
+    "typescript": "5.3.3",
+    "extension": "latest"
+  },
+  "scripts": {
+    "dev": "extension dev",
+    "start": "extension start",
+    "build": "extension build"
+  },
+  "private": true
+}

package/dist/content-vue/postcss.config.js

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

package/dist/content-vue/tailwind.config.js

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

package/dist/content-vue/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "moduleResolution": "node",
+    "module": "esnext",
+    "resolveJsonModule": true,
+    "strict": true,
+    "target": "esnext",
+    "verbatimModuleSyntax": true,
+    "useDefineForClassFields": true,
+    "skipLibCheck": true
+  },
+  "include": ["./"],
+  "exclude": ["node_modules", "dist"]
+}

package/dist/declarative_net_request/README.md

@@ -0,0 +1,37 @@
+# declarative_net_request
+
+> An Extension.js example.
+
+## Scripts Available
+
+In the project directory, you can run:
+
+### yarn dev
+
+```
+// Runs the app in the development mode.
+// Will open a new browser instance with your extension loaded.
+// The page will reload when you make changes.
+yarn dev
+```
+
+### yarn start
+
+```
+// Runs the app in the production mode.
+// Will open a new browser instance with your extension loaded.
+// This is how your browser extension will work once published.
+yarn start
+```
+
+### yarn build
+
+```
+// Builds the app for production.
+// Bundles your browser extension in production mode for the target browser.
+yarn build
+```
+
+## Learn More
+
+Learn more about creating cross-browser extensions in the [Extension.js](https://extension.js.org) documentation.