Update templates to be used as a hub for both app/cli template calls

.github/workflows/spec.yml

@@ -0,0 +1,27 @@
+name: 🛠️
+
+on:
+  push:
+    branches: ["main"]
+
+jobs:
+  generate-templates:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/[email protected]
+
+      - name: Use Node.js 20.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: "20.11.1"
+
+      - name: Installing build dependencies
+        run: npm i
+
+      # - name: Generate /templates folder from source templates (creates /templates folder)
+      #   run: sh ci-scripts/generate_templates_from_source.sh
+
+      # - name: Validate /templates against Extension.js
+      #   run: npm run test

.gitignore

@@ -0,0 +1,86 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# Lock files
+yarn.lock
+package-lock.json
+
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+dist
+src/**/dist
+
+# Features not implemented yet
+
+steps
+spec
+ci-scripts

README.md

@@ -1 +1,44 @@
-# Templates
+[action-image]: https://github.com/cezaraugusto/extension/actions/workflows/spec.yml/badge.svg?branch=main
+[action-url]: https://github.com/cezaraugusto/extension/actions
+[prs-image]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg
+[prs-url]: https://github.com/cezaraugusto/extension/blob/main/CONTRIBUTING.md
+[vunlerabilities]: https://snyk.io/test/github/cezaraugusto/extension/badge.svg
+[fossa-image]: https://app.fossa.com/api/projects/git%2Bgithub.com%2Fcezaraugusto%2Fextension.svg?type=shield&issueType=license
+[fossa-url]: https://app.fossa.com/projects/git%2Bgithub.com%2Fcezaraugusto%2Fextension?ref=badge_shield&issueType=license
+[discord-image]: https://img.shields.io/discord/1253608412890271755
+[discord-url]: https://discord.gg/v9h2RgeTSN
+
+# Templates [![vunlerabilities][vunlerabilities]][vunlerabilities] [![workflow][action-image]][action-url] [![fossa][fossa-image]][fossa-url] [![prs][prs-image]][prs-url] [![discord][discord-image]][discord-url]
+
+> Make it very easy to create cross-browser extensions.
+
+<img alt="Tbe Templates website" src="https://github.com/extension-js/extension.js/assets/4672033/e33fb5d7-2a74-4efe-8fc1-c829db356124"> 
+<hr>
+
+<img alt="Logo" align="right" src="https://github.com/extension-js/extension.js/assets/4672033/8c9260dc-4a82-4f55-9114-1380ecc5b3ae" width="150" />
+
+> Professional templates for building cross-browser extensions with no build configuration.
+
+- [Request A New Template](#request-a-new-template) — Request something new.
+<!-- - [Submit A New Template](#submit-a-new-template) — How to develop a template yourself. -->
+
+Templates allow browser extension developers to create new projects using technologies they are familiar with. Start your next cross-browser extension using React, Preact, Vue, and much more.
+
+## Request A New Template
+
+Create an issue with the description of your request.
+
+<!-- ## Submit A New Template
+
+To create a new template, develop your extension locally and once you are happy with it, follow the steps below:
+
+1. Clone this project `git clone [email protected]:extension-js/templates.git`
+2. Install the project dependencies `npm install`
+3. Add your extension source files to the `/src`
+4. Run the template specification against all templates `npm run spec`
+
+If the specification test passes, you're all set! Create a branch and submit a pull-request :) -->
+
+## License
+
+MIT (c) Cezar Augusto.

jest.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node'
+}

package.json

@@ -0,0 +1,24 @@
+{
+  "private": true,
+  "name": "templates-app",
+  "version": "1.0.0",
+  "scripts": {
+    "ci:build": "docker build -t templates-github-action:latest .",
+    "ci:run": "act -P ubuntu-latest=templates-github-action:latest --pull=false",
+    "test:build": "npm run before:test && jest template-spec/build.spec.ts",
+    "test:create": "npm run before:test && jest template-spec/create.spec.ts"
+  },
+  "keywords": [],
+  "author": "Cezar Augusto",
+  "license": "MIT",
+  "dependencies": {
+    "browser-extension-manifest-fields": "^1.0.6",
+    "extension": "^1.8.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.5.11",
+    "@types/node": "^20.11.5",
+    "jest": "^29.7.0",
+    "ts-jest": "^29.1.2"
+  }
+}

src/chatgpt/manifest.json

@@ -0,0 +1,16 @@
+{
+  "manifest_version": 3,
+  "version": "1.0",
+  "name": "chatgpt",
+  "description": "An Extension.js template integrated with ChatGPT. This template includes a side panel.",
+  "icons": {
+    "16": "images/icons/icon_16.png",
+    "48": "images/icons/icon_48.png"
+  },
+  "side_panel": {
+    "default_path": "side_panel/index.html"
+  },
+  "permissions": [
+    "sidePanel"
+  ]
+}

src/chatgpt/package.json

@@ -0,0 +1,21 @@
+{
+  "devDependencies": {
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.5",
+    "daisyui": "^4.7.3",
+    "openai": "^4.28.4",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "tailwindcss": "^3.4.1",
+    "extension": "latest"
+  },
+  "scripts": {
+    "dev": "extension dev",
+    "start": "extension start",
+    "build": "extension build"
+  },
+  "dependencies": {},
+  "name": "chatgpt",
+  "private": true,
+  "version": "0.0.0"
+}

src/chatgpt/side_panel/SidePanelApp.jsx

@@ -0,0 +1,91 @@
+import { useState } from 'react';
+import OpenAI from "openai";
+import chatgptLogo from '../images/chatgpt.png'
+import extensionJsLogo from '../images/extensionjs.png'
+
+const openai = new OpenAI({
+  apiKey: process.env.EXTENSION_OPENAI_API_KEY,
+  dangerouslyAllowBrowser: true,
+});
+
+function SidebarApp() {
+  const [messages, setMessages] = useState([
+    {
+      content: (
+        "Hello there! This is your ChatGPT extension sample, " +
+        "built with React, Tailwind.css, and DaisyUI. " +
+        "For it to work, create a .env file with your EXTENSION_OPENAI_API_KEY. " +
+        "You can get an API key from OpenAI's website."
+      ),
+      role: "assistant"
+    },
+    {
+      content: "https://platform.openai.com/api-keys",
+      role: "assistant"
+    },
+  ]);
+
+  const [isTyping, setIsTyping] = useState(false);
+
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    const newMessage = {
+      content: e.target[0].value,
+      role: "user"
+    }
+
+    const newMessages = [...messages, newMessage];
+
+    setMessages(newMessages);
+    setIsTyping(true);
+    e.target.reset();
+
+    const completion = await openai.chat.completions.create({
+      model: "gpt-3.5-turbo",
+      messages: [...newMessages],
+    });
+
+    setMessages([...newMessages, completion.choices[0].message]);
+    setIsTyping(false);
+  }
+
+  return (
+    <section className='container mx-auto p-5 fixed inset-0'>
+      <div className="w-full h-full flex flex-col">
+        <div className='flex-grow overflow-auto'>
+          {
+            messages.length && messages.map((msg, i) => {
+              return (
+                <div className={`chat ${msg.role === 'assistant' ? 'chat-start' : 'chat-end'}`} key={'chatKey' + i}>
+                  <div className="chat-image avatar">
+                    <div className="w-10 rounded-full">
+                      <img src={msg.role === 'assistant' ? chatgptLogo : extensionJsLogo} />
+                    </div>
+                  </div>
+                  <div className="chat-bubble">{msg.content}</div>
+                </div>
+              )
+            })
+          }
+        </div>
+
+        <form className="form-control items-center" onSubmit={(e) => handleSubmit(e)}>
+          <div className="input-group max-w-full w-[800px] relative flex items-center">
+            {isTyping && <small className='absolute -top-5 left-0.5 animate-pulse'>ChatGPT Extension is typing...</small>}
+
+            <input type="text" placeholder="Ask ChatGPT a question..." className="input input-bordered flex-grow mr-2.5" required />
+            <button className="btn btn-square" type="submit">
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="currentColor" viewBox="0 0 16 16">
+                <path d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576 6.636 10.07Zm6.787-8.201L1.591 6.602l4.339 2.76 7.494-7.493Z" />
+              </svg>
+            </button>
+          </div>
+        </form>
+      </div>
+    </section>
+  );
+}
+
+export default SidebarApp;

src/chatgpt/side_panel/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>ChatGPT Template</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this extension.</noscript>
+    <div id="root"></div>
+  </body>
+  <script src="./sidepanel.jsx"></script>
+</html>

src/chatgpt/side_panel/sidepanel.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import SidePanelApp from './SidePanelApp'
+import './styles.css'
+
+const root = ReactDOM.createRoot(document.getElementById('root'))
+
+root.render(
+  <React.StrictMode>
+    <SidePanelApp />
+  </React.StrictMode>
+)

src/content/content.js

@@ -0,0 +1,30 @@
+import extensionJsLogo from './images/extensionjs.svg'
+import './content.css'
+
+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)
+})