[WIP] Browser extension with Plasmo

.node-version

@@ -0,0 +1 @@
+v16.15.1

.npmrc

@@ -0,0 +1 @@
+strict-peer-dependencies=false

apps/cra/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "cra",
+  "name": "cra-app",
   "version": "0.1.0",
   "private": true,
   "dependencies": {

apps/next/package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "name": "next",
+  "name": "next-app",
   "scripts": {
     "dev": "next dev",
     "build": "next build",

apps/remix/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "remix-5961",
+  "name": "remix-app",
   "private": true,
   "description": "",
   "license": "",

package.json

@@ -2,9 +2,9 @@
   "private": true,
   "main": "index.js",
   "scripts": {
-    "build": "turbo run build --filter=click-to-*-component",
+    "build": "turbo run build --filter=./packages/*",
     "env": "env",
-    "dev": "turbo run dev --parallel",
+    "dev": "turbo run dev --filter=./packages/*",
     "lint": "turbo run lint",
     "prerelease": "turbo run build",
     "release": "changeset publish"

packages/browser-extensions/.github/workflows/submit.yml

@@ -0,0 +1,27 @@
+name: "Submit to Web Store"
+on:
+  workflow_dispatch:
+
+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/[email protected]
+        with:
+          version: 7.1.0
+          run_install: true
+      - name: Build and zip extension artifact
+        run: pnpm build -- --zip
+      - name: Browser Platform Publish
+        uses: plasmo-corp/bpp@v2
+        with:
+          keys: ${{ secrets.SUBMIT_KEYS }}
+          artifact: build/chrome-mv3-prod.zip

packages/browser-extensions/.gitignore

@@ -0,0 +1,39 @@
+
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+#cache
+.turbo
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*
+
+out/
+build/
+dist/
+
+# plasmo - https://www.plasmo.com
+.plasmo
+
+# bpp - http://bpp.browser.market/
+keys.json
+
+# typescript
+.tsbuildinfo

packages/browser-extensions/.prettierrc.cjs

@@ -0,0 +1,17 @@
+/**
+ * @type {import('prettier').Options}
+ */
+module.exports = {
+  printWidth: 80,
+  tabWidth: 2,
+  useTabs: false,
+  semi: false,
+  singleQuote: false,
+  trailingComma: "none",
+  bracketSpacing: true,
+  bracketSameLine: true,
+  plugins: [require.resolve("@trivago/prettier-plugin-sort-imports")],
+  importOrder: ["^@plasmohq/(.*)$", "^~(.*)$", "^[./]"],
+  importOrderSeparation: true,
+  importOrderSortSpecifiers: true
+}

packages/browser-extensions/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/workflows#submit-your-extension) and you should be on your way for automated submission!

packages/browser-extensions/content.tsx

@@ -0,0 +1,17 @@
+import type { PlasmoContentScript } from "plasmo"
+
+import { useToggled } from "~useToggled"
+
+export const config: PlasmoContentScript = {
+  matches: ["http://localhost:*/*"]
+}
+
+export default function () {
+  const [toggled] = useToggled()
+
+  return (
+    <div>
+      <h1>Toggled: {String(toggled)}</h1>
+    </div>
+  )
+}

packages/browser-extensions/options.tsx

@@ -0,0 +1,17 @@
+import { useState } from "react"
+
+function OptionsIndex() {
+  const [data, setData] = useState("")
+
+  return (
+    <div>
+      <h1>
+        Welcome to your <a href="https://www.plasmo.com">Plasmo</a> Extension!
+      </h1>
+      <h2>This is the Option UI page!</h2>
+      <input onChange={(e) => setData(e.target.value)} value={data} />
+    </div>
+  )
+}
+
+export default OptionsIndex

packages/browser-extensions/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "click-to-component-extension",
+  "displayName": "Click to Component",
+  "version": "0.0.0",
+  "description": "Option+Click React components in your browser to instantly open the source in VS Code",
+  "author": "Eric Clemmmons",
+  "scripts": {
+    "dev": "plasmo dev",
+    "build": "plasmo build"
+  },
+  "dependencies": {
+    "@plasmohq/storage": "^0.5.2",
+    "react": "18.1.0",
+    "react-dom": "18.1.0"
+  },
+  "devDependencies": {
+    "@trivago/prettier-plugin-sort-imports": "3.2.0",
+    "@types/chrome": "0.0.188",
+    "@types/node": "17.0.40",
+    "@types/react": "18.0.12",
+    "@types/react-dom": "18.0.5",
+    "click-to-react-component": "workspace:^1.0.0",
+    "plasmo": "^0.43.4",
+    "prettier": "2.6.2",
+    "typescript": "4.7.3"
+  },
+  "manifest": {
+    "host_permissions": [
+      "http://localhost:*/*"
+    ],
+    "permissions": [
+      "activeTab"
+    ]
+  }
+}

packages/browser-extensions/popup.tsx

@@ -0,0 +1,28 @@
+import { useEffect, useRef } from "react"
+
+import { useToggled } from "~useToggled"
+
+export default function Popup() {
+  const [toggled, toggle] = useToggled()
+
+  useEffect(() => {
+    // There's a race-condition with Plasmo that will revert to the previous state if set too soon
+    setTimeout(() => {
+      toggle()
+      window.close()
+    }, 300)
+  }, [])
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        padding: 16,
+        whiteSpace: "nowrap"
+      }}>
+      👇 Hover & click any of the highlighted React components on your page
+      <button onClick={toggle}>{String(toggled)}</button>
+    </div>
+  )
+}

packages/browser-extensions/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "plasmo/templates/tsconfig.base",
+  "exclude": ["node_modules"],
+  "include": [".plasmo/**/*", "./**/*.ts", "./**/*.tsx"],
+  "compilerOptions": {
+    "paths": {
+      "~*": ["./*"]
+    },
+    "baseUrl": "."
+  }
+}

packages/browser-extensions/useToggled.ts

@@ -0,0 +1,19 @@
+import { useCallback, useEffect } from "react"
+
+import { useStorage } from "@plasmohq/storage"
+
+export function useToggled() {
+  const [toggled, setToggled] = useStorage("enabled", (storedValue) => {
+    return false
+  })
+
+  const toggle = useCallback(() => {
+    if (toggled) {
+      setToggled(false)
+    } else {
+      setToggled(true)
+    }
+  }, [toggled, setToggled])
+
+  return [toggled, toggle]
+}

packages/click-to-react-component/src/types.d.ts

@@ -1,6 +1,6 @@
 export { ClickToComponent } from './ClickToComponent'
 
-export type Editor = 'vscode' | 'vscode-insiders'
+export type Editor = 'vscode' | 'vscode-insiders' | string
 
 export type ClickToComponentProps = {
   editor?: Editor