feat(web-extension): initial scaffold

.github/workflows/submit.yml

@@ -0,0 +1,37 @@
+name: "Submit to Web Store"
+on:
+    workflow_dispatch:
+defaults:
+    run:
+        # change this if your app does not live at the root of the repo
+        working-directory: apps/web-webextension
+jobs:
+    build:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v3
+            - name: Cache pnpm modules
+              uses: actions/cache@v3
+              with:
+                  path: ~/.pnpm-store
+                  key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+                  restore-keys: |
+                      ${{ runner.os }}-
+            - uses: pnpm/action-setup@v2.2.4
+              with:
+                  version: latest
+                  run_install: true
+            - name: Use Node.js 16.x
+              uses: actions/setup-node@v3.4.1
+              with:
+                  node-version: 16.x
+                  cache: "pnpm"
+            - name: Build the extension
+              run: pnpm build
+            - name: Package the extension into a zip artifact
+              run: pnpm package
+            - name: Browser Platform Publish
+              uses: PlasmoHQ/bpp@v3
+              with:
+                  keys: ${{ secrets.SUBMIT_KEYS }}
+                  artifact: build/chrome-mv3-prod.zip

README.md

@@ -22,6 +22,18 @@ pnpm install
 pnpm dev
 ```
 
+### Web Extension
+
+To run the extension locally:
+
+```sh
+cd apps/web-extension
+pnpm install
+pnpm dev
+```
+
+To view this extension (with HMR), go to `chrome://extensions` and click `Load unpacked` choosing the `build/chrome-mv3-dev` directory. See the [Plasmo Docs](https://docs.plasmo.com/framework#loading-the-extension-in-chrome) for more detail.
+
 ### API
 
 To run the api, first create a virtual environment. We provide a sample `environment.yml` file to use with conda environments:

apps/web-extension/.gitignore

@@ -0,0 +1,28 @@
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+#cache
+.turbo
+.next
+.vercel
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+out/
+build/
+dist/
+
+# plasmo
+.plasmo
+
+# bpp
+keys.json

apps/web-extension/.prettierignore

@@ -0,0 +1,8 @@
+.yarn/
+.cache/
+.solid/
+.husky/
+build/
+dist/
+node_modules/
+pnpm-lock.yaml

apps/web-extension/.prettierrc

@@ -0,0 +1,21 @@
+{
+    "$schema": "https://json.schemastore.org/prettierrc",
+    "arrowParens": "avoid",
+    "bracketSpacing": true,
+    "endOfLine": "auto",
+    "htmlWhitespaceSensitivity": "css",
+    "insertPragma": false,
+    "jsxBracketSameLine": false,
+    "jsxSingleQuote": false,
+    "printWidth": 100,
+    "proseWrap": "preserve",
+    "quoteProps": "as-needed",
+    "requirePragma": false,
+    "semi": true,
+    "singleQuote": false,
+    "tabWidth": 4,
+    "trailingComma": "none",
+    "useTabs": false,
+    "vueIndentScriptAndStyle": false,
+    "plugins": ["prettier-plugin-packagejson", "prettier-plugin-tailwindcss"]
+}

apps/web-extension/README.md

@@ -0,0 +1,33 @@
+This is a [Plasmo extension](https://docs.plasmo.com/) project bootstrapped with [`plasmo init`](https://www.npmjs.com/package/plasmo).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+pnpm dev
+# or
+npm run dev
+```
+
+Open your browser and load the appropriate development build. For example, if you are developing for the chrome browser, using manifest v3, use: `build/chrome-mv3-dev`.
+
+You can start editing the popup by modifying `popup.tsx`. It should auto-update as you make changes. To add an options page, simply add a `options.tsx` file to the root of the project, with a react component default exported. Likewise to add a content page, add a `content.ts` file to the root of the project, importing some module and do some logic, then reload the extension on your browser.
+
+For further guidance, [visit our Documentation](https://docs.plasmo.com/)
+
+## Making production build
+
+Run the following:
+
+```bash
+pnpm build
+# or
+npm run build
+```
+
+This should create a production bundle for your extension, ready to be zipped and published to the stores.
+
+## Submit to the webstores
+
+The easiest way to deploy your Plasmo extension is to use the built-in [bpp](https://bpp.browser.market) GitHub action. Prior to using this action however, make sure to build your extension and upload the first version to the store to establish the basic credentials. Then, simply follow [this setup instruction](https://docs.plasmo.com/framework/workflows/submit) and you should be on your way for automated submission!

apps/web-extension/package.json

@@ -0,0 +1,49 @@
+{
+    "name": "web-extension",
+    "displayName": "SolidChain",
+    "version": "0.1.0",
+    "private": true,
+    "description": "A web extension for interfacing with LLMs",
+    "license": "MIT",
+    "author": "Evan Madill <emadill@outlook.com>",
+    "scripts": {
+        "build": "plasmo build",
+        "dev": "plasmo dev",
+        "package": "plasmo package"
+    },
+    "dependencies": {
+        "clsx": "^1.2.1",
+        "plasmo": "0.65.3",
+        "react": "18.2.0",
+        "react-dom": "18.2.0"
+    },
+    "devDependencies": {
+        "@tailwindcss/typography": "^0.5.9",
+        "@types/chrome": "0.0.210",
+        "@types/node": "18.11.18",
+        "@types/react": "18.0.27",
+        "@types/react-dom": "18.0.10",
+        "autoprefixer": "^10.4.13",
+        "daisyui": "^2.51.3",
+        "eslint": "^8.35.0",
+        "postcss": "^8.4.21",
+        "prettier": "2.8.3",
+        "prettier-plugin-packagejson": "^2.4.3",
+        "prettier-plugin-tailwindcss": "^0.2.4",
+        "tailwindcss": "^3.2.7",
+        "typescript": "4.9.4"
+    },
+    "packageManager": "pnpm@7.28.0",
+    "engines": {
+        "node": ">=16.0.0",
+        "pnpm": ">=7.20.0"
+    },
+    "manifest": {
+        "permissions": [
+            "contextMenus"
+        ],
+        "host_permissions": [
+            "https://*/*"
+        ]
+    }
+}