Merge pull request #9 from CreatorsDAO/main

update pages

README.md

@@ -13,23 +13,35 @@
 
 ## module1
 
+Plasmo 介绍
+熟悉浏览器扩展和Plasmo、搭建开发环境、及其简单的React入门。
+
 1. 环境搭建，浏览器扩展各个模块
 2. 前端 React 基础
 
 ## module2
 
+浏览器扩展页面
+熟悉浏览器扩展各个页面的开发、掌握独立交互扩展的构建能力。
+
 1. 开发工作流
 2. extension pages (tab page, popup page, option page, new tab page, devtool)
 3. tab pages
 4. sandbox pages
 
 ## module3
 
+内容脚本
+熟悉在页面当中嵌入脚本和UI组件。
+
 1. content scripts
 2. content scripts ui
 
 ## module4
 
+模块间通信
+掌握模块(background、content pages、popup page)间通信的技巧, 
+
 1. background sw
 2. message
 3. storage
@@ -40,14 +52,14 @@
 项目周，项目举例
 
 1. 内容加载交互，在浏览器内网完成数据的管理，比如TODO 项目。书签管理，比如 天气预报这些。
-2. 加密钱包项目 (sui，aptos,solana)等
-3. 网页增强工具 (增强github 加入和gpt 的交互)等
+2. 加密钱包项目 (sui，aptos,solana) 等
+3. 网页增强工具 (扩展 github 的功能，网页浏览加入gpt的交互)等
 
 参考资料：
 
-1. plasmo 官方文档 <https://docs.plasmo.com/>
-2. 使用 plasmo的参考示例<https://github.com/PlasmoHQ/examples/> 
-3. google Chrome 模块开发文档 <https://developer.chrome.com/docs/extensions/mv3/>
-4. 火狐浏览器扩展开发文档 <https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions>
-5. 像素风格 UI 类库 <https://github.com/nostalgic-css/NES.css>
-6. chrome 官方扩展实例 <https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/api-samples>
+1. [plasmo 官方文档](https://docs.plasmo.com/)
+2. [使用 plasmo的参考示例](https://github.com/PlasmoHQ/examples/) 
+3. [Google Chrome 模块开发文档](https://developer.chrome.com/docs/extensions/mv3/)
+4. [火狐浏览器扩展开发文档](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/)
+5. [像素风格 UI 类库](https://github.com/nostalgic-css/NES.css)
+6. [chrome 官方扩展实例](https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/api-samples)

docs/intro.mdx

@@ -17,7 +17,7 @@ sidebar_position: 1
 
 ## 学习之前需要准备什么？
 
-1. 熟悉至少一种编程语言
+1. 熟悉 JavaScript 或 TypeScript 编程语言
 2. 熟悉至少一种前端架构 : [React](https://react.dev/) 、[Vue](https://vuejs.org/guide/introduction.html) 、 [Svelte](https://svelte.dev/) 等
 3. 熟悉 [pnpm](https://pnpm.io/), [yarn](https://yarnpkg.com/cli),[npx](https://www.npmjs.com/package/npx) 等前端操作工具链
 

docs/module1/first-extension.mdx

@@ -17,9 +17,9 @@ sidebar_position: 4
 
 2. 安装一个顺手的代码编辑器
 
-你可以选择`Vs Code` 或者 `Web Storm`。因为开发浏览器扩展，和 web 前端开发很接近。所以，需要你按照自己的使用习惯，配置好 自动补全，代码提示这些。
+你可以选择`VsCode` 或者 `Web Storm`。因为开发浏览器扩展，和 web 前端开发很接近。所以，需要你按照自己的使用习惯，配置好 自动补全，代码提示这些。
 
-3. 保证你有一个方便快捷的包管理器： `npm`, `pnpm`, `yarn` 均可 , 极力推荐 `pnpm`
+3. 保证你有一个方便快捷的包管理器： `npm`, `pnpm`, `yarn`，`bun` 均可 , 极力推荐 `pnpm`
 
 4. 一个扩展运行环境，推荐 `chrome`
 

docs/module1/introduction.mdx

@@ -32,7 +32,7 @@ sidebar_position: 3
 
 开发阶段通过内置的 `React HMR`, 你可以 **_ 实时调试你的浏览器扩展_**, 就像开发普通的 web 应用程序一模一样。
 
-借助庞大的 存储和消息传递机制，以及对 env 的支持，Plasmo 帮你完成了浏览器之间的兼容性，做到 **_一次编写，多处运行_** .
+借助强大的内建 [存储](https://docs.plasmo.com/framework/storage) 和 [消息传递](https://docs.plasmo.com/framework/messaging) 库，以及对 [.env](https://docs.plasmo.com/framework/env) 的支持。Plasmo 帮你完成了浏览器之间的兼容性，做到 **_一次编写，多处运行_** .
 
 目前支持的浏览器如下: [https://docs.plasmo.com/framework/workflows/build#with-a-specific-target](https://docs.plasmo.com/framework/workflows/build#with-a-specific-target)
 

docs/module2/pages.mdx

@@ -40,6 +40,18 @@ sidebar_position: 4
 
 [参考示例 with-newtab](https://github.com/PlasmoHQ/examples/tree/main/with-newtab)
 
+### Side Panel Page
+
+侧面板允许扩展在侧面板中显示自己的UI，从而实现用户在不同标签页之间导航时可以保持打开状态，成为一个持久的用户界面元素。
+
+:::warning
+这个特性不能保证在基于 Chromium 的所有浏览器上完美工作，比如 Arc 无法使用，Brave 某些状况无法关闭。
+:::
+
+创建一个sidepanel.tsx文件或一个sidepanel/index.tsx文件，Plasmo将负责其余的工作，以在侧面板中呈现UI。
+
+[参考示例 with-sidepanel](https://github.com/PlasmoHQ/examples/tree/main/with-sidepanel)
+
 ### Dev Tools Page
 
 这个页面会在浏览器调试 Panel 中展示。

examples/galxe-demo/.gitignore

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

examples/galxe-demo/.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/(.*)$",
+    "",
+    "^~(.*)$",
+    "",
+    "^[./]"
+  ]
+}

examples/galxe-demo/README.md

@@ -0,0 +1,13 @@
+## Galxe demo getting started
+
+First:
+
+```bash
+pnpm install
+```
+
+then run the development server:
+
+```
+pnpm de
+```

examples/galxe-demo/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "galxe-demo",
+  "displayName": "Galxe demo",
+  "version": "0.0.1",
+  "description": "706 CreatorsDAO plasmo co learn",
+  "author": "birch",
+  "scripts": {
+    "dev": "plasmo dev",
+    "build": "plasmo build",
+    "package": "plasmo package"
+  },
+  "dependencies": {
+    "@plasmohq/messaging": "^0.6.2",
+    "@plasmohq/storage": "^1.11.0",
+    "plasmo": "0.88.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "@ianvs/prettier-plugin-sort-imports": "4.1.1",
+    "@types/chrome": "0.0.258",
+    "@types/node": "20.11.5",
+    "@types/react": "18.2.48",
+    "@types/react-dom": "18.2.18",
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.39",
+    "prettier": "3.2.4",
+    "tailwindcss": "^3.4.6",
+    "typescript": "5.3.3"
+  },
+  "manifest": {
+    "host_permissions": [
+      "https://*/*"
+    ],
+    "permissions": [
+      "scripting"
+    ]
+  },
+  "compilerOptions": {
+    "paths": {
+      "~*": [
+        "./src/*"
+      ]
+    },
+    "baseUrl": "."
+  }
+}

examples/galxe-demo/postcss.config.js

@@ -0,0 +1,9 @@
+/**
+ * @type {import('postcss').ProcessOptions}
+ */
+module.exports = {
+    plugins: {
+      tailwindcss: {},
+      autoprefixer: {}
+    }
+  }

examples/galxe-demo/src/background/index.ts

@@ -0,0 +1,5 @@
+import "@plasmohq/messaging/background"
+
+import { startHub } from "@plasmohq/messaging/pub-sub"
+
+startHub()

examples/galxe-demo/src/background/messages/galxe.ts

@@ -0,0 +1,85 @@
+import type { PlasmoMessaging } from "@plasmohq/messaging"
+
+export type RequestBody = {
+    action: string
+}
+
+
+const handler: PlasmoMessaging.MessageHandler = async (req) => {
+    // 查询当前的活动tab
+    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+        // 实例化活动tab
+        const activeTab = tabs[0];
+        // 检查URL是否匹配
+        if (activeTab && activeTab.url && activeTab.url.includes('https://app.galxe.com/quest/')) {
+            if (req.body.action && req.body.action === "start") {
+                // 执行脚本
+                chrome.scripting.executeScript({
+                    target: { tabId: activeTab.id },
+                    func: executeCode
+                });
+            }
+        }
+    });
+}
+
+export default handler
+
+function executeCode() {
+    console.log("开始执行...");
+
+    const elementsToClick = document.querySelectorAll(
+        'div[data-state="closed"] .cursor-pointer'
+    ),
+        refreshButtonClass =
+            'button[data-state="closed"] .ml-4.flex.gap-4.items-center',
+        waitForClass = 'svg[data-state="closed"] .ml-4.flex.gap-4.items-center',
+        successIconClass = '.text-size-14.font-bold',
+        claimButtonSelector = 'button.inline-flex.bg-primary:not([disabled])'
+
+    function clickElement(element) {
+        const event = new MouseEvent('click', {
+            view: window,
+            bubbles: true,
+            cancelable: true,
+        });
+        element.dispatchEvent(event);
+    }
+
+
+    function checkClaimButton() {
+        const claimButton = document.querySelector(claimButtonSelector);
+        if (claimButton && claimButton.textContent.trim() !== 'Explore Now') {
+            clickElement(claimButton);
+            return true;
+        }
+        return false;
+    }
+
+    function checkConditionsAndRetry() {
+        const waitForElements = document.querySelectorAll(waitForClass),
+            successIcons = document.querySelectorAll(successIconClass);
+        if (waitForElements.length > 0 || successIcons.length !== elementsToClick.length) {
+            setTimeout(processElements, 60000);
+        } else {
+            checkClaimButton();
+        }
+    }
+
+    function processElements() {
+        if (!checkClaimButton()) {
+            elementsToClick.forEach((element) => {
+                if (element.textContent.trim() !== 'Explore Now') {
+                    clickElement(element);
+                }
+            });
+            setTimeout(() => {
+                const refreshButtons = document.querySelectorAll(refreshButtonClass);
+                refreshButtons.forEach(clickElement);
+                setTimeout(checkConditionsAndRetry, 2000);
+            }, 2000);
+        }
+    }
+
+    processElements();
+}

examples/galxe-demo/src/popup.tsx

@@ -0,0 +1,39 @@
+import "./styles/tailwind.css"
+
+import { sendToBackground } from "@plasmohq/messaging"
+
+const handle = async () => {
+  await sendToBackground({
+    name: "galxe",
+    body: {
+      action: "start"
+    }
+  })
+}
+
+export default function IndexPopup() {
+  return (
+    <div
+      className="h-40 w-72 relative flex items-center justify-center"
+      style={{
+        backgroundImage:
+          "radial-gradient(circle at bottom center, hsl(0 0% 12.9%), hsl(0 0% 2%)"
+      }}>
+      <button
+        onClick={handle}
+        className="rounded-2xl border-2 border-dashed border-black bg-white px-3 py-1 font-semibold uppercase text-black transition-all duration-300 hover:translate-x-[-4px] hover:translate-y-[-4px] hover:rounded-md hover:shadow-[4px_4px_0px_black] active:translate-x-[0px] active:translate-y-[0px] active:rounded-2xl active:shadow-none">
+        start
+      </button>
+      <div className="absolute bottom-4 flex items-center text-white">
+        <span>Built by&nbsp;</span>
+        <a
+          href="https://twitter.com/shadcn"
+          target="_blank"
+          rel="noreferrer"
+          className="font-medium underline underline-offset-4">
+          CreatorsDAO
+        </a>
+      </div>
+    </div>
+  )
+}

examples/galxe-demo/src/styles/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

examples/galxe-demo/tailwind.config.js

@@ -0,0 +1,10 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  mode: "jit",
+  content: ["./**/*.tsx"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+