chore: tmp

chrome-extension/with-messaging/.gitignore

@@ -0,0 +1,42 @@
+
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+#cache
+.turbo
+.next
+.vercel
+
+# 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

chrome-extension/with-messaging/.prettierrc.mjs

@@ -0,0 +1,26 @@
+/**
+ * @type {import('prettier').Options}
+ */
+export default {
+  printWidth: 80,
+  tabWidth: 2,
+  useTabs: false,
+  semi: false,
+  singleQuote: false,
+  trailingComma: "none",
+  bracketSpacing: true,
+  bracketSameLine: true,
+  plugins: ["@ianvs/prettier-plugin-sort-imports"],
+  importOrder: [
+    "<BUILTIN_MODULES>", // Node.js built-in modules
+    "<THIRD_PARTY_MODULES>", // Imports not matched by other special words or groups.
+    "", // Empty line
+    "^@plasmo/(.*)$",
+    "",
+    "^@plasmohq/(.*)$",
+    "",
+    "^~(.*)$",
+    "",
+    "^[./]"
+  ]
+}

chrome-extension/with-messaging/README.md

@@ -0,0 +1,50 @@
+This is a [Plasmo extension](https://docs.plasmo.com/) project bootstrapped with [`plasmo init`](https://www.npmjs.com/package/plasmo).
+
+## Getting Started
+
+### Note for pub-sub example
+
+To test the externally connectable API (pub-sub):
+
+1. Configure a second-level domain via your host file. This example uses the config below:
+
+```
+localhost localhost.com
+```
+
+2. Add an `.env` file containing the extension ID (see `example.env`)
+
+3. Follow the development server step
+4. Navigate to `https://localhost.com:1947/client-hub-a` to test out the API.
+
+### Development server
+
+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!

chrome-extension/with-messaging/background/index.ts

@@ -0,0 +1,6 @@
+import "@plasmohq/messaging/background"
+
+import { startHub } from "@plasmohq/messaging/pub-sub"
+
+console.log(`BGSW - Starting Hub`)
+startHub()

chrome-extension/with-messaging/background/messages/get-manifest.ts

@@ -0,0 +1,9 @@
+import type { PlasmoMessaging } from "@plasmohq/messaging"
+
+const handler: PlasmoMessaging.MessageHandler = async (_, res) => {
+  const manifest = chrome.runtime.getManifest()
+
+  res.send(manifest)
+}
+
+export default handler

chrome-extension/with-messaging/background/messages/hash-tx.ts

@@ -0,0 +1,20 @@
+import type { PlasmoMessaging } from "@plasmohq/messaging"
+
+const HIDDEN_NUMBER = 541
+
+export type RequestBody = {
+  input: number
+}
+
+export type RequestResponse = number
+
+const handler: PlasmoMessaging.MessageHandler<
+  RequestBody,
+  RequestResponse
+> = async (req, res) => {
+  const { input } = req.body
+
+  res.send(input * HIDDEN_NUMBER)
+}
+
+export default handler

chrome-extension/with-messaging/background/messages/math/add.ts

@@ -0,0 +1,12 @@
+import type { PlasmoMessaging } from "@plasmohq/messaging"
+import { getPort } from "@plasmohq/messaging/background"
+
+const handler: PlasmoMessaging.MessageHandler = async (req, res) => {
+  const { a, b } = req.body
+
+  const port = getPort("mail")
+  port.postMessage("ADDING TWO NUMBERS EH?")
+  res.send(a + b + 1)
+}
+
+export default handler

chrome-extension/with-messaging/background/messages/open-extension.ts

@@ -0,0 +1,22 @@
+import type { PlasmoMessaging } from "@plasmohq/messaging"
+
+const handler: PlasmoMessaging.MessageHandler = async (req, res) => {
+  chrome.windows.create(
+    {
+      url: chrome.runtime.getURL("popup.html"),
+      type: "popup",
+      width: 400,
+      height: 600
+    },
+    (window) => {
+      console.log(`Popup window created with ID ${window.id}`)
+    }
+  )
+  const message = "Hello from the background script!"
+
+  res.send({
+    message
+  })
+}
+
+export default handler

chrome-extension/with-messaging/background/ports/mail.ts

@@ -0,0 +1,15 @@
+import type { PlasmoMessaging } from "@plasmohq/messaging"
+
+const SECRET = "LABARRE"
+
+const handler: PlasmoMessaging.PortHandler = async (req, res) => {
+  const { password } = req.body
+
+  if (password !== SECRET) {
+    res.send("(HINT: HOMETOWN)")
+  } else {
+    res.send("CAPTAIN")
+  }
+}
+
+export default handler

chrome-extension/with-messaging/contents/any-url-query-text.tsx

@@ -0,0 +1,25 @@
+import type { PlasmoCSConfig } from "plasmo"
+
+import { useMessage } from "@plasmohq/messaging/hook"
+
+export const config: PlasmoCSConfig = {
+  all_frames: true
+}
+
+const QueryTextAnywhere = () => {
+  const { data } = useMessage<string, string>(async (req, res) => {
+    res.send(document.querySelector(req.body).textContent)
+  })
+  return (
+    <div
+      style={{
+        padding: 8,
+        background: "#333",
+        color: "red"
+      }}>
+      Querying Selector for: {data}
+    </div>
+  )
+}
+
+export default QueryTextAnywhere

chrome-extension/with-messaging/contents/client-hub-main-world.ts

@@ -0,0 +1,26 @@
+import type { PlasmoCSConfig } from "plasmo"
+
+import { connectToHub } from "@plasmohq/messaging/pub-sub"
+
+export const config: PlasmoCSConfig = {
+  world: "MAIN"
+}
+
+window.clientHub = {
+  description:
+    "A webpage accessible clientHub which can conenct to BGSW hub and send messages",
+  connect: () => {
+    if (!process.env.PLASMO_PUBLIC_EXTENSION_ID) {
+      throw new Error(
+        "Please update PLASMO_PUBLIC_EXTENSION_ID in .env file with your Extension Id"
+      )
+    }
+    window.clientHub.port = connectToHub(process.env.PLASMO_PUBLIC_EXTENSION_ID)
+    window.clientHub.port.onMessage.addListener((m) => {
+      console.log("Message received from BGSW HUB:", m)
+    })
+  },
+  send: (message: string) => {
+    window.clientHub.port.postMessage({ message })
+  }
+}

chrome-extension/with-messaging/contents/handle-main-world.ts

@@ -0,0 +1,18 @@
+import type { PlasmoCSConfig } from "plasmo"
+
+import { sendToBackground } from "@plasmohq/messaging"
+import { relay } from "@plasmohq/messaging/relay"
+
+export const config: PlasmoCSConfig = {
+  matches: ["<all_urls>"]
+}
+
+relay(
+  {
+    name: "open-extension" as const
+  },
+  async (req) => {
+    const openResult = await sendToBackground(req)
+    return openResult
+  }
+)

chrome-extension/with-messaging/contents/index.ts

@@ -0,0 +1,29 @@
+import type { PlasmoCSConfig } from "plasmo"
+
+import { relayMessage, sendToBackground } from "@plasmohq/messaging"
+import { relay } from "@plasmohq/messaging/relay"
+
+export const config: PlasmoCSConfig = {
+  matches: ["http://localhost:1947/*"]
+}
+
+relayMessage({
+  name: "get-manifest"
+})
+
+relay(
+  {
+    name: "math/add" as const
+  },
+  async (req) => {
+    const { a, b } = req.body
+    const minusResult = a - b - 9
+
+    document.getElementById(
+      "subtract-result"
+    ).innerText = `${a} minus ${b} is ${minusResult}`
+
+    const addResult = await sendToBackground(req)
+    return addResult
+  }
+)

chrome-extension/with-messaging/contents/main-world.ts

@@ -0,0 +1,19 @@
+import type { PlasmoCSConfig } from "plasmo"
+
+import { sendToBackgroundViaRelay } from "@plasmohq/messaging"
+
+export const config: PlasmoCSConfig = {
+  matches: ["<all_urls>"],
+  run_at: "document_start",
+  world: "MAIN"
+}
+
+window.relay = {
+  description: "Message from content script in main world",
+  tryRelay: async () => {
+    let result = await sendToBackgroundViaRelay({
+      name: "open-extension"
+    })
+    return result
+  }
+}

chrome-extension/with-messaging/contents/porter.tsx

@@ -0,0 +1,36 @@
+import type { PlasmoCSConfig } from "plasmo"
+import { useState } from "react"
+
+import { usePort } from "@plasmohq/messaging/hook"
+
+export const config: PlasmoCSConfig = {
+  matches: ["http://localhost:1947/*"]
+}
+
+export default function Porter() {
+  const port = usePort("mail")
+  const [password, setPassword] = useState("")
+  return (
+    <div
+      style={{
+        position: "fixed",
+        padding: "8px",
+        right: 0
+      }}>
+      <input
+        type="password"
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+      />
+      <button
+        onClick={() => {
+          port.send({
+            password
+          })
+        }}>
+        Test Password
+      </button>
+      <p>HELLO {port.data}</p>
+    </div>
+  )
+}

chrome-extension/with-messaging/example.env

@@ -0,0 +1,2 @@
+# Set this to the Extension Id found in your browsers Extension Manager
+PLASMO_PUBLIC_EXTENSION_ID=

chrome-extension/with-messaging/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.