Rewrite Fetch & Add Inline Component

background/index.ts

@@ -0,0 +1 @@
+export {};

background/messages/test.ts

@@ -0,0 +1,13 @@
+import type { PlasmoMessaging } from "@plasmohq/messaging"
+ 
+const handler: PlasmoMessaging.MessageHandler = async (req, res) => {
+  const message = await fetch('https://paul.ren/api/note').then((res) => res.json());
+
+  console.log(message);
+ 
+  res.send({
+    message
+  })
+}
+ 
+export default handler

contents/inline.tsx

@@ -0,0 +1,27 @@
+import type { PlasmoCSConfig, PlasmoGetInlineAnchor } from "plasmo"
+
+export const config: PlasmoCSConfig = {
+  matches: ["<all_urls>"]
+}
+
+export const getInlineAnchor: PlasmoGetInlineAnchor = () =>
+  // document.querySelector(`[href="/#pricing"]`)
+  document.querySelector(`.text-secondly`);
+
+// Use this to optimize unmount lookups
+// export const getShadowHostId = () => "plasmo-inline-example-unique-id"
+
+const PlasmoInline = () => {
+  return (
+    <div
+      style={{
+        borderRadius: 4,
+        padding: 4,
+        background: "pink"
+      }}>
+      CSUI INLINE
+    </div>
+  )
+}
+
+export default PlasmoInline

contents/inline2.tsx

@@ -0,0 +1,41 @@
+import type { PlasmoCSConfig, PlasmoGetInlineAnchor } from "plasmo"
+import { sendToBackground } from "@plasmohq/messaging"
+
+export const config: PlasmoCSConfig = {
+  matches: ["<all_urls>"]
+}
+
+export const getInlineAnchor: PlasmoGetInlineAnchor = () =>
+  // document.querySelector(`[href="/#pricing"]`)
+  document.querySelector(`.pgc-space-follow-page`);
+
+// Use this to optimize unmount lookups
+// export const getShadowHostId = () => "plasmo-inline-example-unique-id"
+
+const PlasmoInline = () => {
+  const onClick = () => {
+    const resp = sendToBackground({
+      name: "test",
+      body: {
+        id: 123
+      }
+    }).then((res) => {
+      console.log(res);
+    })
+  }
+
+  return (
+    <div
+      style={{
+        borderRadius: 4,
+        padding: 4,
+        background: "pink"
+      }}
+      onClick={onClick}
+    >
+      CSUI INLINE
+    </div>
+  )
+}
+
+export default PlasmoInline

contents/invokeFetch.ts

@@ -0,0 +1,22 @@
+import type { PlasmoCSConfig } from "plasmo"
+ 
+export const config: PlasmoCSConfig = {
+  matches: ["<all_urls>"],
+  world: "MAIN"
+}
+
+// export {}
+console.log(
+  "You may find that having is not so pleasing a thing as wanting. This is not logical, but it is often true."
+)
+
+const defaultFetch = window.fetch;
+
+
+window.fetch = (...args) => {
+    console.log(args);
+
+    return defaultFetch(...args);
+}
+
+console.log(fetch);

package.json

@@ -10,6 +10,7 @@
     "test": "plasmo test"
   },
   "dependencies": {
+    "@plasmohq/messaging": "^0.5.0",
     "plasmo": "0.82.1",
     "react": "18.2.0",
     "react-dom": "18.2.0"

pnpm-lock.yaml

@@ -1,6 +1,9 @@
 lockfileVersion: '6.0'
 
 dependencies:
+  '@plasmohq/messaging':
+    specifier: ^0.5.0
+    version: 0.5.0(react@18.2.0)
   plasmo:
     specifier: 0.82.1
     version: 0.82.1(react-dom@18.2.0)(react@18.2.0)
@@ -1623,6 +1626,18 @@ packages:
     resolution: {integrity: sha512-P75g48dqOGneJ+n0AcqnLE/TYflcaPc3B7h6EopnCBBYUDnCNBMwYmKAkaf5pnhsEB0ybPS6TU1C2DTGfqaW7A==}
     dev: false
 
+  /@plasmohq/messaging@0.5.0(react@18.2.0):
+    resolution: {integrity: sha512-cYF750rguJDvnyJls2IHVAJTPVFtCEaMHMhnRsENfGaNqcRfXVfzwBGOABPg3k1iSBWBYLySh3Ht7QvFSnB3RQ==}
+    peerDependencies:
+      react: ^16.8.6 || ^17 || ^18
+    peerDependenciesMeta:
+      react:
+        optional: true
+    dependencies:
+      nanoid: 4.0.2
+      react: 18.2.0
+    dev: false
+
   /@plasmohq/parcel-bundler@0.5.5:
     resolution: {integrity: sha512-QCMmmfic514CfdXMJ7JMWUnqDzIHKVKyYeqPpUDsXON6JvA1yTmO5mEQSls8+5u/HpocP9QmTskQOHu3RCNX9A==}
     engines: {node: '>= 16.0.0', parcel: '>= 2.7.0'}
@@ -4173,6 +4188,12 @@ packages:
     hasBin: true
     dev: false
 
+  /nanoid@4.0.2:
+    resolution: {integrity: sha512-7ZtY5KTCNheRGfEFxnedV5zFiORN1+Y1N6zvPTnHQd8ENUvfaDBeuJDZb2bN/oXwXxu3qkTXDzy57W5vAmDTBw==}
+    engines: {node: ^14 || ^16 || >=18}
+    hasBin: true
+    dev: false
+
   /napi-build-utils@1.0.2:
     resolution: {integrity: sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==}
     dev: false

popup.tsx

@@ -1,8 +1,22 @@
-import { useState } from "react"
+import { useEffect, useState } from "react"
+import { sendToBackground } from "@plasmohq/messaging"
 
 function IndexPopup() {
   const [data, setData] = useState("")
 
+  useEffect(() => {
+    const resp = sendToBackground({
+      name: "test",
+      body: {
+        id: 123
+      }
+    }).then((res) => {
+      console.log(res);
+    })
+     
+    console.log(resp)
+  }, []);
+
   return (
     <div
       style={{
@@ -11,7 +25,7 @@ function IndexPopup() {
         padding: 16
       }}>
       <h2>
-        Welcome to your
+        Welcome to your test
         <a href="https://www.plasmo.com" target="_blank">
           {" "}
           Plasmo