From 65b2b86b78ef0e4456d439b216e5ba066652b7cb Mon Sep 17 00:00:00 2001 From: Paul Date: Wed, 23 Aug 2023 18:01:54 +0800 Subject: [PATCH] Rewrite Fetch & Add Inline Component --- background/index.ts | 1 + background/messages/test.ts | 13 ++++++++++++ contents/inline.tsx | 27 ++++++++++++++++++++++++ contents/inline2.tsx | 41 +++++++++++++++++++++++++++++++++++++ contents/invokeFetch.ts | 22 ++++++++++++++++++++ package.json | 1 + pnpm-lock.yaml | 21 +++++++++++++++++++ popup.tsx | 18 ++++++++++++++-- 8 files changed, 142 insertions(+), 2 deletions(-) create mode 100644 background/index.ts create mode 100644 background/messages/test.ts create mode 100644 contents/inline.tsx create mode 100644 contents/inline2.tsx create mode 100644 contents/invokeFetch.ts diff --git a/background/index.ts b/background/index.ts new file mode 100644 index 0000000..cb0ff5c --- /dev/null +++ b/background/index.ts @@ -0,0 +1 @@ +export {}; diff --git a/background/messages/test.ts b/background/messages/test.ts new file mode 100644 index 0000000..83cb0d5 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/contents/inline.tsx b/contents/inline.tsx new file mode 100644 index 0000000..d98649f --- /dev/null +++ b/contents/inline.tsx @@ -0,0 +1,27 @@ +import type { PlasmoCSConfig, PlasmoGetInlineAnchor } from "plasmo" + +export const config: PlasmoCSConfig = { + matches: [""] +} + +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 ( +
+ CSUI INLINE +
+ ) +} + +export default PlasmoInline \ No newline at end of file diff --git a/contents/inline2.tsx b/contents/inline2.tsx new file mode 100644 index 0000000..d3892a3 --- /dev/null +++ b/contents/inline2.tsx @@ -0,0 +1,41 @@ +import type { PlasmoCSConfig, PlasmoGetInlineAnchor } from "plasmo" +import { sendToBackground } from "@plasmohq/messaging" + +export const config: PlasmoCSConfig = { + matches: [""] +} + +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 ( +
+ CSUI INLINE +
+ ) +} + +export default PlasmoInline \ No newline at end of file diff --git a/contents/invokeFetch.ts b/contents/invokeFetch.ts new file mode 100644 index 0000000..8b2e29f --- /dev/null +++ b/contents/invokeFetch.ts @@ -0,0 +1,22 @@ +import type { PlasmoCSConfig } from "plasmo" + +export const config: PlasmoCSConfig = { + matches: [""], + 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); diff --git a/package.json b/package.json index 0cca6ba..6e9c0a0 100644 --- a/package.json +++ b/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" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 692a400..a0964d4 100644 --- a/pnpm-lock.yaml +++ b/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 diff --git a/popup.tsx b/popup.tsx index 19ada45..6e698ef 100644 --- a/popup.tsx +++ b/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 (

- Welcome to your + Welcome to your test {" "} Plasmo