Add crypto extension

extension-js · Sep 13, 2024 · bf3fa9b · bf3fa9b
1 parent 562e413
commit bf3fa9b
Show file tree

Hide file tree

Showing 18 changed files with 898 additions and 144 deletions.
diff --git a/e2e/new-crypto.spec.ts b/e2e/new-crypto.spec.ts
@@ -0,0 +1,33 @@
+import path from 'path'
+import {execSync} from 'child_process'
+import {extensionFixtures} from './extension-fixtures'
+
+const exampleDir = 'examples/new-typescript'
+const pathToExtension = path.join(__dirname, `../${exampleDir}/dist/chrome`)
+const test = extensionFixtures(pathToExtension, true)
+
+test.beforeAll(async () => {
+  execSync(`pnpm extension build ${exampleDir}`, {
+    cwd: path.join(__dirname, '..')
+  })
+})
+
+test('should exist an element with the welcome message text', async ({
+  page
+}) => {
+  await page.goto('chrome://newtab/')
+  const h1 = page.locator('h1')
+  await test.expect(h1).toHaveText('Welcome to your Crypto Extension.')
+})
+
+test('should exist a default color value', async ({page}) => {
+  await page.goto('chrome://newtab/')
+  const h1 = page.locator('h1')
+  const color = await page.evaluate(
+    (locator) => {
+      return window.getComputedStyle(locator!).getPropertyValue('color')
+    },
+    await h1.elementHandle()
+  )
+  await test.expect(color).toEqual('rgb(74, 74, 74)')
+})
diff --git a/examples/content-react-svgr/package.json b/examples/content-react-svgr/package.json
@@ -25,4 +25,4 @@
     "@types/react-dom": "^18.0.5",
     "typescript": "5.3.3"
   }
-}
+}
diff --git a/examples/data.ts b/examples/data.ts
@@ -195,6 +195,15 @@ const TS_TEMPLATES: Template[] = [
     hasBackground: false,
     hasEnv: false,
     configFiles: ['tsconfig.json']
+  },
+  {
+    name: 'new-crypto',
+    uiContext: ['newTab'],
+    uiFramework: undefined,
+    css: 'css',
+    hasBackground: false,
+    hasEnv: false,
+    configFiles: ['tsconfig.json', 'extension.config.js']
   }
 ]
 

diff --git a/examples/new-crypto/.gitignore b/examples/new-crypto/.gitignore
@@ -0,0 +1,31 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+
+# testing
+coverage
+
+# production
+dist
+
+# misc
+.DS_Store
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# lock files
+yarn.lock
+package-lock.json
+
+# debug files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# extension.js
+extension-env.d.ts
diff --git a/examples/new-crypto/extension.config.js b/examples/new-crypto/extension.config.js
@@ -0,0 +1,15 @@
+const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
+
+/** @type {import('extension-develop').FileConfig} */
+module.exports = {
+  config: (config) => {
+    config.plugins = [
+      ...config.plugins,
+      new NodePolyfillPlugin({
+        additionalAliases: ['process']
+      })
+    ]
+
+    return config
+  }
+}
diff --git a/examples/new-crypto/images/extension_128.png b/examples/new-crypto/images/extension_128.png
diff --git a/examples/new-crypto/images/extension_16.png b/examples/new-crypto/images/extension_16.png
diff --git a/examples/new-crypto/images/extension_48.png b/examples/new-crypto/images/extension_48.png
diff --git a/examples/new-crypto/images/typescript.png b/examples/new-crypto/images/typescript.png
diff --git a/examples/new-crypto/manifest.json b/examples/new-crypto/manifest.json
@@ -0,0 +1,14 @@
+{
+  "manifest_version": 3,
+  "version": "0.0.1",
+  "name": "Newtab Crypto Template",
+  "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"
+  }
+}
diff --git a/examples/new-crypto/newtab/index.html b/examples/new-crypto/newtab/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>TypeScript 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="crypto" src="../public/logo.svg" alt="The Crypto Template logo" width="120px" />
+        <br />
+        Welcome to your Crypto Extension.
+      </h1>
+      <article>
+        <label for="input-text">Enter a string to hash:</label>
+        <div class="hash-form">
+          <input type="text" id="input-text" placeholder="Type something...">
+          <button id="hash-button">Hash It!</button>
+        </div>
+        <p>Hashed Output (SHA-256):</p>
+        <pre id="hashed-output">Hash a string to see the result</pre>
+      </article>
+      <footer>
+        Learn more about creating cross-browser extensions at 
+        <a href="https://extension.js.org" target="_blank">https://extension.js.org</a>.
+      </footer>
+    </header>
+  </body>
+  <script src="./scripts.ts"></script>
+</html>
+
+
diff --git a/examples/new-crypto/newtab/scripts.ts b/examples/new-crypto/newtab/scripts.ts
@@ -0,0 +1,17 @@
+import * as crypto from 'crypto'
+
+function hashString(input: string): string {
+  // Hash the input using SHA-256
+  return crypto.createHash('sha256').update(input).digest('hex')
+}
+
+document.getElementById('hash-button')?.addEventListener('click', () => {
+  const inputText = (document.getElementById('input-text') as HTMLInputElement)
+    .value
+  const hashedOutput = hashString(inputText)
+
+  const outputElement = document.getElementById('hashed-output')
+  if (outputElement) {
+    outputElement.textContent = hashedOutput
+  }
+})
diff --git a/examples/new-crypto/newtab/styles.css b/examples/new-crypto/newtab/styles.css
@@ -0,0 +1,30 @@
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: calc(100vh - 26px);
+}
+
+h1 {
+  font-size: 3.7em;
+}
+
+.crypto {
+	transition: all 400ms cubic-bezier(.47,1.64,.41,.8);
+}
+
+.crypto:hover {
+  transform: scale(1.5);
+}
+
+input {
+  width: 100%;
+  height: 100%;
+}
+
+.hash-form {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 2rem;
+  margin-bottom: 2rem;
+}
diff --git a/examples/new-crypto/package.json b/examples/new-crypto/package.json
@@ -0,0 +1,16 @@
+{
+  "private": true,
+  "name": "new-crypto",
+  "description": "An Extension.js example.",
+  "version": "0.0.1",
+  "author": {
+    "name": "Cezar Augusto",
+    "email": "boss@cezaraugusto.net",
+    "url": "https://cezaraugusto.com"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "node-polyfill-webpack-plugin": "^4.0.0",
+    "typescript": "5.3.3"
+  }
+}
diff --git a/examples/new-crypto/public/logo.svg b/examples/new-crypto/public/logo.svg
diff --git a/examples/new-crypto/tsconfig.json b/examples/new-crypto/tsconfig.json
@@ -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"]
+}