├── .github ├── FUNDING.yml └── workflows │ └── main.yml ├── .gitignore ├── .vscode └── settings.json ├── README.en.md ├── README.md ├── README.zh.md ├── cc-plugin.config.ts ├── cc-plugin.json ├── crx ├── crx-key.pem └── crx.js ├── doc ├── Marquee.png ├── chrome-message.png ├── icon128.png ├── prop │ └── v2.png ├── scene1.png ├── scene2.png ├── scene3.png ├── scene4.png ├── scene5.png ├── small.png └── v2.png ├── hello-chrome ├── .vscode │ └── settings.json ├── background.js ├── content.js ├── devtools.html ├── devtools.js ├── icons │ └── 48.png ├── index.html ├── index.js ├── inject.js ├── manifest.json ├── options.html ├── options.js ├── popup.html ├── popup.js └── readme.md ├── icons └── 48.png ├── others.md ├── package.json ├── src ├── core │ ├── types.ts │ └── util.ts ├── ga │ ├── index.ts │ └── type.ts ├── i18n │ ├── en.ts │ └── zh.ts ├── main.ts ├── panel │ ├── index.ts │ ├── index.vue │ └── res │ │ ├── chrome.png │ │ └── edge.png ├── scripts │ ├── background │ │ ├── content.ts │ │ ├── devtools.ts │ │ ├── index.ts │ │ ├── notify.ts │ │ ├── tabInfo.ts │ │ └── tabMgr.ts │ ├── const.ts │ ├── content │ │ └── index.ts │ ├── inject-view │ │ ├── ad.vue │ │ ├── app.vue │ │ ├── banner.vue │ │ ├── const.ts │ │ ├── github.ts │ │ ├── loader.ts │ │ ├── memory-draw.ts │ │ ├── memory.vue │ │ ├── res │ │ │ ├── close.svg │ │ │ ├── left.svg │ │ │ └── right.svg │ │ ├── shortkeys.vue │ │ ├── store.ts │ │ ├── util.ts │ │ └── web-test.ts │ ├── inject │ │ ├── break.ts │ │ ├── code-hint.ts │ │ ├── connect-me.ts │ │ ├── enumConfig.ts │ │ ├── event.ts │ │ ├── everything.ts │ │ ├── hint │ │ │ ├── adapter.ts │ │ │ ├── hint-v2.ts │ │ │ ├── hint-v3.ts │ │ │ └── index.ts │ │ ├── index.ts │ │ ├── inject-view.ts │ │ ├── inspect-list.ts │ │ ├── inspector.ts │ │ ├── setValue.ts │ │ ├── types.ts │ │ └── util.ts │ └── terminal.ts └── views │ ├── devtools │ ├── bridge.ts │ ├── bus.ts │ ├── comp │ │ └── index.ts │ ├── const.ts │ ├── contextMenu.ts │ ├── data.ts │ ├── everything.vue │ ├── find.vue │ ├── game-info.vue │ ├── hierarchy.vue │ ├── index.ts │ ├── index.vue │ ├── inspector.vue │ ├── refresh.vue │ ├── register-panel.ts │ ├── store.ts │ ├── timer.ts │ ├── ui │ │ ├── property-engine.vue │ │ ├── property-group.vue │ │ ├── property-image.vue │ │ ├── propertys.vue │ │ ├── settings.vue │ │ └── ui-prop.vue │ └── util.ts │ ├── global.less │ ├── options │ ├── index.ts │ ├── index.vue │ └── res │ │ └── money.png │ └── popup │ ├── index.ts │ ├── index.vue │ ├── res │ ├── 30.jpg │ ├── friend.png │ ├── github.png │ ├── qq.png │ ├── star.png │ └── tiezi.png │ ├── tool-item.vue │ ├── tool.vue │ └── type.ts ├── tsconfig.json └── yarn.lock /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry 12 | polar: # Replace with a single Polar username 13 | buy_me_a_coffee: # Replace with a single Buy Me a Coffee username 14 | thanks_dev: # Replace with a single thanks.dev username 15 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 16 | -------------------------------------------------------------------------------- /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | # This is a basic workflow to help you get started with Actions 2 | 3 | name: Deploy static content to Pages 4 | 5 | # Controls when the action will run. 6 | on: 7 | push: 8 | branches: [ main ] 9 | 10 | # Allows you to run this workflow manually from the Actions tab 11 | workflow_dispatch: 12 | 13 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages 14 | permissions: 15 | contents: read 16 | pages: write 17 | id-token: write 18 | 19 | # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. 20 | # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. 21 | concurrency: 22 | group: "pages" 23 | cancel-in-progress: false 24 | 25 | # A workflow run is made up of one or more jobs that can run sequentially or in parallel 26 | jobs: 27 | # Single deploy job since we're just deploying 28 | deploy: 29 | environment: 30 | name: github-pages 31 | url: ${{ steps.deployment.outputs.page_url }} 32 | runs-on: ubuntu-22.04 33 | 34 | # Steps represent a sequence of tasks that will be executed as part of the job 35 | steps: 36 | - name: Checkout 37 | uses: actions/checkout@v3 38 | - name: install 39 | run: npm run installForce 40 | - name: pack web 41 | run: npm run ccp-pack-web 42 | - name: DeployWithDeleteLatestResult 43 | uses: peaceiris/actions-gh-pages@v3 44 | with: 45 | personal_token: ${{ secrets.PERSONAL_TOKEN }} 46 | publish_dir: ./web 47 | external_repository: tidys/cc-inspector-chrome 48 | publish_branch: gh-pages 49 | keep_files: true 50 | exclude_assets: '*.js,*.css' 51 | - name: DeployJsCss 52 | uses: peaceiris/actions-gh-pages@v3 53 | with: 54 | personal_token: ${{ secrets.PERSONAL_TOKEN }} 55 | publish_dir: ./web 56 | external_repository: tidys/cc-inspector-chrome 57 | publish_branch: gh-pages 58 | keep_files: true 59 | exclude_assets: '' 60 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | test/ 3 | node_modules/ 4 | web/ 5 | .yalc/ 6 | yalc.lock 7 | chrome/ 8 | dist/ 9 | yarn-error.log 10 | chrome.zip 11 | chrome.crx -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.formatOnSave": true, 3 | "editor.formatOnSaveMode": "modifications", 4 | "files.autoSave": "onFocusChange", 5 | "editor.codeActionsOnSave": { 6 | "source.organizeImports": "explicit" 7 | }, 8 | "[typescript]": { 9 | "editor.tabSize": 2, 10 | "editor.formatOnSave": true, 11 | "editor.defaultFormatter": "esbenp.prettier-vscode", 12 | "prettier.printWidth": 1000 13 | }, 14 | "[json]": { 15 | "editor.quickSuggestions": { 16 | "strings": true 17 | }, 18 | "editor.suggest.insertMode": "replace", 19 | "editor.tabSize": 2 20 | }, 21 | "[vue]": { 22 | "editor.defaultFormatter": "esbenp.prettier-vscode", 23 | "editor.tabSize": 2, 24 | "prettier.printWidth": 1000 25 | }, 26 | "files.refactoring.autoSave": false, 27 | "search.exclude": { 28 | "**/node_modules": true, 29 | "**/bower_components": true, 30 | "**/*.code-search": true, 31 | "chrome": true, 32 | "yarn-error.log": true, 33 | "yarn.lock": true, 34 | ".yalc/": true 35 | }, 36 | "files.exclude": { 37 | ".yalc/": false, 38 | "**/.git": true, 39 | "**/.svn": true, 40 | "**/.hg": true, 41 | "**/CVS": true, 42 | "**/.DS_Store": true, 43 | "**/Thumbs.db": true 44 | }, 45 | "prettier.printWidth": 1000 46 | } 47 | -------------------------------------------------------------------------------- /README.en.md: -------------------------------------------------------------------------------- 1 | This is a free extension that works out of the box without any additional installation. It can help you debug games made by CocosCreator, display the node tree of the game, and the component properties of the node tree, which is very helpful when troubleshooting game problems. 2 | 3 | On the left side of the debug panel is the hierarchy manager, which is used to display the node tree of the game, and on the right side is the property inspector, which is used to display the detailed properties of the node. The width of the two panels can be flexibly adjusted. 4 | 5 | ## Features: 6 | - The extension automatically retrieves and refreshes the node tree and its status 7 | - The game made is nested in iframe, and debugging is also supported, and the debugging target can be switched freely. 8 | - It also supports debugging Cocos games made by Creator2.x and Creator3.x. 9 | - In the hierarchy manager, you can use the up, down, left, and right arrow keys to quickly fold, expand, and select the node tree. 10 | - In the hierarchy manager, you can use the space shortcut key to control the display and hiding of nodes. 11 | - In the hierarchy manager, you can right-click and select `destroy` to destroy a node. 12 | - In the property inspector, if the attribute references a node, the reference can be highlighted in the node tree. 13 | - The property inspector supports simplified and full display of properties, which is convenient for observing properties in different situations. 14 | - The properties support adjusting the value by dragging the mouse, which is very convenient when adjusting the coordinates. 15 | - Supports printing components in the console, which is convenient for observing the whole picture. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # cc-inspector-chrome 2 | 3 | 在浏览器中查看CocosCreator游戏的节点树、节点属性。 4 | 5 | ![](./doc/scene4.png) 6 | 7 | - [youtube](https://www.youtube.com/watch?v=ajMz3zEFTA8) 8 | - [chrome](https://chromewebstore.google.com/detail/cc-inspector/hejbkamkfnkifppoaljcidepkhgaahcj?hl=zh-CN&utm_source=ext_sidebar) 9 | - [bilibili](https://www.bilibili.com/video/BV1jzcHeSEh3/) 10 | - [cocos store](https://store.cocos.com/app/detail/2002) 11 | - [github](https://github.com/tidys/cc-inspector-chrome) 12 | 13 | 14 | ### 论坛 15 | - http://forum.cocos.com/t/chrome-creator/55669 16 | - https://forum.cocos.org/t/topic/164888 17 | 18 | 19 | ## 开发中使用到的技术 20 | - [cc-plugin](https://www.npmjs.com/package/cc-plugin) 21 | - [cc-ui](https://www.npmjs.com/package/@xuyanfeng/cc-ui) 22 | - chrome 插件开发 23 | - vue3、webpack 24 | - cocos creator 25 | 26 | ## Cocos Creator Test Cases 27 | - [cocos test cases](https://tidys.github.io/creator-test-cases/) 28 | 29 | ## TODO 30 | - 目前开发过程中无法实现HMR，参考[extensions-reloader](https://chrome.google.com/webstore/detail/extensions-reloader/fimgfedafeadlieiabdeeaodndnlbhid?utm_source=chrome-ntp-icon) 31 | -------------------------------------------------------------------------------- /README.zh.md: -------------------------------------------------------------------------------- 1 | 这是一个免费的扩展，开箱即用，无须任何额外的安装，可以帮助你调试🦆CocosCreator🐤制作的游戏，显示游戏运行的节点树，以及节点树的组件属性，在排查游戏问题时，非常有帮助。 2 | 3 | 调试面板左侧为层级管理器，用于展示游戏的节点树，右侧为属性检查器，用于展示节点的详细属性，可以灵活调整2个面板的宽度。 4 | 5 | ## 为什么选择该插件？ 6 | 7 | 1️⃣😍免费开源 8 | 2️⃣💯支持所有CocosCreator版本 9 | 3️⃣🤟功能丰富强大，满足开发游戏的常用Inspect需求 10 | 4️⃣💻与Chrome浏览器深度融合，开箱即用 11 | 5️⃣💁‍♂️作者本人也在使用，迭代更新频繁 12 | 13 | ## 🍉特点： 14 | 1️⃣同时支持调试Creator2.x和Creator3.x制作的Cocos游戏。 15 | 2️⃣层级管理器、属性检查器支持自动/手动刷新。 16 | 3️⃣制作的游戏在iframe嵌套，同样也支持调试，并且支持自由切换调试目标。 17 | 18 | 🍎层级管理器：展示游戏的节点树 19 | 1️⃣滑过、选中节点时，游戏内高亮显示节点位置，便于观察节点位置。 20 | 2️⃣支持使用上下左右方向键快速折叠、展开、选中节点树。 21 | 3️⃣支持使用空格快捷键，控制节点的显示隐藏。 22 | 4️⃣右键选择`destroy`销毁某个节点。 23 | 5️⃣🔍支持模糊搜索节点，按照路径搜索节点，查找更方便。 24 | 6️⃣显示Sprite、Label、Button等类型节点，预制节点绿色标记，观察节点结构非常方便。 25 | 26 | 🍏属性检查器：展示节点的详细属性 27 | 1️⃣如果属性引用了节点，支持在节点树中高亮显示引用。 28 | 2️⃣支持属性精简显示和全部显示，方便在不同情况下观察属性。 29 | 3️⃣支持鼠标拖拉调整数值，在调整坐标时，非常方便。 30 | 4️⃣支持在控制台打印组件，方便观察全貌。 31 | 32 | 🗡️调试小助手：在游戏的网页中显示增强功能的入口 33 | 1️⃣支持fps显隐，游戏暂停步进等控制。 34 | 2️⃣支持拖拽调整位置、自动隐藏，不干扰用户。 35 | 3️⃣支持在游戏界面拾取节点，节点信息会同步选中到层级管理器和属性检查器。 36 | 4️⃣支持按照类型拾取节点，支持展示鼠标位置的所有节点。 37 | 5️⃣支持快捷键一键拾取节点，使用起来极度丝滑。 38 | 39 | 🚀更多完整功能动态图演示，请查看： https://juejin.cn/post/7463836172559024179 40 | 41 | 🧙‍♂️Cocos论坛： https://forum.cocos.org/t/topic/164888 42 | 🏠插件官网： https://tidys.github.io/cc-inspector-chrome/inspector.html 43 | 🌈github开源地址： https://github.com/tidys/cc-inspector-chrome 44 | 📺BiliBili视频介绍： https://www.bilibili.com/video/BV1jzcHeSEh3/ 45 | 📺YouTube视频介绍： https://www.youtube.com/watch?v=ajMz3zEFTA8 46 | 47 | ❤️如果你喜欢该插件，请分享给你的朋友。 48 | 49 | 🎁如果可以，在CocosStore支持我一下： https://store.cocos.com/app/detail/2002 -------------------------------------------------------------------------------- /cc-plugin.config.ts: -------------------------------------------------------------------------------- 1 | // @ts-ignore 2 | import { CocosPluginManifest, CocosPluginOptions, Panel } from "cc-plugin/src/declare"; 3 | 4 | const pkgName = "cc-inspector"; 5 | 6 | function i18n(key: string) { 7 | return `i18n:${pkgName}.${key}`; 8 | } 9 | 10 | const manifest: CocosPluginManifest = { 11 | name: pkgName, 12 | version: "2.2.0", 13 | description: "Debug games made with CocosCreator and display node trees and node properties", 14 | store: "https://store.cocos.com/app/detail/2002", 15 | author: "xu_yanfeng", 16 | main: "./src/main.ts", 17 | panels: [ 18 | { 19 | name: "inspector", 20 | type: Panel.Type.DockAble, 21 | main: "./src/panel/index.ts", 22 | title: "Cocos Inspector", 23 | width: 500, 24 | height: 400, 25 | minWidth: 50, 26 | minHeight: 400, 27 | }, 28 | ], 29 | menus: [ 30 | { 31 | path: `cc-inspector/${i18n("title")}`, 32 | message: { 33 | name: "showPanel", 34 | }, 35 | }, 36 | ], 37 | i18n_en: "./src/i18n/en.ts", 38 | i18n_zh: "./src/i18n/zh.ts", 39 | icon: { 40 | "48": "./icons/48.png", 41 | }, 42 | analysis: { 43 | // googleAnalytics: "G-0S2X4Z1FE7", 44 | }, 45 | chrome: { 46 | permissions: ["storage", "notifications"], 47 | url: "https://chromewebstore.google.com/detail/cc-inspector/hejbkamkfnkifppoaljcidepkhgaahcj?authuser=0&hl=en", 48 | version: 3, 49 | pem: "./crx-key.pem", 50 | view_devtools: "src/views/devtools/index.ts", 51 | view_options: "src/views/options/index.ts", 52 | view_popup: "src/views/popup/index.ts", 53 | script_background: "src/scripts/background/index.ts", 54 | script_content: "src/scripts/content/index.ts", 55 | script_inject: "src/scripts/inject/index.ts", 56 | script_inject_view: "src/scripts/inject-view/web-test.ts", 57 | }, 58 | }; 59 | const options: CocosPluginOptions = { 60 | obscure: false, 61 | server: { 62 | enabled: false, 63 | port: 2022, 64 | https: true, 65 | writeToDisk: true, 66 | }, 67 | watchBuild: true, 68 | outputProject: { 69 | web: "./web", 70 | chrome: "./chrome", 71 | }, 72 | }; 73 | export default { manifest, options }; 74 | -------------------------------------------------------------------------------- /cc-plugin.json: -------------------------------------------------------------------------------- 1 | { 2 | "v2": "", 3 | "v3": "" 4 | } -------------------------------------------------------------------------------- /crx/crx-key.pem: -------------------------------------------------------------------------------- 1 | -----BEGIN PRIVATE KEY----- 2 | MIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQDKA+h2e8dPlzt3 3 | RRXtRZuY3s/dhaxIz7TbiUQymqwi8vhUx3p9LzBbQSK3qOjJGifsrkf2C6TpmvWZ 4 | lpTbDdl4hz5Z5Ljrt2GtehEGlb/IxbiuEuAKfznrljMKwDHdp809hmc6XtwZdvW0 5 | B/0yfRtUKZ+9HH6rvQBtcDaZ4fAkX2BIcqw/j5CIzW+IyziswnFoMQkC68Cu2vS1 6 | mNSU8foYlxQAsmttbzr/PGZkrOL92oeVoJJfPfR7eBP8JhSbVJ6GGdhw72SQTByY 7 | 5e9Pl94veUdhwryH/xtsb27YrNO8EPbwMyJvu+LYp2Im5IOC3HvChB/XpfnnqfgZ 8 | F0aCvOIVAgMBAAECggEAIwlre4U7S8AQhb6bL3RHqMtYJPUGrPgtR3g2tkoiOcuH 9 | K3kPcv/ItMMGyPDIMvzQ2NlfTLq3RvbjytgViCqOQbu/IisrsWI0VDicFFbLlQBJ 10 | 6BMI/XkUbBo4TxCHdYihbZ7Ob469QMNjmO5byTJul3nCpTN4esPEe7afGbBYjI4Z 11 | SffhXI/eF5CaBEqsEOAwDunzFh3E7bE6E/JkGOU29xLQy/eryhmD1O3Cnf2i3q29 12 | TooHe0hgh9lkVGt3sZJLp/sH2EYda5W95/Ji1yWaJ9p4M016UPLDGFn4hJvmdGfY 13 | VVfQ47sCvvJ26zHt/+kZzreXt6YpAlKGmb6ibjVT0QKBgQDmvZtLgwmgvqvJNgx/ 14 | /b+NDq0mIWX60ASVT3wYiqidtu7xmUU6hUWFumtJB8MWELRUJ7kkzd3PfbEVzX9O 15 | wIo4ifYWrhxxMh8kmoGmpKWZ/MUtH7RN0NXkmcPAKaBftzjooI0VB97KArSuBGeX 16 | 2Tphd+VHMPiKMaI3STa2xKo5eQKBgQDgIUlg4lVATvPWY2Vg6b5qEtzLCiIwgNZD 17 | 5Swx8wlYJApm94OJ5dMzjYFt/5vdeSJfV3ESnZ6gKSsW3vX1dGeFLvIiA7v5OBv5 18 | 0FO2VAXR+iLJje4ZWKTwhzgoM4EYSjS62bUGQ90tJt20YP2nXgYEoQ1agmWTSRPn 19 | 3BFXRXLifQKBgQDMnO8Nc1IiXXLwpyFGjrpCV/VrjspkM/scfLPK/4qu8P3K+OPP 20 | FUelYr6osF1rP7zps6AW5wf/a7KRZv2x1EO+B3lWe2d1acD8MJcwM2k2uFQRw7+c 21 | EcjbQw+3ZDJ3Ln8kqtrw/12tPeEDP5ytp1CCBlQnYWHFCmaTKDWAtb1N4QKBgFfo 22 | lmhavcdYcElReQz3AUmHlnRIyDov/lppA9mfkrWwhSf3wu8OZrVctjxXumG2xmWQ 23 | 3XfIvNPi8dSppN0eSBAz5qKyxkKs4EQukvb7o8DFFGnrskzcuOzijIMwGF1XlbEH 24 | /Pm1GoZALUs3k6XWuhOMu7kZVg/b5OPXLDIHulTdAoGBAIhFZhcl1/W7ANlFvYy/ 25 | 6OuxjHYCqFgOa4qYz9ia2X9UnK+SOqTLplZtbbYag4OIxvGZAQ3+Ys6Tm0Y4IySk 26 | qB8d1aSzJelu8feqJtWf9QZFbHvdN+orRQkhPwydC0m/ujefy/+v/edCXv9kWCdj 27 | mw7DaZnzhqap9CnBXnYXFP+5 28 | -----END PRIVATE KEY----- 29 | -------------------------------------------------------------------------------- /crx/crx.js: -------------------------------------------------------------------------------- 1 | let gulp = require('gulp'); 2 | let path = require('path'); 3 | let fse = require('fs-extra'); 4 | let fs = require('fs'); 5 | let shell = require('gulp-shell'); 6 | 7 | gulp.task("packageCrx", function () { 8 | let pem = path.join(__dirname, "bin/dist.pem"); 9 | if (!fs.existsSync(pem)) { 10 | console.log("签名文件不存在:" + pem); 11 | return; 12 | } 13 | let dist = path.join(__dirname, "dist"); 14 | if (!fs.existsSync(dist)) { 15 | console.log("打包目录不存在: " + dist); 16 | console.log("发布失败!"); 17 | return; 18 | } 19 | 20 | let exec = require('child_process').exec; 21 | let packageCmd = "chrome.exe --pack-extension=" + dist + " --pack-extension-key=" + pem; 22 | console.log("------------------------------------------------"); 23 | console.log("执行打包命令:\n " + packageCmd); 24 | console.log("------------------------------------------------"); 25 | let ret = exec(packageCmd); 26 | ret.stdout.on('data', function () { 27 | console.log("data"); 28 | }); 29 | ret.stdout.on('close', function (err, a, b, c) { 30 | 31 | let file = path.join(__dirname, "dist.crx"); 32 | if (fs.existsSync(file)) { 33 | let desFile = path.join(__dirname, "bin/cc-inspector.crx"); 34 | if (fs.existsSync(desFile)) { 35 | fse.removeSync(desFile); 36 | } 37 | fse.move(file, desFile, function (err) { 38 | if (!err) { 39 | console.log("发布插件安装包文件成功!"); 40 | console.log("存放路径: " + desFile); 41 | } else { 42 | console.log(err); 43 | } 44 | }) 45 | } else { 46 | console.log("文件不存在: " + file); 47 | console.log("发布失败!"); 48 | } 49 | }); 50 | 51 | }); 52 | gulp.task("default", function () { 53 | console.log("hello gulp!"); 54 | }); 55 | -------------------------------------------------------------------------------- /doc/Marquee.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tidys/cc-inspector-chrome/a0329f741412c121ffc949daafbd5d86bf2f38cf/doc/Marquee.png -------------------------------------------------------------------------------- /doc/chrome-message.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tidys/cc-inspector-chrome/a0329f741412c121ffc949daafbd5d86bf2f38cf/doc/chrome-message.png -------------------------------------------------------------------------------- /doc/icon128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tidys/cc-inspector-chrome/a0329f741412c121ffc949daafbd5d86bf2f38cf/doc/icon128.png -------------------------------------------------------------------------------- /doc/prop/v2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tidys/cc-inspector-chrome/a0329f741412c121ffc949daafbd5d86bf2f38cf/doc/prop/v2.png -------------------------------------------------------------------------------- /doc/scene1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tidys/cc-inspector-chrome/a0329f741412c121ffc949daafbd5d86bf2f38cf/doc/scene1.png -------------------------------------------------------------------------------- /doc/scene2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tidys/cc-inspector-chrome/a0329f741412c121ffc949daafbd5d86bf2f38cf/doc/scene2.png -------------------------------------------------------------------------------- /doc/scene3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tidys/cc-inspector-chrome/a0329f741412c121ffc949daafbd5d86bf2f38cf/doc/scene3.png -------------------------------------------------------------------------------- /doc/scene4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tidys/cc-inspector-chrome/a0329f741412c121ffc949daafbd5d86bf2f38cf/doc/scene4.png -------------------------------------------------------------------------------- /doc/scene5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tidys/cc-inspector-chrome/a0329f741412c121ffc949daafbd5d86bf2f38cf/doc/scene5.png -------------------------------------------------------------------------------- /doc/small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tidys/cc-inspector-chrome/a0329f741412c121ffc949daafbd5d86bf2f38cf/doc/small.png -------------------------------------------------------------------------------- /doc/v2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tidys/cc-inspector-chrome/a0329f741412c121ffc949daafbd5d86bf2f38cf/doc/v2.png -------------------------------------------------------------------------------- /hello-chrome/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "files.autoSave": "onFocusChange", 3 | "[html]": { 4 | "editor.suggest.insertMode": "replace", 5 | "editor.formatOnSave": true, 6 | "editor.formatOnType": true, 7 | "editor.defaultFormatter": "esbenp.prettier-vscode" 8 | } 9 | } -------------------------------------------------------------------------------- /hello-chrome/background.js: -------------------------------------------------------------------------------- 1 | console.log("background.js") 2 | chrome.runtime.onConnect.addListener((port) => { 3 | console.log("runtime onConnect: ", port) 4 | port.onMessage.addListener((message) => { 5 | console.log("runtime port onMessage: ", message) 6 | port.postMessage(message + "*bg") 7 | }) 8 | port.onDisconnect.addListener(() => { 9 | console.log("runtime port onDisconnect") 10 | }) 11 | }) 12 | chrome.runtime.onMessage.addListener((message) => { 13 | console.log("runtime onMessage: ", message) 14 | }) 15 | 16 | chrome.debugger.onEvent.addListener((source, method, params) => { 17 | // console.log("debugger onEvent: ", source, method, params) 18 | }) 19 | chrome.action.onClicked.addListener((tab) => { 20 | debugger 21 | // 使用devtools协议链接到页面 22 | chrome.debugger.attach({ tabId: tab.id }, "1.0", () => { 23 | chrome.debugger.sendCommand({ tabId: tab.id }, "Debugger.enable", {}, () => { }); 24 | return; 25 | debugger; 26 | // 启动调试器 27 | chrome.debugger.sendCommand({ tabId: tab.id }, "Debugger.enable", {}, () => { 28 | debugger; 29 | // chrome.debugger.sendCommand({ tabId: tab.id }, "Debugger.getScriptSource", (scripts) => { 30 | // console.log(scripts); 31 | // debugger 32 | // }) 33 | chrome.debugger.sendCommand( 34 | { tabId: tab.id, }, 35 | "Runtime.evaluate", 36 | { expression: "window.abc=()=>{console.log(1)}" }, 37 | (result) => { 38 | debugger 39 | if (result && result.result && result.result.objectId) { 40 | console.log(result.result); 41 | 42 | chrome.debugger.sendCommand( 43 | { 44 | tabId: tab.id, 45 | method: "Debugger.searchInContentScripts", 46 | params: { 47 | query: "abc", 48 | } 49 | }, (result) => { 50 | debugger 51 | }) 52 | return; 53 | // 获取func 54 | chrome.debugger.sendCommand( 55 | { 56 | tabId: tab.id, 57 | method: "Debugger.searchInContentScripts", 58 | params: { 59 | query: "window.abc", 60 | } 61 | }, 62 | "Debugger.searchInContentScripts", 63 | { functionId: result.result.objectId }, 64 | (location) => { 65 | debugger 66 | console.log(location); 67 | if (location) { 68 | // 调整到函数 69 | chrome.debugger.sendCommand( 70 | { tabId: tab.id, }, 71 | "Debugger.setBreakpoint", 72 | { 73 | location: location.locations[0], 74 | }, 75 | (brk) => { 76 | debugger 77 | console.log(brk); 78 | } 79 | ) 80 | 81 | } 82 | 83 | } 84 | ) 85 | } 86 | } 87 | ); 88 | 89 | 90 | }); 91 | 92 | 93 | }); 94 | }) 95 | // chrome.tabs.onConnect.addListener((port) => { 96 | // console.log("tabs onConnect: ", port) 97 | // port.onMessage.addListener((message) => { 98 | // console.log("port onMessage: ", message) 99 | // }) 100 | // port.onDisconnect.addListener(() => { 101 | // console.log("port onDisconnect") 102 | // }) 103 | // }) 104 | // chrome.tabs.onMessage.addListener((message) => { 105 | // console.log("tabs onMessage: ", message) 106 | // }) -------------------------------------------------------------------------------- /hello-chrome/content.js: -------------------------------------------------------------------------------- 1 | console.log("content.js") -------------------------------------------------------------------------------- /hello-chrome/devtools.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | devtools 5 | 6 | 7 | 8 | devtools 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /hello-chrome/devtools.js: -------------------------------------------------------------------------------- 1 | console.log("devtools.js"); 2 | 3 | // const tabsConnect = chrome.tabs.connect({ name: "devtoos" }); 4 | // tabsConnect.onMessage.addListener((message) => { 5 | // console.log("tabsConnect Message: ", message) 6 | // }) 7 | // tabsConnect.onDisconnect.addListener(() => { 8 | // console.log("tabsConnect disconnect") 9 | // }) 10 | const runtimeConnect = chrome.runtime.connect({ name: "devtools" }) 11 | runtimeConnect.onDisconnect.addListener(() => { 12 | console.log(`runtimeConnect disconnect`,) 13 | }); 14 | runtimeConnect.onMessage.addListener((message) => { 15 | console.log('runtimeConnect Message: ', message) 16 | text.innerText = message; 17 | }); 18 | // view 19 | const text = document.getElementById('text') 20 | const send2bg = document.getElementById('send2bg') 21 | if (send2bg) { 22 | send2bg.addEventListener('click', () => { 23 | console.log(document.flag); 24 | const message = ("devtools send to background") 25 | runtimeConnect.postMessage(message) 26 | // tabsConnect.sendMessage(message); 27 | // chrome.runtime.sendMessage(message); 28 | }) 29 | } 30 | 31 | console.log('href: ', window.location.href); 32 | console.log(chrome.devtools); 33 | console.log(chrome.devtools.inspectedWindow.tabId); 34 | chrome.devtools.panels.setOpenResourceHandler((res) => { 35 | debugger; 36 | console.log(res); 37 | }) 38 | chrome.devtools.panels.create("Hello World", "icon.png", "devtools.html", (panel) => { 39 | console.log("panel created"); 40 | panel.onShown.addListener((win, b) => { 41 | console.log("panel shown", win, b); 42 | console.log(win.document.body) 43 | console.log(` doc: `, win.document === document); 44 | console.log(win.document); 45 | console.log(window.document); 46 | win.document.flag = "devtools_panel"; 47 | win.document.body.addEventListener('contextmenu', (e) => { 48 | console.log(e); 49 | }) 50 | document.body.addEventListener('keydown', (e) => { 51 | console.log(e); 52 | }) 53 | }); 54 | // panel.createStatusBarButton({}) 55 | // panel.show(); 56 | 57 | panel.onHidden.addListener((a, b) => { 58 | console.log("panel hidden", a, b); 59 | // setTimeout(() => { 60 | // debugger; 61 | 62 | // panel.show(); 63 | // }, 3 * 1000); 64 | }); 65 | panel.onSearch.addListener((query) => { 66 | console.log("panel search", query); 67 | }); 68 | }); -------------------------------------------------------------------------------- /hello-chrome/icons/48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tidys/cc-inspector-chrome/a0329f741412c121ffc949daafbd5d86bf2f38cf/hello-chrome/icons/48.png -------------------------------------------------------------------------------- /hello-chrome/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | index 8 | 9 | 10 | 11 | 12 | 13 | 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /hello-chrome/index.js: -------------------------------------------------------------------------------- 1 | console.log("index.js") -------------------------------------------------------------------------------- /hello-chrome/inject.js: -------------------------------------------------------------------------------- 1 | console.log("inject") -------------------------------------------------------------------------------- /hello-chrome/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "manifest_version": 3, 3 | "description": "hello world", 4 | "icons": { 5 | "48": "./icons/48.png" 6 | }, 7 | "devtools_page": "devtools.html", 8 | "content_scripts": [ 9 | { 10 | "matches": [ 11 | "" 12 | ], 13 | "js": [ 14 | "content.js" 15 | ], 16 | "run_at": "document_end", 17 | "all_frames": true 18 | } 19 | ], 20 | "options_ui": { 21 | "page": "options.html", 22 | "browser_style": true 23 | }, 24 | "name": "helloworld", 25 | "version": "2.1.0", 26 | "permissions": [ 27 | "tabs", 28 | "debugger" 29 | ], 30 | "host_permissions": [ 31 | "wss://*/*", 32 | "ws://*/*", 33 | "", 34 | "*://*/*", 35 | "tabs", 36 | "http://*/*", 37 | "https://*/*", 38 | "audio", 39 | "system.cpu", 40 | "clipboardRead", 41 | "clipboardWrite", 42 | "system.memory", 43 | "processes", 44 | "tabs", 45 | "storage", 46 | "nativeMessaging", 47 | "contextMenus", 48 | "notifications" 49 | ], 50 | "action": { 51 | "default_icon": { 52 | "48": "./icons/48.png" 53 | }, 54 | "default_title": "hello-world" 55 | }, 56 | "background": { 57 | "service_worker": "background.js", 58 | "type": "module" 59 | } 60 | } -------------------------------------------------------------------------------- /hello-chrome/options.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | options 5 | 6 | 7 | 8 | options 9 | 10 | 11 | -------------------------------------------------------------------------------- /hello-chrome/options.js: -------------------------------------------------------------------------------- 1 | console.log('options.js') -------------------------------------------------------------------------------- /hello-chrome/popup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | popup 5 | 6 | 7 | 8 | popup 9 | 10 | 11 | -------------------------------------------------------------------------------- /hello-chrome/popup.js: -------------------------------------------------------------------------------- 1 | console.log("popup") -------------------------------------------------------------------------------- /hello-chrome/readme.md: -------------------------------------------------------------------------------- 1 | 使用原生js编写的Chrome插件，方便我理解一些逻辑 -------------------------------------------------------------------------------- /icons/48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tidys/cc-inspector-chrome/a0329f741412c121ffc949daafbd5d86bf2f38cf/icons/48.png -------------------------------------------------------------------------------- /others.md: -------------------------------------------------------------------------------- 1 | 2 | # 说明 3 | 4 | inject在development模式下无法正常使用，暂时的解决办法，注释掉`vue-cli-plugin-browser-extension/index.js`代码中的124行： 5 | ``` 6 | webpackConfig.plugin('extension-reloader').use(ExtensionReloader, [{ entries, ...extensionReloaderOptions }]) 7 | ``` 8 | 详细原因参考：[issues](https://github.com/adambullmer/vue-cli-plugin-browser-extension/issues/120) 9 | 10 | # 后续工作 11 | 12 | popup界面增加联系方式。 13 | 14 | 开发一个独立的electron桌面版本，使用socket调试app，解决排查app问题的痛点。 15 | 16 | 17 | # 后续工作 18 | 19 | 后续打算使用vue3重写，并且完全使用webpack进行打包配置，以灵活应对打包配置，关联项目 20 | 21 | https://github.com/tidys/project-tool 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "author": "cc-plugin", 3 | "description": "cocos creator plugin", 4 | "devDependencies": { 5 | "@types/chrome": "0.0.293", 6 | "@types/fs-extra": "9.0.1", 7 | "@types/kind-of": "^6.0.0", 8 | "@types/lodash": "^4.14.176", 9 | "@types/node": "16.11.12", 10 | "@types/uuid": "^8.3.1", 11 | "@xuyanfeng/cc-ui": "0.2.37", 12 | "cc-plugin": "2.2.2" 13 | }, 14 | "name": "cc-plugin-demo", 15 | "scripts": { 16 | "installForce": "yarn install --force", 17 | "ccp-pack-v2": "cc-plugin pack cp-v2", 18 | "ccp-pack-v3": "cc-plugin pack cp-v3", 19 | "ccp-pack-web": "cc-plugin pack web", 20 | "ccp-pack-chrome": "cc-plugin pack chrome", 21 | "ccp-serve-v2": "cc-plugin serve cp-v2", 22 | "ccp-serve-v3": "cc-plugin serve cp-v3", 23 | "ccp-serve-web": "cc-plugin serve web", 24 | "ccp-serve-chrome": "cc-plugin serve chrome" 25 | }, 26 | "version": "1.0.0", 27 | "dependencies": { 28 | "@tsparticles/slim": "^3.8.1", 29 | "@tsparticles/vue3": "^3.0.1", 30 | "lodash": "^4.17.21", 31 | "tiny-emitter": "2.1.0", 32 | "uuid": "^8.3.2" 33 | } 34 | } -------------------------------------------------------------------------------- /src/core/types.ts: -------------------------------------------------------------------------------- 1 | import { ShowCode } from "../scripts/inject/types"; 2 | import { Chunk } from "../scripts/terminal"; 3 | import { FrameDetails, Info, NodeInfoData, TreeData } from "../views/devtools/data"; 4 | 5 | export enum Page { 6 | None = "None", 7 | Inject = "Inject", 8 | Devtools = "Devtools", 9 | Background = "Background", 10 | Content = "Content", 11 | Popup = "Popup", 12 | Options = "Options", 13 | } 14 | 15 | // #region 定义接受发送的数据声明，方便定位 16 | export interface RequestTreeInfoData { 17 | /** 18 | * 当前正在使用的frameID 19 | */ 20 | frameID: number; 21 | } 22 | export type ResponseTreeInfoData = TreeData; 23 | 24 | export interface RequestNodeInfoData { 25 | /** 26 | * 节点的UUID 27 | */ 28 | uuid: string; 29 | } 30 | export type ResponseNodeInfoData = NodeInfoData; 31 | 32 | export interface RequestSupportData {} 33 | export interface ResponseSupportData { 34 | /** 35 | * 是否支持 36 | */ 37 | support: boolean; 38 | /** 39 | * 消息 40 | */ 41 | msg: string; 42 | /** 43 | * engine版本 44 | */ 45 | version: string; 46 | } 47 | export class DynamicAtlas { 48 | /** 49 | * 是否启用动态图集 50 | */ 51 | enable: boolean = false; 52 | atlasCount: number = 0; 53 | maxAtlasCount: number = 0; 54 | maxFrameSize: number = 0; 55 | textureSize: number = 0; 56 | textureBleeding: boolean = true; 57 | /** 58 | * 是否支持在游戏中查看 59 | */ 60 | supportView: boolean = false; 61 | } 62 | export class ResponseGameInfoData { 63 | public dynamicAtals = new DynamicAtlas(); 64 | } 65 | export type ResponseUpdateFramesData = FrameDetails[]; 66 | 67 | export interface RequestUseFrameData { 68 | id: number; 69 | } 70 | export interface ResponseUseFrameData { 71 | id: number; 72 | } 73 | export type RequestSetPropertyData = Info; 74 | export type ResponseSetPropertyData = Info; 75 | export type RequestLogData = string[]; 76 | export type RequestOpenNodeTouchFuntionData = { uuid: string; code: ShowCode; index: number }; 77 | export type RequestOpenScriptData = { 78 | /**节点或者组件的UUID */ 79 | uuid: string; 80 | /**节点的脚本名字 */ 81 | script: string; 82 | }; 83 | export type ResponseErrorData = string; 84 | export type RequestBreakOnData = { uuid: string; type: BreakOnType }; 85 | export enum Msg { 86 | None = "None", 87 | /** 88 | * 具体的节点信息 89 | */ 90 | RequestNodeInfo = "request-node-info", 91 | ResponseNodeInfo = "response-node-info", 92 | /** 93 | * 节点树信息 94 | */ 95 | RequstTreeInfo = "request-tree-info", 96 | ResponseTreeInfo = "response-tree-info", 97 | /** 98 | * 游戏支持信息 99 | */ 100 | RequestSupport = "request-support", 101 | ResponseSupport = "response-support", 102 | 103 | ResponseMemoryInfo = "response-memory-info", 104 | VisibleFPS = "visible-fps", 105 | ResponseBuyEverything = "ResponseBuyEverything", 106 | /** 107 | * 当前页面信息 108 | */ 109 | TabsInfo = "tabs_info", 110 | /** 111 | * 获取页面ID 112 | */ 113 | GetTabID = "GetTabID", 114 | AddOpactiy = "add-opacity", 115 | /** 116 | * 用户主动选中的节点 117 | */ 118 | InspectNode = "inspect-node", 119 | /** 120 | * 鼠标滑过节点 121 | */ 122 | HoverNode = "hover-node", 123 | /** 124 | * 选中节点 125 | */ 126 | SelectNode = "select-node", 127 | /** 128 | * 更新页面的frame 129 | */ 130 | ResponseUpdateFrames = "response-update-frames", 131 | RequestUseFrame = "request-use-frame", 132 | ResponseUseFrame = "response-use-frame", 133 | /** 134 | * 测试从background层主动断开devtools的链接 135 | */ 136 | RequestDisconnectDevtools = "request-disconnect-devtools", 137 | DevtoolConnectError = "devtool-connect-error", 138 | RequestLogData = "request-log-data", 139 | RequestLogCustom = "request-log-custom", 140 | ReqWriteClipboard = "request-write-clipboard", 141 | RequestSetProperty = "request-set-property", 142 | ResponseSetProperty = "response-set-property", 143 | RequestVisible = "request-visible", 144 | RequestDestroy = "request-destroy", 145 | 146 | ResponseError = "response-error", 147 | 148 | RequestGameInfo = "request-game-info", 149 | ResponseGameInfo = "response-game-info", 150 | 151 | RequestDynamicAtlasView = "request-dynamic-atlas-view", 152 | ResponseDynamicAtlasView = "response-dynamic-atlas-view", 153 | 154 | /** 155 | * 请求在source面板打开节点的touch函数 156 | */ 157 | RequestOpenNodeTouchFuntion = "request-open-node-touch-funtion", 158 | RequestOpenScript = "request-open-script", 159 | RequestBreakOn = "request-break-on", 160 | RequestBreakClean = "request-break-clean", 161 | RequestOpenInCocos = "request-open-in-cocos", 162 | } 163 | export enum BreakOnType { 164 | SizeChanged = "size changed", 165 | TransformChanged = "transform changed", 166 | ColorChanged = "color changed", 167 | LayerChanged = "layer changed", 168 | SiblingOrderChanged = "sibling order changed", 169 | ActiveChanged = "active changed", 170 | Destroyed = "destroyed", 171 | ParentChanged = "parent changed", 172 | ChildAdded = "child added", 173 | ChildRemoved = "child removed", 174 | CompAdded = "component added", 175 | CompRemoved = "component removed", 176 | } 177 | export class PluginEvent { 178 | public static FLAG = "cc-inspector"; 179 | /** 180 | * 增加一个消息的标记位，方便知道是自己插件的消息 181 | */ 182 | flag: string = PluginEvent.FLAG; 183 | /** 184 | * 消息是否有效 185 | */ 186 | valid: boolean = false; 187 | /** 188 | * 消息的类型 189 | */ 190 | msg: Msg | null = null; 191 | /** 192 | * 携带的数据 193 | */ 194 | data: any = null; 195 | 196 | /** 197 | * 事件发送的源头 198 | */ 199 | source: Page | null = null; 200 | /** 201 | * 事件要发送的目标 202 | */ 203 | target: Page | null = null; 204 | isTargetDevtools() { 205 | return this.target === Page.Devtools; 206 | } 207 | isTargetBackground() { 208 | return this.target === Page.Background; 209 | } 210 | isTargetContent() { 211 | return this.target === Page.Content; 212 | } 213 | /** 214 | * 将addListener监听的数据转换为类 215 | */ 216 | static create(data: any): PluginEvent { 217 | let obj = data; 218 | if (typeof data === "string") { 219 | obj = JSON.stringify(data); 220 | } else if (typeof data === "object") { 221 | obj = data; 222 | } else { 223 | debugger; 224 | } 225 | 226 | const ret = new PluginEvent(Page.None, Page.None, Msg.None, null); 227 | if (obj.flag !== PluginEvent.FLAG) { 228 | ret.valid = false; 229 | } else { 230 | const cls = data as PluginEvent; 231 | ret.source = cls.source; 232 | ret.target = cls.target; 233 | ret.msg = cls.msg; 234 | ret.data = cls.data; 235 | ret.valid = true; 236 | } 237 | return ret; 238 | } 239 | check(source: Page, target: Page) { 240 | return source && target && this.source === source && this.target === target; 241 | } 242 | 243 | reset(source: Page | null, target: Page | null) { 244 | if (source && target) { 245 | this.source = source; 246 | this.target = target; 247 | } 248 | } 249 | 250 | /** 251 | * 252 | */ 253 | static finish(event: PluginEvent) { 254 | event.source = event.target = null; 255 | } 256 | toChunk(): Chunk[] { 257 | return [new Chunk(new Date().toLocaleString()).color("white").background("black").padding("0 4px"), new Chunk(this.source).color("white").background("red").padding("0 4px").margin("0 0 0 5px"), new Chunk("=>").color("black").background("yellow").bold(), new Chunk(this.target, false).color("white").background("green").padding("0 4px"), new Chunk(this.msg, true).color("white").background("black").margin("0 0 0 5px").padding("0 6px"), new Chunk(JSON.stringify(this.data))]; 258 | } 259 | constructor(source: Page, target: Page, msg: Msg, data?: any) { 260 | if (PageInclude(target)) { 261 | this.source = source; 262 | this.target = target; 263 | this.msg = msg; 264 | this.data = data; 265 | } else { 266 | console.warn(`无效的target: ${target}`); 267 | } 268 | } 269 | } 270 | 271 | function inEnum(enumValues: any, value: Page | Msg) { 272 | for (let key in enumValues) { 273 | if (enumValues.hasOwnProperty(key)) { 274 | //@ts-ignore 275 | let itemEnum = enumValues[key] as string; 276 | if (itemEnum === value) { 277 | return true; 278 | } 279 | } 280 | } 281 | return false; 282 | } 283 | 284 | export function PageInclude(page: Page) { 285 | return inEnum(Page, page); 286 | } 287 | 288 | export function MsgInclude(msg: Msg) { 289 | return inEnum(Msg, msg); 290 | } 291 | export const debugLog: boolean = false; 292 | -------------------------------------------------------------------------------- /src/core/util.ts: -------------------------------------------------------------------------------- 1 | import { Page } from "./types"; 2 | 3 | interface LogOptions { 4 | data: any; 5 | flag?: string; 6 | color?: "red" | "blue"; 7 | } 8 | 9 | export function log(options: LogOptions) { 10 | const data: any = options.data; 11 | const time = new Date().toLocaleString(); 12 | let log = ""; 13 | if (typeof data === "string") { 14 | log = data; 15 | } else if (typeof data === "object") { 16 | log = JSON.stringify(data); 17 | } 18 | 19 | let str = ""; 20 | if (options.flag) { 21 | str = `[${time}][${options.flag}]: ${log} `; 22 | } else { 23 | str = `[${time}]: ${log} `; 24 | } 25 | if (options.color) { 26 | console.log(`%c${str}`, `color:${options.color};`); 27 | } else { 28 | console.log(str); 29 | } 30 | } 31 | 32 | export function assembleDevToolsName(id: number) { 33 | return `${Page.Devtools}-${id}`; 34 | } 35 | export function getDevToolsInspectorId(name: string) { 36 | const id = name.split("-")[1]; 37 | return id ? Number(id) : 0; 38 | } 39 | -------------------------------------------------------------------------------- /src/ga/index.ts: -------------------------------------------------------------------------------- 1 | import { GA_Button, GA_EventName, MeasurementBody } from "./type"; 2 | 3 | const API_SECRET = "_yU7eNTgT4Khe2Jo22Ki_g"; 4 | const MEASUREMENT_ID = "G-RW7J0JZ6T5"; 5 | const GA_ENDPOINT = "https://www.google-analytics.com/mp/collect"; 6 | 7 | export class GoogleAnalytics { 8 | async getOrCreateSessionId() { 9 | const result = await chrome.storage.local.get("clientId"); 10 | let clientId = result.clientId; 11 | if (!clientId) { 12 | clientId = self.crypto.randomUUID(); 13 | await chrome.storage.local.set({ clientId }); 14 | } 15 | return clientId; 16 | } 17 | private isChromeEnv() { 18 | return !!chrome?.storage?.local?.get; 19 | } 20 | public async fireEventWithParam(name: GA_EventName, param: string) { 21 | if (!this.isChromeEnv()) { 22 | return; 23 | } 24 | const time = Date.now(); 25 | const id = await this.getOrCreateSessionId(); 26 | fetch(`${GA_ENDPOINT}?measurement_id=${MEASUREMENT_ID}&api_secret=${API_SECRET}`, { 27 | method: "POST", 28 | body: JSON.stringify({ 29 | client_id: id, 30 | events: [ 31 | { 32 | name: name, 33 | params: { 34 | id: param, 35 | session_id: time.toString(), 36 | engagement_time_msec: time.toString(), 37 | }, 38 | }, 39 | ], 40 | } as MeasurementBody), 41 | }) 42 | .then(() => {}) 43 | .catch((e) => { 44 | console.error(e); 45 | }); 46 | } 47 | public async fireEvent(name: string) { 48 | if (!this.isChromeEnv()) { 49 | return; 50 | } 51 | const time = Date.now(); 52 | const id = await this.getOrCreateSessionId(); 53 | fetch(`${GA_ENDPOINT}?measurement_id=${MEASUREMENT_ID}&api_secret=${API_SECRET}`, { 54 | method: "POST", 55 | body: JSON.stringify({ 56 | client_id: id, 57 | events: [ 58 | { 59 | name: name, 60 | params: { 61 | session_id: time.toString(), 62 | engagement_time_msec: time.toString(), 63 | }, 64 | }, 65 | ], 66 | } as MeasurementBody), 67 | }) 68 | .then(() => {}) 69 | .catch((e) => { 70 | console.error(e); 71 | }); 72 | } 73 | async clickButton(btn: GA_Button) { 74 | await this.fireEventWithParam(GA_EventName.ButtonClicked, btn); 75 | } 76 | async openView(view: string) { 77 | await this.fireEventWithParam(GA_EventName.PageView, view); 78 | } 79 | } 80 | export const ga = new GoogleAnalytics(); 81 | -------------------------------------------------------------------------------- /src/ga/type.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 发送的消息数据结构 3 | * 4 | * @doc https://developers.google.com/analytics/devguides/collection/protocol/ga4/reference?hl=zh-cn&client_type=gtag#payload_post_body 5 | * @github https://github.dev/GoogleChrome/chrome-extensions-samples/blob/main/functional-samples/tutorial.google-analytics/scripts/google-analytics.js#L69 6 | */ 7 | export interface MeasurementBody { 8 | /** 9 | * 用户的ID，用于标识用户 10 | */ 11 | client_id: string; 12 | /** 13 | * 用户的唯一标识，只能包含 utf-8 字符。 14 | */ 15 | user_id?: string; 16 | /** 17 | * 事件相关联的时间的 UNIX 时间戳，此值应仅设置为记录过去发生的事件。 18 | */ 19 | timestamp_micros?: number; 20 | /** 21 | * 用户属性用于描述用户群细分，例如语言偏好设置或地理位置。 22 | * 23 | * @doc https://developers.google.com/analytics/devguides/collection/protocol/ga4/user-properties?hl=zh-cn&client_type=gtag 24 | */ 25 | user_properties?: Object; 26 | /** 27 | * 用户提供的数据。 28 | * 29 | *@doc https://developers.google.com/analytics/devguides/collection/ga4/uid-data?hl=zh-cn 30 | */ 31 | user_data?: Object; 32 | /** 33 | * 设置请求的用户意见征求设置。 34 | * @doc https://developers.google.com/analytics/devguides/collection/protocol/ga4/reference?hl=zh-cn&client_type=gtag#payload_consent 35 | */ 36 | consent?: Object; 37 | /** 38 | * 每个请求最多可以发送 25 个事件 39 | */ 40 | events?: MeasurementEvent[]; 41 | } 42 | export interface MeasurementEvent { 43 | /** 44 | * 事件的名称。 45 | * 46 | * Google提供的事件： https://developers.google.com/analytics/devguides/collection/protocol/ga4/reference/events?hl=zh-cn#add_payment_info 47 | * 预留的事件名：https://developers.google.com/analytics/devguides/collection/protocol/ga4/reference?hl=zh-cn&client_type=gtag#reserved_event_names 48 | */ 49 | name: string; 50 | /** 51 | * 预留的参数名：https://developers.google.com/analytics/devguides/collection/protocol/ga4/reference?hl=zh-cn&client_type=gtag#reserved_parameter_names 52 | */ 53 | params?: { 54 | [key: string]: any; 55 | /** 56 | * 在实时报告中查看事件，需要该参数 57 | */ 58 | session_id?: string; 59 | /** 60 | * 事件的互动时长（以毫秒为单位） 61 | */ 62 | engagement_time_msec?: string; 63 | }; 64 | } 65 | export interface GA_Event_PageView extends MeasurementEvent { 66 | name: "page_view"; 67 | params: { 68 | page_title: string; 69 | page_location: string; 70 | }; 71 | } 72 | 73 | export enum GA_EventName { 74 | ButtonClicked = "button_clicked", 75 | PageView = "page_view", 76 | SpaceVisible = "space_visible", 77 | MouseMenu = "mouse_menu", 78 | Hierarchy = "hierarchy", 79 | Inspector = "Inspector", 80 | EngineVersion = "engine_version", 81 | AppVersion = "app_version", 82 | Popup = "popup", 83 | Rate = "rate", 84 | GameUrl = "game_url", 85 | GamePlayer = "game_player", 86 | GamePause = "game_pause", 87 | GameStep = "game_step", 88 | TreeSearch = "tree-search", 89 | /** 90 | * 用户点击store广告链接 91 | */ 92 | ClickPluginLink = "click_plugin_link", 93 | /** 94 | * 用户主动关闭store广告 95 | */ 96 | CloseAd = "close_ad", 97 | OpenDoc = "open_doc", 98 | /** 99 | * 展示广告 100 | */ 101 | ShowAd = "show_ad", 102 | /** 103 | * 用户主动使用inspector检查游戏节点 104 | */ 105 | GameInspector = "game_inspector", 106 | } 107 | export enum GA_Button { 108 | Github = "github", 109 | Issues = "issues", 110 | Docs = "docs", 111 | QQ = "qq", 112 | /** 113 | * 当页面不支持cocos时，用户手动点击了刷新 114 | */ 115 | FreshManual = "fresh-manual", 116 | } 117 | -------------------------------------------------------------------------------- /src/i18n/en.ts: -------------------------------------------------------------------------------- 1 | export const title = "CCInspector"; 2 | -------------------------------------------------------------------------------- /src/i18n/zh.ts: -------------------------------------------------------------------------------- 1 | export const title = "CCInspector"; 2 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import CCP from "cc-plugin/src/ccp/entry-main"; 2 | import { BuilderOptions } from "cc-plugin/src/declare"; 3 | import pluginConfig from "../cc-plugin.config"; 4 | 5 | CCP.init(pluginConfig, { 6 | load: () => { 7 | console.log("plugin load"); 8 | }, 9 | builder: { 10 | onAfterBuild(target: BuilderOptions) {}, 11 | }, 12 | messages: { 13 | showPanel() { 14 | CCP.Adaptation.Panel.open("self.main"); 15 | }, 16 | }, 17 | }); 18 | -------------------------------------------------------------------------------- /src/panel/index.ts: -------------------------------------------------------------------------------- 1 | import { loadSlim } from "@tsparticles/slim"; 2 | import Particles from "@tsparticles/vue3"; 3 | import ccui from "@xuyanfeng/cc-ui"; 4 | import "@xuyanfeng/cc-ui/dist/ccui.css"; 5 | import "@xuyanfeng/cc-ui/iconfont/iconfont.css"; 6 | import CCP from "cc-plugin/src/ccp/entry-render"; 7 | import { createApp } from "vue"; 8 | import pluginConfig from "../../cc-plugin.config"; 9 | import App from "./index.vue"; 10 | export default CCP.init(pluginConfig, { 11 | ready: function (rootElement: any, args: any) { 12 | const app = createApp(App); 13 | app.use(ccui); 14 | //@ts-ignore 15 | app.use(Particles, { 16 | init: async (engine) => { 17 | await loadSlim(engine); 18 | }, 19 | }); 20 | app.mount(rootElement); 21 | }, 22 | }); 23 | -------------------------------------------------------------------------------- /src/panel/index.vue: -------------------------------------------------------------------------------- 1 | 39 | 157 | 158 | 262 | -------------------------------------------------------------------------------- /src/panel/res/chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tidys/cc-inspector-chrome/a0329f741412c121ffc949daafbd5d86bf2f38cf/src/panel/res/chrome.png -------------------------------------------------------------------------------- /src/panel/res/edge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tidys/cc-inspector-chrome/a0329f741412c121ffc949daafbd5d86bf2f38cf/src/panel/res/edge.png -------------------------------------------------------------------------------- /src/scripts/background/content.ts: -------------------------------------------------------------------------------- 1 | import { debugLog, Page, PluginEvent } from "../../core/types"; 2 | import { FrameDetails } from "../../views/devtools/data"; 3 | import { Terminal } from "../terminal"; 4 | import { TabInfo } from "./tabInfo"; 5 | 6 | export class Content { 7 | public frameID: number = 0; 8 | /** 9 | * port的名字标识 10 | */ 11 | public name: string = Page.None; 12 | /** 13 | * tab.id作为唯一标识 14 | */ 15 | public tabID: number | null = null; 16 | public title: string = ""; 17 | public url: string = ""; 18 | protected port: chrome.runtime.Port | null = null; 19 | public tab: chrome.tabs.Tab | null = null; 20 | public terminal: Terminal = null; 21 | /** 22 | * 是否正在使用 23 | */ 24 | public using: boolean = false; 25 | private tabInfo: TabInfo | null = null; 26 | constructor(tab: chrome.tabs.Tab, port: chrome.runtime.Port, tabInfo: TabInfo) { 27 | this.tabInfo = tabInfo; 28 | this.port = port; 29 | this.tab = tab; 30 | this.name = port.name; 31 | this.tabID = tab.id; 32 | this.url = port.sender.url; 33 | this.title = tab.title; 34 | this.terminal = new Terminal(`Port-${this.name}`); 35 | port.onMessage.addListener((data: any, port: chrome.runtime.Port) => { 36 | const event = PluginEvent.create(data); 37 | debugLog && console.log(...this.terminal.chunkMessage(event.toChunk())); 38 | if (event.valid && this.onMessage) { 39 | this.onMessage(event); 40 | } else { 41 | debugLog && console.log(...this.terminal.log(JSON.stringify(data))); 42 | } 43 | }); 44 | port.onDisconnect.addListener((port: chrome.runtime.Port) => { 45 | const ret = ["localhost", "127.0.0.1"].find((el) => port.sender.url.includes(el)); 46 | if (ret) { 47 | console.log("local port disconnect"); 48 | // debugger; 49 | } 50 | debugLog && console.log(...this.terminal.disconnect("")); 51 | this.onDisconnect(port); 52 | }); 53 | this.frameID = port.sender.frameId || 0; 54 | } 55 | getFrameDetais(): FrameDetails { 56 | return { 57 | tabID: this.tabID, 58 | url: this.url, 59 | frameID: this.frameID, 60 | }; 61 | } 62 | private onDisconnect(disPort: chrome.runtime.Port) { 63 | this.tabInfo.removePort(this); 64 | } 65 | 66 | public onMessage(data: PluginEvent) { 67 | // content的数据一般都是要同步到devtools 68 | if (data.isTargetDevtools()) { 69 | if (this.tabInfo.devtool) { 70 | this.tabInfo.devtool.send(data); 71 | } else { 72 | debugger; 73 | } 74 | } else { 75 | debugger; 76 | } 77 | } 78 | 79 | send(data: PluginEvent) { 80 | if (this.port) { 81 | this.port.postMessage(data); 82 | } 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /src/scripts/background/devtools.ts: -------------------------------------------------------------------------------- 1 | import { debugLog, Msg, Page, PluginEvent, RequestUseFrameData } from "../../core/types"; 2 | import { Terminal } from "../terminal"; 3 | import { TabInfo } from "./tabInfo"; 4 | 5 | export class Devtools { 6 | /** 7 | * port的名字标识 8 | */ 9 | public name: string = Page.None; 10 | /** 11 | * tab.id作为唯一标识 12 | */ 13 | public tabID: number | null = null; 14 | public title: string = ""; 15 | public url: string = ""; 16 | protected port: chrome.runtime.Port | null = null; 17 | public tab: chrome.tabs.Tab | null = null; 18 | 19 | public terminal: Terminal = null; 20 | public tabInfo: TabInfo | null = null; 21 | constructor(port: chrome.runtime.Port, tabInfo: TabInfo) { 22 | this.tabInfo = tabInfo; 23 | this.port = port; 24 | this.name = port.name; 25 | this.url = port.sender.url; 26 | this.terminal = new Terminal(`Port-${this.name}`); 27 | port.onMessage.addListener((data: any, port: chrome.runtime.Port) => { 28 | const event = PluginEvent.create(data); 29 | debugLog && console.log(...this.terminal.chunkMessage(event.toChunk())); 30 | if (event.valid && this.onMessage) { 31 | this.onMessage(event); 32 | } else { 33 | debugLog && console.log(...this.terminal.log(JSON.stringify(data))); 34 | } 35 | }); 36 | port.onDisconnect.addListener((port: chrome.runtime.Port) => { 37 | const ret = ["localhost", "127.0.0.1"].find((el) => port.sender.url.includes(el)); 38 | if (ret) { 39 | debugger; 40 | } 41 | debugLog && console.log(...this.terminal.disconnect("")); 42 | this.onDisconnect(port); 43 | }); 44 | } 45 | public onDisconnect(port: chrome.runtime.Port) { 46 | this.tabInfo.removeDevtools(this); 47 | } 48 | public onMessage(data: PluginEvent) { 49 | if (data.msg === Msg.RequestUseFrame) { 50 | // 因为devtool是定时器驱动，这里改变了content，后续就会将数据派发到对应的content中去 51 | this.tabInfo.useFrame((data.data as RequestUseFrameData).id); 52 | } else if (data.msg === Msg.RequestDisconnectDevtools) { 53 | if (this.port) { 54 | this.port.disconnect(); 55 | this.tabInfo.devtool = null; 56 | } 57 | } else { 58 | // 从devtools过来的消息统一派发到目标content中 59 | if (data.check(Page.Devtools, Page.Background)) { 60 | data.reset(Page.Background, Page.Content); 61 | this.tabInfo.sendMsgToContent(data); 62 | } 63 | } 64 | } 65 | send(data: PluginEvent) { 66 | if (this.port) { 67 | this.port.postMessage(data); 68 | } 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /src/scripts/background/index.ts: -------------------------------------------------------------------------------- 1 | import { debugLog, Msg, Page, PluginEvent } from "../../core/types"; 2 | import { getDevToolsInspectorId } from "../../core/util"; 3 | import { Terminal } from "../terminal"; 4 | import "./notify"; 5 | import { tabMgr } from "./tabMgr"; 6 | const terminal = new Terminal(Page.Background); 7 | debugLog && console.log(...terminal.init()); 8 | 9 | chrome.runtime.onConnect.addListener((port: chrome.runtime.Port) => { 10 | if (port.name === Page.Content) { 11 | const tab: chrome.tabs.Tab | undefined = port.sender?.tab; 12 | const tabID = tab.id; 13 | if (tabID === undefined || tabID <= 0) { 14 | return; 15 | } 16 | tabMgr.addTab(tab, port); 17 | } else if (port.name.startsWith(Page.Devtools)) { 18 | const id = getDevToolsInspectorId(port.name); 19 | console.log(`devtools tab id is ${id}`); 20 | const tab = tabMgr.findTab(id); 21 | if (tab) { 22 | tab.addDevtools(port); 23 | } else { 24 | // 没有发现与之对应的调试content，主动断开链接 25 | const event = new PluginEvent(Page.Background, Page.Devtools, Msg.DevtoolConnectError, "missing content"); 26 | port.postMessage(event); 27 | port.disconnect(); 28 | } 29 | } 30 | }); 31 | chrome.runtime.onMessage.addListener((request: PluginEvent, sender: any, sendResponse: any) => { 32 | const event = PluginEvent.create(request); 33 | const tabID = sender.tab.id; 34 | const tabInfo = tabMgr.findTab(tabID); 35 | if (tabInfo) { 36 | if (event.check(Page.Content, Page.Background)) { 37 | // 监听来自content.js发来的事件，将消息转发到devtools 38 | event.reset(Page.Background, Page.Devtools); 39 | console.log(`%c[Message]url:${sender.url}]\n${JSON.stringify(request)}`, "color:green"); 40 | if (tabInfo.devtool) { 41 | tabInfo.devtool.send(request); 42 | } 43 | } 44 | } 45 | }); 46 | chrome.tabs.onActivated.addListener(({ tabId, windowId }) => {}); 47 | chrome.tabs.onRemoved.addListener((tabId, removeInfo) => { 48 | // 49 | }); 50 | chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => { 51 | // 页面发生刷新，通知重新生成数据 52 | if (changeInfo.status === "complete") { 53 | const { id } = tab; 54 | // -1为自己 55 | if (id >= 0) { 56 | const tabInfo = tabMgr.findTab(id); 57 | if (tabInfo) { 58 | tabInfo.useFrame(0); 59 | } 60 | } 61 | } 62 | }); 63 | -------------------------------------------------------------------------------- /src/scripts/background/notify.ts: -------------------------------------------------------------------------------- 1 | import { gt } from "semver"; 2 | import PKG from "../../../cc-plugin.config"; 3 | import { ga } from "../../ga"; 4 | import { GA_EventName } from "../../ga/type"; 5 | import { githubMirrorMgr } from "../inject-view/github"; 6 | import { getAdData, NotifyButton } from "../inject-view/loader"; 7 | 8 | export const TipUpdate = "tip-update"; 9 | (async () => { 10 | interface ConfigItem { 11 | id: string; 12 | click?: Function; 13 | closed?: Function; 14 | title: string; 15 | message: string; 16 | /** 17 | * 检查是否可以创建通知 18 | * @returns 返回true，则会创建通知 19 | */ 20 | check: (item: ConfigItem) => Promise; 21 | buttons?: Array<{ title: string; click?: Function }>; 22 | } 23 | function goRate() { 24 | const url = PKG.manifest.chrome.url; 25 | if (url) { 26 | // chrome.windows.create({ 27 | // url: url, 28 | // type: "normal", 29 | // }); 30 | chrome.tabs.create({ url: url }); 31 | ga.fireEventWithParam(GA_EventName.Rate, "go"); 32 | } 33 | } 34 | const KeyHasRate = "has-rate"; 35 | const config: ConfigItem[] = [ 36 | { 37 | id: "rate", 38 | title: "Hi", 39 | message: "如果不是真爱，你也不会使用这么长时间，求五星好评！", 40 | click: () => { 41 | goRate(); 42 | }, 43 | closed: () => { 44 | console.log("closed"); 45 | }, 46 | check: async (cfg: ConfigItem) => { 47 | const result = await chrome.storage.local.get(KeyHasRate); 48 | if (result[KeyHasRate]) { 49 | // 已经评价过了 50 | return false; 51 | } 52 | const KeyInstallTime = "install-time"; 53 | const KeyLatestShowTime = "latest-show-time"; 54 | 55 | let res1 = await chrome.storage.local.get(KeyInstallTime); 56 | const time1 = res1[KeyInstallTime]; 57 | if (!time1) { 58 | // 首次安装 59 | chrome.storage.local.set({ [KeyInstallTime]: new Date().getTime() }); 60 | return false; 61 | } 62 | 63 | const diff = (new Date().getTime() - time1) / 1000; 64 | const afterInstall = 60 * 60 * 24 * 3; // 安装3天后 65 | if (diff <= afterInstall) { 66 | // 安装后一段时间不显示 67 | return false; 68 | } 69 | let canShow = false; 70 | const res = await chrome.storage.local.get(KeyLatestShowTime); 71 | const time = res[KeyLatestShowTime]; 72 | if (time) { 73 | // 检查距离上次弹出是否超过指定时间 74 | const diff = (new Date().getTime() - time) / 1000; 75 | const afterLatestShow = 60 * 60 * 24 * 1; // 一天一次 76 | canShow = diff > afterLatestShow; 77 | } else { 78 | // 首次弹出 79 | canShow = true; 80 | } 81 | if (!canShow) { 82 | return false; 83 | } 84 | chrome.storage.local.set({ [KeyLatestShowTime]: new Date().getTime() }); 85 | return true; 86 | }, 87 | buttons: [ 88 | { 89 | title: "我已评价", 90 | click: () => { 91 | chrome.storage.local.set({ [KeyHasRate]: true }); 92 | ga.fireEventWithParam(GA_EventName.Rate, "has rate"); 93 | }, 94 | }, 95 | { 96 | title: "前往评价", 97 | click: () => { 98 | goRate(); 99 | }, 100 | }, 101 | ], 102 | }, 103 | ]; 104 | try { 105 | await githubMirrorMgr.init(); 106 | // 版本检查 107 | const data = await githubMirrorMgr.getData("version.json"); 108 | if (data) { 109 | const info = data as { ver: string }; 110 | const b = gt(info.ver || "0.0.0", PKG.manifest.version); 111 | if (info.ver && b) { 112 | config.push({ 113 | id: "update", 114 | title: `${PKG.manifest.name}发现新版本${info.ver || ""}`, 115 | message: `点击查看`, 116 | click: () => { 117 | goRate(); 118 | }, 119 | check: async () => { 120 | return true; 121 | }, 122 | }); 123 | } 124 | } 125 | // 广告分析 126 | const adData = await getAdData(); 127 | if (adData && adData.notify.length) { 128 | adData.notify.forEach((el) => { 129 | const KeyIKnow = `i-know-${el.id}`; 130 | config.push({ 131 | id: el.id, 132 | title: el.title, 133 | message: el.msg, 134 | buttons: el.buttons.map((btn) => { 135 | const map = {}; 136 | map[NotifyButton.IKnow] = "我知道了"; 137 | map[NotifyButton.Go] = "前往"; 138 | return { 139 | title: map[btn], 140 | click: () => { 141 | if (btn === NotifyButton.Go) { 142 | chrome.tabs.create({ url: el.url }); 143 | } else if (btn === NotifyButton.IKnow) { 144 | chrome.storage.local.set({ [`${KeyIKnow}`]: true }); 145 | } 146 | }, 147 | }; 148 | }), 149 | click: () => { 150 | chrome.tabs.create({ url: el.url }); 151 | }, 152 | check: async () => { 153 | // 检查是否已经过期 154 | const now = new Date().getTime(); 155 | if (el.deadTime && now > new Date(el.deadTime).getTime()) { 156 | return false; 157 | } 158 | // 检查是否已经取消了 159 | const result = await chrome.storage.local.get(KeyIKnow); 160 | if (result[KeyIKnow]) { 161 | return false; 162 | } 163 | // 距离上次是否已经过去了指定的时间间隔 164 | const KeyLatestShowTime = `latest-show-${el.id}`; 165 | const res = await chrome.storage.local.get(KeyLatestShowTime); 166 | const time = res[KeyLatestShowTime]; 167 | if (time) { 168 | const diff = (new Date().getTime() - time) / 1000 / 60; // 过去了多少分钟 169 | if (diff <= el.duration) { 170 | return false; 171 | } 172 | } 173 | chrome.storage.local.set({ [KeyLatestShowTime]: new Date().getTime() }); 174 | return true; 175 | }, 176 | }); 177 | }); 178 | } 179 | } catch (e) { 180 | console.error(e); 181 | } 182 | chrome.notifications.onClicked.addListener((id) => { 183 | const ret = config.find((el) => el.id === id); 184 | if (ret) { 185 | ret.click && ret.click(); 186 | } 187 | }); 188 | chrome.notifications.onClosed.addListener((id) => { 189 | const ret = config.find((el) => el.id === id); 190 | if (ret) { 191 | ret.closed && ret.closed(); 192 | } 193 | }); 194 | chrome.notifications.onButtonClicked.addListener((notificationId, buttonIndex) => { 195 | const ret = config.find((el) => el.id === notificationId); 196 | if (!ret.buttons) { 197 | return; 198 | } 199 | const btn = ret.buttons[buttonIndex]; 200 | if (!btn) { 201 | return; 202 | } 203 | btn.click && btn.click(); 204 | }); 205 | 206 | for (let i = 0; i < config.length; i++) { 207 | await createNotification(config[i]); 208 | } 209 | 210 | async function createNotification(config: ConfigItem) { 211 | const b = await config.check(config); 212 | if (!b) { 213 | return; 214 | } 215 | const { title, buttons, message, id } = config; 216 | chrome.notifications.create( 217 | id, 218 | { 219 | type: "basic", 220 | iconUrl: "icons/48.png", 221 | title: title, 222 | message: message, 223 | buttons: buttons ? buttons.map((el) => ({ title: el.title })) : [], 224 | }, 225 | (id: string) => {} 226 | ); 227 | } 228 | })(); 229 | -------------------------------------------------------------------------------- /src/scripts/background/tabInfo.ts: -------------------------------------------------------------------------------- 1 | import { Msg, Page, PluginEvent, ResponseUpdateFramesData, ResponseUseFrameData } from "../../core/types"; 2 | import { FrameDetails } from "../../views/devtools/data"; 3 | import { Content } from "./content"; 4 | import { Devtools } from "./devtools"; 5 | 6 | export class TabInfo { 7 | /** 8 | * 标签的ID 9 | */ 10 | public tabID: number; 11 | constructor(tabID: number) { 12 | this.tabID = tabID; 13 | } 14 | /** 15 | * 因为iframe的原因，可能对应多个，主iframe的id是0 16 | */ 17 | public contentArray: Array = []; 18 | addContent(tab: chrome.tabs.Tab, port: chrome.runtime.Port) { 19 | // 新的content连上来，需要更新devtools 20 | let portContent: Content = new Content(tab, port, this); 21 | this.contentArray.push(portContent); 22 | this.updateFrames(); 23 | // 之前持有的链接会断开，content会重新发起链接，重新连上之后，如果只有一个人链接，需要设置using状态，否则devtools找不到content 24 | if (this.contentArray.length === 1) { 25 | const id = this.contentArray[0].frameID; 26 | this.useFrame(id); 27 | } 28 | } 29 | public removePort(item: Content) { 30 | let index = this.contentArray.findIndex((el) => el === item); 31 | if (index > -1) { 32 | this.contentArray.splice(index, 1); 33 | this.updateFrames(); 34 | 35 | // 使用第一个frame 36 | if (this.contentArray.length) { 37 | const id = this.contentArray[0].frameID; 38 | this.useFrame(id); 39 | } 40 | } 41 | } 42 | public removeDevtools(item: Devtools) { 43 | this.devtool = null; 44 | } 45 | useFrame(id: number) { 46 | this.contentArray.map((content) => { 47 | content.using = content.frameID === id; 48 | }); 49 | this.sendMsgToDevtool(Msg.ResponseUseFrame, { id } as ResponseUseFrameData); 50 | } 51 | /** 52 | * 通知devtools更新 53 | */ 54 | private updateFrames() { 55 | const data: FrameDetails[] = []; 56 | this.contentArray.forEach((item) => { 57 | const frame = (item as Content).getFrameDetais(); 58 | data.push(frame); 59 | }); 60 | this.sendMsgToDevtool(Msg.ResponseUpdateFrames, data as ResponseUpdateFramesData); 61 | } 62 | private sendMsgToDevtool(msg: Msg, data: any) { 63 | if (this.devtool) { 64 | const event = new PluginEvent(Page.Background, Page.Devtools, msg, data); 65 | this.devtool.send(event); 66 | } 67 | } 68 | public sendMsgToContent(data: PluginEvent) { 69 | const content = this.contentArray.find((el) => el.using); 70 | if (content) { 71 | content.send(data); 72 | } else { 73 | // 当页面没有完成刷新状态时，conent并没有using，就会触发此处逻辑 74 | // 在页面完成刷新后，会主动设置为using 75 | } 76 | } 77 | public devtool: Devtools | null = null; 78 | addDevtools(port: chrome.runtime.Port) { 79 | if (this.devtool === null) { 80 | this.devtool = new Devtools(port, this); 81 | } else { 82 | debugger; 83 | } 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /src/scripts/background/tabMgr.ts: -------------------------------------------------------------------------------- 1 | import { TabInfo } from "./tabInfo"; 2 | 3 | export class TabMgr { 4 | constructor() { 5 | this.tabArray = []; 6 | } 7 | /** 8 | * chrome打开的所有标签页面 9 | */ 10 | public tabArray: TabInfo[] = []; 11 | public findTab(id: number): TabInfo | null { 12 | return this.tabArray.find((el) => el.tabID === id) || null; 13 | } 14 | 15 | addTab(tab: chrome.tabs.Tab, port: chrome.runtime.Port) { 16 | let tabInfo = this.findTab(tab.id); 17 | if (!tabInfo) { 18 | tabInfo = new TabInfo(tab.id); 19 | this.tabArray.push(tabInfo); 20 | } 21 | tabInfo.addContent(tab, port); 22 | } 23 | } 24 | export const tabMgr = new TabMgr(); 25 | -------------------------------------------------------------------------------- /src/scripts/const.ts: -------------------------------------------------------------------------------- 1 | import { GA_EventName } from "../ga/type"; 2 | 3 | export enum DocumentEvent { 4 | /** 5 | * 从inject到content的事件 6 | */ 7 | Inject2Content = "inject2content", 8 | /** 9 | * 从content到inject的事件 10 | */ 11 | Content2Inject = "content2inject", 12 | EngineVersion = "engineVersion", 13 | GoogleAnalytics = "googleAnalytics", 14 | LoadInjectCss = "load-inject-css", 15 | InspectorClear = "inspector_clear", 16 | GameInspectorBegan = "GameInspectorBegan", 17 | GameInspectorEnd = "GameInspectorEnd", 18 | } 19 | export interface GoogleAnalyticsData { 20 | event: GA_EventName; 21 | params: string; 22 | } 23 | -------------------------------------------------------------------------------- /src/scripts/content/index.ts: -------------------------------------------------------------------------------- 1 | // content.js 和原始界面共享DOM，具有操作dom的能力 2 | // 但是不共享js,要想访问页面js,只能通过注入的方式 3 | import { ChromeConst } from "cc-plugin/src/chrome/const"; 4 | import { debugLog, Page, PluginEvent } from "../../core/types"; 5 | import { ga } from "../../ga"; 6 | import { GA_EventName } from "../../ga/type"; 7 | import { DocumentEvent, GoogleAnalyticsData } from "../const"; 8 | import { Terminal } from "../terminal"; 9 | 10 | const terminal = new Terminal(Page.Content); 11 | debugLog && console.log(...terminal.init()); 12 | 13 | // #region 注入脚本 14 | export function injectScript(url: string) { 15 | if (chrome && chrome.runtime && chrome.runtime.getURL) { 16 | let content = chrome.runtime.getURL(url); 17 | const script = document.createElement("script"); 18 | script.setAttribute("type", "text/javascript"); 19 | script.setAttribute("src", content); 20 | script.onload = function () { 21 | // 加载注入脚本界面的css 22 | let css = chrome.runtime.getURL(ChromeConst.css.inject_view); 23 | const event = new CustomEvent(DocumentEvent.LoadInjectCss, { detail: [css] }); 24 | document.dispatchEvent(event); 25 | document.head.removeChild(script); 26 | }; 27 | document.head.appendChild(script); 28 | debugLog && console.log(...terminal.green(`inject script success: ${content}`)); 29 | } else { 30 | debugLog && console.log(...terminal.red("inject script failed")); 31 | } 32 | } 33 | 34 | document.addEventListener(DocumentEvent.EngineVersion, async (event: CustomEvent) => { 35 | const version: string = event.detail; 36 | if (version) { 37 | ga.fireEventWithParam(GA_EventName.EngineVersion, version); 38 | } 39 | }); 40 | document.addEventListener(DocumentEvent.GoogleAnalytics, (event: CustomEvent) => { 41 | const data: GoogleAnalyticsData = event.detail; 42 | if (data && data.event) { 43 | if (data.params) { 44 | ga.fireEventWithParam(data.event, data.params); 45 | } else { 46 | ga.fireEvent(data.event); 47 | } 48 | } 49 | }); 50 | // #region 和Inject通讯 51 | document.addEventListener(DocumentEvent.Inject2Content, (event: CustomEvent) => { 52 | let data: PluginEvent = PluginEvent.create(event.detail); 53 | if (data.valid && data.check(Page.Inject, Page.Content)) { 54 | debugLog && console.log(...terminal.chunkMessage(data.toChunk())); 55 | data.reset(Page.Content, Page.Devtools); 56 | if (connect) { 57 | // 接受来自inject.js的消息数据,然后中转到background.js 58 | connect.postMessage(data); 59 | } else { 60 | debugLog && console.log(...terminal.log(`connect is null`)); 61 | console.log("connect is null"); 62 | } 63 | } else { 64 | throw new Error(`invalid data: ${event.detail}`); 65 | } 66 | }); 67 | // #region 和background通讯 68 | let connect: chrome.runtime.Port = null; 69 | function doConnect() { 70 | connect = chrome.runtime.connect({ name: Page.Content }); 71 | connect.onDisconnect.addListener(() => { 72 | debugLog && console.log(...terminal.disconnect("")); 73 | connect = null; 74 | doConnect(); 75 | }); 76 | connect.onMessage.addListener((data: PluginEvent, sender: chrome.runtime.Port) => { 77 | const event = PluginEvent.create(data); 78 | if (event.valid && event.check(Page.Background, Page.Content)) { 79 | debugLog && console.log(...terminal.chunkMessage(event.toChunk())); 80 | event.reset(Page.Content, Page.Inject); 81 | const e = new CustomEvent(DocumentEvent.Content2Inject, { detail: event }); 82 | debugLog && console.log(...terminal.chunkSend(event.toChunk())); 83 | document.dispatchEvent(e); 84 | } else { 85 | throw new Error(`invalid data: ${data}`); 86 | } 87 | }); 88 | } 89 | doConnect(); 90 | injectScript(ChromeConst.script.inject); 91 | -------------------------------------------------------------------------------- /src/scripts/inject-view/ad.vue: -------------------------------------------------------------------------------- 1 | 10 | 60 | 81 | -------------------------------------------------------------------------------- /src/scripts/inject-view/banner.vue: -------------------------------------------------------------------------------- 1 | 10 | 57 | 58 | 123 | -------------------------------------------------------------------------------- /src/scripts/inject-view/const.ts: -------------------------------------------------------------------------------- 1 | import { TinyEmitter } from "tiny-emitter"; 2 | export const Msg = { 3 | ChangeAd: "ChangeAd", 4 | }; 5 | export const emitter = new TinyEmitter(); 6 | -------------------------------------------------------------------------------- /src/scripts/inject-view/github.ts: -------------------------------------------------------------------------------- 1 | export interface MirrorInfo { 2 | /** 3 | * 请求的url 4 | */ 5 | name: string; 6 | /** 7 | * 上次请求成功的时间 8 | */ 9 | time: number; 10 | } 11 | class Config { 12 | private key = "cc-inspector-ad-config"; 13 | private data: MirrorInfo[] = []; 14 | async init() { 15 | try { 16 | let str: string = ""; 17 | if (this.isNormalWebEnv()) { 18 | str = localStorage.getItem(this.key); 19 | } else if (this.isChromeBackgroundEnv()) { 20 | const ret = await chrome.storage.local.get(this.key); 21 | if (ret && ret[this.key]) { 22 | str = ret[this.key] as string; 23 | } 24 | } 25 | if (str) { 26 | const ret = JSON.parse(str) as MirrorInfo[]; 27 | if (ret) { 28 | this.data = []; 29 | ret.forEach((el) => { 30 | this.data.push({ name: el.name, time: el.time }); 31 | }); 32 | } 33 | } 34 | } catch { 35 | debugger; 36 | } 37 | } 38 | private isChromeBackgroundEnv() { 39 | return typeof chrome !== "undefined" && typeof chrome.storage !== "undefined" && typeof chrome.storage.local !== "undefined"; 40 | } 41 | private isNormalWebEnv() { 42 | return typeof localStorage !== "undefined"; 43 | } 44 | async save(name: string, time: number) { 45 | const ret = this.data.find((el) => el.name === name); 46 | if (ret) { 47 | ret.time = time; 48 | } else { 49 | this.data.push({ name: name, time: time } as MirrorInfo); 50 | } 51 | const saveString = JSON.stringify(this.data); 52 | 53 | if (this.isNormalWebEnv()) { 54 | localStorage.setItem(this.key, saveString); 55 | } else if (this.isChromeBackgroundEnv()) { 56 | await chrome.storage.local.set({ [this.key]: saveString }); 57 | } 58 | } 59 | getTime(url: string) { 60 | const ret = this.data.find((el) => el.name === url); 61 | if (ret) { 62 | return ret.time; 63 | } 64 | return 0; 65 | } 66 | } 67 | export class GithubMirror { 68 | owner: string = "tidys"; 69 | repo: string = "cc-inspector-ad"; 70 | branch: string = "main"; 71 | /** 72 | * 上次请求成功的时间 73 | */ 74 | time: number = 0; 75 | /** 76 | * 镜像的名字 77 | */ 78 | name: string = ""; 79 | private calcUrl: Function; 80 | constructor(name: string, cb: Function) { 81 | this.name = name; 82 | this.time = cfg.getTime(name); 83 | this.calcUrl = cb; 84 | } 85 | public getUrl(file: string) { 86 | if (!file) { 87 | return ""; 88 | } 89 | if (this.calcUrl) { 90 | return this.calcUrl(this.owner, this.repo, this.branch, file); 91 | } else { 92 | return ""; 93 | } 94 | } 95 | public async getData(file: string) { 96 | const url = this.getUrl(file); 97 | if (url) { 98 | const data = await this.reqFecth(url); 99 | return data; 100 | } 101 | return null; 102 | } 103 | private reqFecth(url: string): Promise { 104 | return new Promise((resolve, reject) => { 105 | // console.log(`req ad: ${url}`); 106 | fetch(url) 107 | .then((res) => { 108 | return res.json(); 109 | }) 110 | .then((data) => { 111 | resolve(data); 112 | }) 113 | .catch((e) => { 114 | resolve(null); 115 | }); 116 | }); 117 | } 118 | } 119 | const cfg = new Config(); 120 | export class GithubMirrorMgr { 121 | mirrors: GithubMirror[] = []; 122 | private _init: boolean = false; 123 | async init() { 124 | if (this._init) { 125 | return; 126 | } 127 | await cfg.init(); 128 | this._init = true; 129 | // 使用国内gitub镜像来达到下载远程配置文件的目的 130 | this.mirrors.push( 131 | new GithubMirror("github", (owner: string, repo: string, branch: string, file: string) => { 132 | return `https://raw.githubusercontent.com/${owner}/${repo}/refs/heads/${branch}/${file}`; 133 | }) 134 | ); 135 | this.mirrors.push( 136 | new GithubMirror("bgithub", (owner: string, repo: string, branch: string, file: string) => { 137 | return `https://raw.bgithub.xyz/${owner}/${repo}/refs/heads/${branch}/${file}`; 138 | }) 139 | ); 140 | this.mirrors.push( 141 | new GithubMirror("kkgithub", (owner: string, repo: string, branch: string, file: string) => { 142 | return `https://raw.kkgithub.com/${owner}/${repo}/refs/heads/${branch}/${file}`; 143 | }) 144 | ); 145 | 146 | this.mirrors.push( 147 | new GithubMirror("xiaohei", (owner: string, repo: string, branch: string, file: string) => { 148 | return `https://raw-githubusercontent.xiaohei.me/${owner}/${repo}/refs/heads/${branch}/${file}`; 149 | }) 150 | ); 151 | 152 | this.mirrors.push( 153 | new GithubMirror("gh-proxy", (owner: string, repo: string, branch: string, file: string) => { 154 | return `https://gh-proxy.com/raw.githubusercontent.com/${owner}/${repo}/refs/heads/${branch}/${file}`; 155 | }) 156 | ); 157 | this.mirrors.push( 158 | new GithubMirror("ghproxy", (owner: string, repo: string, branch: string, file: string) => { 159 | return `https://ghproxy.net/https://raw.githubusercontent.com/${owner}/${repo}/refs/heads/${branch}/${file}`; 160 | }) 161 | ); 162 | } 163 | async getData(file: string): Promise { 164 | if (!this._init) { 165 | return null; 166 | } 167 | this.mirrors.sort((a, b) => b.time - a.time); 168 | for (let i = 0; i < this.mirrors.length; i++) { 169 | const mirror = this.mirrors[i]; 170 | const data = await mirror.getData(file); 171 | if (data) { 172 | const time = new Date().getTime(); 173 | mirror.time = time; 174 | await cfg.save(mirror.name, time); 175 | return data; 176 | } 177 | } 178 | return null; 179 | } 180 | getFileUrl(file: string): string { 181 | if (!this._init) { 182 | debugger; 183 | return null; 184 | } 185 | if (!file) { 186 | return ""; 187 | } 188 | this.mirrors.sort((a, b) => b.time - a.time); 189 | const url = this.mirrors[0].getUrl(file); 190 | return url; 191 | } 192 | } 193 | export const githubMirrorMgr = new GithubMirrorMgr(); 194 | -------------------------------------------------------------------------------- /src/scripts/inject-view/loader.ts: -------------------------------------------------------------------------------- 1 | import CCPlugin from "../../../cc-plugin.config"; 2 | import { githubMirrorMgr } from "./github"; 3 | 4 | export class AdItem { 5 | /** 6 | * 广告的名字 7 | */ 8 | name: string = ""; 9 | /** 10 | * 鼠标悬浮提示 11 | */ 12 | tip: string = ""; 13 | /** 14 | * 分类，目前支持2类：ai绘图、我的插件 15 | */ 16 | type: string = ""; 17 | /** 18 | * 插件的试用地址 19 | */ 20 | try: string | Array<{ name: string; url: string }> = ""; 21 | /** 22 | * 广告的store购买链接 23 | */ 24 | store: string = ""; 25 | /** 26 | * 广告的展示时间，单位s 27 | */ 28 | duration: number = 0; 29 | /** 30 | * 广告展示的位置 31 | */ 32 | where: "popup" | "list" = "list"; 33 | /** 34 | * 广告是否有效 35 | */ 36 | visible: boolean = true; 37 | /** 38 | * 背景图 39 | */ 40 | img: string = ""; 41 | getTryInfos(): Array<{ name: string; url: string; type: string }> { 42 | if (typeof this.try === "string" && this.try) { 43 | return [{ name: this.name, url: this.try, type: this.type }]; 44 | } else if (Array.isArray(this.try)) { 45 | return this.try.map((el) => { 46 | return { name: el.name, url: el.url, type: this.type }; 47 | }); 48 | } 49 | return []; 50 | } 51 | parse(data: AdItem) { 52 | this.name = data.name; 53 | this.store = data.store || ""; 54 | this.parseStore(); 55 | 56 | this.try = data.try || ""; 57 | this.tip = data.tip || ""; 58 | this.type = data.type || ""; 59 | this.duration = data.duration || 0; 60 | this.where = data.where || "popup"; 61 | this.visible = data.visible === false ? false : true; 62 | const img = data.img || ""; 63 | this.img = githubMirrorMgr.getFileUrl(img); 64 | return this; 65 | } 66 | parseStore() { 67 | const flag = "${git}"; 68 | if (this.store.startsWith(flag)) { 69 | const file = this.store.split(flag)[1]; 70 | this.store = githubMirrorMgr.getFileUrl(file); 71 | } 72 | } 73 | } 74 | export enum NotifyButton { 75 | /** 76 | * 用户点击我知道后，就不再显示了 77 | */ 78 | IKnow = "IKnow", 79 | /** 80 | * 前往支持 81 | */ 82 | Go = "Go", 83 | } 84 | export class Notify { 85 | /**通知的id，用来做点击区分的 */ 86 | id: string; 87 | /** 88 | * 通知的标题 89 | */ 90 | title: string; 91 | /** 92 | * 通知的消息 93 | */ 94 | msg: string; 95 | /** 96 | * 点击跳转的url 97 | */ 98 | url: string; 99 | /** 100 | * 截止日期，到截止日期后就不再显示了 101 | * @example 2025/02/24 14:00:00 102 | * @example 2025/02/24 103 | */ 104 | deadTime: string; 105 | /** 106 | * 显示的间隔时间，单位分钟 107 | */ 108 | duration: number = 0; 109 | /** 110 | * 按钮的文本 111 | */ 112 | buttons: NotifyButton[] = []; 113 | parse(data: Notify) { 114 | this.id = data.id || data.url; 115 | this.title = data.title; 116 | this.msg = data.msg; 117 | this.url = data.url; 118 | this.deadTime = data.deadTime || Date.now().toString(); 119 | this.duration = data.duration || 0; 120 | this.buttons = []; 121 | if (data.buttons) { 122 | data.buttons.forEach((btn) => { 123 | [NotifyButton.IKnow, NotifyButton.Go].forEach((btnName) => { 124 | if (btn === btnName) { 125 | this.buttons.push(btnName); 126 | } 127 | }); 128 | }); 129 | } 130 | } 131 | } 132 | export class AdData { 133 | desc: string = ""; 134 | /** 135 | * 是否启用广告 136 | */ 137 | valid: boolean = false; 138 | /** 139 | * 多少分钟不再展示，单位分钟，默认10分钟 140 | */ 141 | showDuration: number = 10; 142 | /** 143 | * 底部广告多少秒滚动一次 144 | */ 145 | scrollDuration: number = 3; 146 | /** 147 | * 将位置随机打乱，保证用户每次看到的插件数量不一样，提高转换率 148 | */ 149 | randomIndex: boolean = false; 150 | /** 151 | * 展示的广告数量，-1为所有 152 | */ 153 | showCount: number = -1; 154 | /** 155 | * 类型对应文本 156 | */ 157 | keys: Record = {}; 158 | data: Array = []; 159 | /** 160 | * 通知的数据 161 | */ 162 | notify: Notify[] = []; 163 | parse(data: AdData) { 164 | this.desc = data.desc; 165 | this.valid = !!data.valid; 166 | this.showDuration = data.showDuration || 10; 167 | this.scrollDuration = data.scrollDuration || 3; 168 | this.randomIndex = !!data.randomIndex; 169 | this.showCount = data.showCount || -1; 170 | this.keys = data.keys || {}; 171 | if (data.data) { 172 | if (this.randomIndex) { 173 | data.data.sort(() => Math.random() - 0.5); 174 | } 175 | data.data.forEach((el) => { 176 | if (this.showCount !== -1 && this.data.length >= this.showCount) { 177 | return; 178 | } 179 | const item = new AdItem().parse(el); 180 | if (item.visible) { 181 | this.data.push(item); 182 | } 183 | }); 184 | } 185 | if (data.notify) { 186 | this.notify = data.notify.map((el) => { 187 | const notify = new Notify(); 188 | notify.parse(el); 189 | return notify; 190 | }); 191 | } 192 | } 193 | sortByName() { 194 | this.data.sort((a, b) => { 195 | return a.name.localeCompare(b.name); 196 | }); 197 | } 198 | } 199 | 200 | export async function getAdData(): Promise { 201 | await githubMirrorMgr.init(); 202 | const data = await githubMirrorMgr.getData(`ad-${CCPlugin.manifest.version}.json`); 203 | if (data) { 204 | const ad = new AdData(); 205 | ad.parse(data as AdData); 206 | return ad; 207 | } 208 | return null; 209 | } 210 | -------------------------------------------------------------------------------- /src/scripts/inject-view/memory-draw.ts: -------------------------------------------------------------------------------- 1 | export class Memory { 2 | public time: number = 0; 3 | public jsHeapSizeLimit: number = 0; 4 | public totalJSHeapSize: number = 0; 5 | public usedJSHeapSize: number = 0; 6 | constructor() { 7 | this.update(); 8 | } 9 | update() { 10 | const memory = window.performance["memory"]; 11 | if (memory) { 12 | this.time = Date.now(); 13 | this.jsHeapSizeLimit = memory.jsHeapSizeLimit; 14 | this.totalJSHeapSize = memory.totalJSHeapSize; 15 | this.usedJSHeapSize = memory.usedJSHeapSize; 16 | } 17 | } 18 | } 19 | 20 | export class MemoryDraw { 21 | private canvas: HTMLCanvasElement; 22 | private ctx: CanvasRenderingContext2D; 23 | private width: number = 0; 24 | private height: number = 0; 25 | private memoryHistory: Memory[] = []; 26 | init(canvas: HTMLCanvasElement) { 27 | this.canvas = canvas; 28 | this.ctx = canvas.getContext("2d"); 29 | this.width = canvas.width; 30 | this.height = canvas.height; 31 | this.clearBg(); 32 | this.initTimer(); 33 | } 34 | private initTimer() { 35 | setInterval(() => { 36 | const m = new Memory(); 37 | this.memoryHistory.push(m); 38 | this.update(); 39 | }, 300); 40 | } 41 | private update() { 42 | this.clearBg(); 43 | for (let i = 0; i < this.memoryHistory.length; i++) { 44 | const m = this.memoryHistory[i]; 45 | this.drawLine(i); 46 | } 47 | } 48 | private clearBg() { 49 | this.ctx.clearRect(0, 0, this.width, this.height); 50 | this.ctx.fillStyle = "rgba(0, 0, 0, 0.5)"; 51 | this.ctx.fillRect(0, 0, this.width, this.height); 52 | } 53 | private lineWidth = 10; 54 | private drawLine(i: number) { 55 | this.ctx.fillStyle = "rgba(255, 37, 37, 0.5)"; 56 | this.ctx.fillRect(0, 0, i * this.lineWidth, this.height / 2); 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /src/scripts/inject-view/memory.vue: -------------------------------------------------------------------------------- 1 | 11 | 39 | 63 | -------------------------------------------------------------------------------- /src/scripts/inject-view/res/close.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/scripts/inject-view/res/left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/scripts/inject-view/res/right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/scripts/inject-view/shortkeys.vue: -------------------------------------------------------------------------------- 1 | 9 | 63 | 70 | -------------------------------------------------------------------------------- /src/scripts/inject-view/store.ts: -------------------------------------------------------------------------------- 1 | import profile from "cc-plugin/src/ccp/profile"; 2 | import { defineStore } from "pinia"; 3 | import { ref, toRaw } from "vue"; 4 | import pluginConfig from "../../../cc-plugin.config"; 5 | export class ConfigData { 6 | /** 7 | * 用户拖动的位置 8 | */ 9 | pos: number = 0; 10 | /** 11 | * 是否自动隐藏 12 | */ 13 | autoHide: boolean = true; 14 | /** 15 | * 是否只拾取顶部元素 16 | */ 17 | pickTop: boolean = true; 18 | shortKeyPick: string = "Escape"; 19 | shortKeyGameStep: string = "F8"; 20 | shortKeyGamePauseResume: string = "Space"; 21 | shortKeyGameFresh: string = "Backquote"; 22 | } 23 | 24 | export const appStore = defineStore("app", () => { 25 | const config = ref(new ConfigData()); 26 | return { 27 | config, 28 | init() { 29 | profile.Adaptation.init(pluginConfig); 30 | profile.init(new ConfigData(), pluginConfig); 31 | const data = profile.load(`${pluginConfig.manifest.name}-assistant.json`) as ConfigData; 32 | config.value.autoHide = data.autoHide; 33 | config.value.pos = data.pos; 34 | config.value.pickTop = data.pickTop; 35 | config.value.shortKeyPick = data.shortKeyPick; 36 | config.value.shortKeyGameStep = data.shortKeyGameStep; 37 | config.value.shortKeyGamePauseResume = data.shortKeyGamePauseResume; 38 | config.value.shortKeyGameFresh = data.shortKeyGameFresh; 39 | }, 40 | save() { 41 | const cfg = toRaw(config.value); 42 | profile.save(cfg); 43 | }, 44 | }; 45 | }); 46 | -------------------------------------------------------------------------------- /src/scripts/inject-view/util.ts: -------------------------------------------------------------------------------- 1 | import { GA_EventName } from "../../ga/type"; 2 | import { DocumentEvent, GoogleAnalyticsData } from "../const"; 3 | 4 | export function sendGaEvent(event: GA_EventName, params: string = "") { 5 | const detail = { event, params } as GoogleAnalyticsData; 6 | const e = new CustomEvent(DocumentEvent.GoogleAnalytics, { detail }); 7 | document.dispatchEvent(e); 8 | } 9 | 10 | export function transformSize(size: number) { 11 | if (!size) return "0B"; 12 | size = parseInt(size.toString()); 13 | if (size < 1024) { 14 | return size + "B"; 15 | } 16 | size = size / 1024; 17 | if (size < 1024) { 18 | return size.toFixed(2) + "KB"; 19 | } 20 | size = size / 1024; 21 | if (size < 1024) { 22 | return size.toFixed(2) + "MB"; 23 | } 24 | size = size / 1024; 25 | if (size < 1024) { 26 | return size.toFixed(2) + "GB"; 27 | } 28 | return size; 29 | } 30 | -------------------------------------------------------------------------------- /src/scripts/inject-view/web-test.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 这个是web测试inject_view的入口，实际chrome插件不应该走这个界面 3 | */ 4 | import ccui from "@xuyanfeng/cc-ui"; 5 | import "@xuyanfeng/cc-ui/dist/ccui.css"; 6 | import "@xuyanfeng/cc-ui/iconfont/iconfont.css"; 7 | import CCP from "cc-plugin/src/ccp/entry-render"; 8 | import { createPinia } from "pinia"; 9 | import { createApp } from "vue"; 10 | import pluginConfig from "../../../cc-plugin.config"; 11 | import App from "./app.vue"; 12 | export default CCP.init(pluginConfig, { 13 | ready: function (rootElement: any, args: any) { 14 | const app = createApp(App); 15 | app.use(createPinia()); 16 | app.use(ccui); 17 | app.mount(rootElement); 18 | }, 19 | }); 20 | -------------------------------------------------------------------------------- /src/scripts/inject/break.ts: -------------------------------------------------------------------------------- 1 | export const breakArray: Array<{ node: any; key: string; fn: Function }> = []; 2 | 3 | export function addBreak(node: any, key: string, fn: Function) { 4 | breakArray.push({ node, key, fn }); 5 | } 6 | export function cleanBreak() { 7 | breakArray.forEach((el) => { 8 | const { node, key, fn } = el; 9 | if (node && node.isValid) { 10 | node.off(key, fn); 11 | } 12 | }); 13 | } 14 | -------------------------------------------------------------------------------- /src/scripts/inject/code-hint.ts: -------------------------------------------------------------------------------- 1 | import { FunctionInfo, TreeData } from "../../views/devtools/data"; 2 | import { ShowCode } from "./types"; 3 | declare const cc: any; 4 | 5 | function getKey(code: ShowCode): string { 6 | const map = {}; 7 | map[ShowCode.TouchStart] = cc.Node.EventType.TOUCH_START; 8 | map[ShowCode.TouchMove] = cc.Node.EventType.TOUCH_MOVE; 9 | map[ShowCode.TouchEnd] = cc.Node.EventType.TOUCH_END; 10 | map[ShowCode.TouchCancel] = cc.Node.EventType.TOUCH_CANCEL; 11 | if (cc.Button?.EventType?.CLICK) { 12 | map[ShowCode.ButtonClick] = cc.Button.EventType.CLICK; 13 | } 14 | const key = map[code]; 15 | return key || ""; 16 | } 17 | 18 | function getButton(node: any, fillFn: boolean): FunctionInfo[] { 19 | const button = node.getComponent(cc.Button); 20 | if (!button) { 21 | return []; 22 | } 23 | if (!button.clickEvents || button.clickEvents.length === 0) { 24 | return []; 25 | } 26 | const arr: Array<{ handler: string; target: any; _componentId: string }> = button.clickEvents; 27 | const ret: FunctionInfo[] = []; 28 | for (let i = 0; i < arr.length; i++) { 29 | const item = arr[i]; 30 | if (!item || !item.target) { 31 | continue; 32 | } 33 | const compType = cc.js._getClassById(item._componentId); 34 | if (!compType) { 35 | continue; 36 | } 37 | if (!item.target.getComponent) { 38 | continue; 39 | } 40 | const comp = item.target.getComponent(compType); 41 | if (!comp || !cc.isValid(comp)) { 42 | continue; 43 | } 44 | const handler = comp[item.handler]; 45 | if (typeof handler !== "function") { 46 | continue; 47 | } 48 | const info = getFn(handler, fillFn); 49 | info.name = item.handler; 50 | ret.push(info); 51 | } 52 | return ret; 53 | } 54 | 55 | export function getCallbacks(node: any, code: ShowCode, fillFn: boolean, v2: boolean): FunctionInfo[] { 56 | if (node instanceof cc.Scene) { 57 | return []; 58 | } 59 | if (code === ShowCode.ButtonClickEvents) { 60 | return getButton(node, fillFn); 61 | } else { 62 | if (v2) { 63 | return getTouchV2(node, code, fillFn); 64 | } else { 65 | return getTouchV3(node, code, fillFn); 66 | } 67 | } 68 | } 69 | function getTouchV2(node: any, code: ShowCode, fillFn: boolean): FunctionInfo[] { 70 | const key = getKey(code); 71 | if (!key) { 72 | return []; 73 | } 74 | if (!node._bubblingListeners) { 75 | return []; 76 | } 77 | if (!node._bubblingListeners._callbackTable) { 78 | return []; 79 | } 80 | const tables = node._bubblingListeners._callbackTable[key]; 81 | if (!tables) { 82 | return []; 83 | } 84 | let infos: Array = tables.callbackInfos; 85 | if (Array.isArray(infos)) { 86 | // 过滤掉空的 87 | infos = infos.filter((fun) => { 88 | return !!fun; 89 | }); 90 | } 91 | if (!infos || infos.length === 0) { 92 | return []; 93 | } 94 | return infos.map((fun) => { 95 | // @ts-ignore 96 | return getFn(fun.callback, fillFn); 97 | }); 98 | } 99 | function getTouchV3(node: any, code: ShowCode, fillFn: boolean): FunctionInfo[] { 100 | const key = getKey(code); 101 | if (!key) { 102 | return []; 103 | } 104 | if (!node._eventProcessor) { 105 | return []; 106 | } 107 | if (!node._eventProcessor.bubblingTarget) { 108 | return []; 109 | } 110 | const tables = node._eventProcessor.bubblingTarget._callbackTable[key]; 111 | if (!tables) { 112 | return []; 113 | } 114 | let infos: Array = tables.callbackInfos; 115 | if (Array.isArray(infos)) { 116 | // 过滤掉空的 117 | infos = infos.filter((fun) => { 118 | return !!fun; 119 | }); 120 | } 121 | if (!infos || infos.length === 0) { 122 | return []; 123 | } 124 | return infos.map((fun) => { 125 | // @ts-ignore 126 | return getFn(fun.callback, fillFn); 127 | }); 128 | } 129 | 130 | function getFn(item: Function, fillFn: boolean): FunctionInfo { 131 | let desc = item.toString(); 132 | const max = 50; 133 | if (desc.length > max) { 134 | // desc = desc.substr(0, max) + "..."; 135 | } 136 | const ret: FunctionInfo = { 137 | name: item.name || ANONYMOUS, 138 | desc, 139 | fn: fillFn ? item : null, 140 | }; 141 | return ret; 142 | } 143 | export const ANONYMOUS = "anonymous"; 144 | 145 | export function calcCodeHint(node: any, data: TreeData, v2: boolean) { 146 | data.codeTouchStart = getCallbacks(node, ShowCode.TouchStart, false, v2); 147 | data.codeTouchMove = getCallbacks(node, ShowCode.TouchMove, false, v2); 148 | data.codeTouchEnd = getCallbacks(node, ShowCode.TouchEnd, false, v2); 149 | data.codeTouchCancel = getCallbacks(node, ShowCode.TouchCancel, false, v2); 150 | data.codeButtonClick = getCallbacks(node, ShowCode.ButtonClick, false, v2); 151 | data.codeButtonEvents = getCallbacks(node, ShowCode.ButtonClickEvents, false, v2); 152 | } 153 | -------------------------------------------------------------------------------- /src/scripts/inject/connect-me.ts: -------------------------------------------------------------------------------- 1 | export function help() { 2 | debugger; 3 | } 4 | -------------------------------------------------------------------------------- /src/scripts/inject/enumConfig.ts: -------------------------------------------------------------------------------- 1 | import { help } from "./connect-me"; 2 | 3 | declare const cc: any; 4 | 5 | export function getEnumListConfig() { 6 | const enumConfig: Array<{ 7 | type: any; 8 | list: Array<{ 9 | key: string; 10 | values: () => Array<{ name: string; value: number }>; 11 | }>; 12 | }> = [ 13 | { 14 | type: cc.Node, 15 | list: [ 16 | { 17 | key: "layer", 18 | values() { 19 | return cc.Layers.BitMask.__bitmask__; 20 | }, 21 | }, 22 | ], 23 | }, 24 | { 25 | type: cc.Widget, 26 | list: [ 27 | { 28 | key: "alignMode", 29 | values: () => { 30 | return cc.Widget.AlignMode.__enums__; 31 | }, 32 | }, 33 | ], 34 | }, 35 | { 36 | type: cc.Button, 37 | list: [ 38 | { 39 | key: "transition", 40 | values: () => { 41 | return cc.Button.Transition.__enums__; 42 | }, 43 | }, 44 | ], 45 | }, 46 | { 47 | type: cc.Sprite, 48 | list: [ 49 | { 50 | key: "sizeMode", 51 | values: () => { 52 | return cc.Sprite.SizeMode.__enums__; 53 | }, 54 | }, 55 | { 56 | key: "type", 57 | values: () => { 58 | return cc.Sprite.Type.__enums__; 59 | }, 60 | }, 61 | ], 62 | }, 63 | { 64 | type: cc.Mask, 65 | list: [ 66 | { 67 | key: "type", 68 | values() { 69 | return cc.Mask.Type.__enums__; 70 | }, 71 | }, 72 | ], 73 | }, 74 | { 75 | type: cc.Label, 76 | list: [ 77 | { 78 | key: "cacheMode", 79 | values() { 80 | return cc.Label.CacheMode.__enums__; 81 | }, 82 | }, 83 | { 84 | key: "overflow", 85 | values() { 86 | return cc.Label.Overflow.__enums__; 87 | }, 88 | }, 89 | { 90 | key: "verticalAlign", 91 | values() { 92 | return cc.Label.VerticalAlign.__enums__; 93 | }, 94 | }, 95 | { 96 | key: "horizontalAlign", 97 | values() { 98 | return cc.Label.HorizontalAlign.__enums__; 99 | }, 100 | }, 101 | ], 102 | }, 103 | { 104 | type: cc.Slider, 105 | list: [ 106 | { 107 | key: "direction", 108 | values() { 109 | return cc.Slider.Direction.__enums__; 110 | }, 111 | }, 112 | ], 113 | }, 114 | { 115 | type: cc.PageView, 116 | list: [ 117 | { 118 | key: "direction", 119 | values() { 120 | return cc.PageView.Direction.__enums__; 121 | }, 122 | }, 123 | { 124 | key: "sizeMode", 125 | values() { 126 | return cc.PageView.SizeMode.__enums__; 127 | }, 128 | }, 129 | ], 130 | }, 131 | { 132 | type: cc.PageViewIndicator, 133 | list: [ 134 | { 135 | key: "direction", 136 | values() { 137 | return cc.PageViewIndicator.Direction.__enums__; 138 | }, 139 | }, 140 | ], 141 | }, 142 | { 143 | type: cc.RichText, 144 | list: [ 145 | { 146 | key: "cacheMode", 147 | values() { 148 | return cc.Label.CacheMode.__enums__; 149 | }, 150 | }, 151 | { 152 | key: "horizontalAlign", 153 | values() { 154 | return cc.RichText.HorizontalAlign.__enums__; 155 | }, 156 | }, 157 | { 158 | key: "verticalAlign", 159 | values() { 160 | return cc.RichText.VerticalAlign.__enums__; 161 | }, 162 | }, 163 | ], 164 | }, 165 | { 166 | type: cc.ProgressBar, 167 | list: [ 168 | { 169 | key: "mode", 170 | values() { 171 | return cc.ProgressBar.Mode.__enums__; 172 | }, 173 | }, 174 | ], 175 | }, 176 | { 177 | type: cc.Scrollbar, 178 | list: [ 179 | { 180 | key: "direction", 181 | values() { 182 | return cc.Scrollbar.Direction.__enums__; 183 | }, 184 | }, 185 | ], 186 | }, 187 | { 188 | type: cc.EditBox, 189 | list: [ 190 | { 191 | key: "inputMode", 192 | values() { 193 | return cc.EditBox.InputMode.__enums__; 194 | }, 195 | }, 196 | { 197 | key: "inputFlag", 198 | values() { 199 | return cc.EditBox.InputFlag.__enums__; 200 | }, 201 | }, 202 | ], 203 | }, 204 | { 205 | type: cc.Layout, 206 | list: [ 207 | { 208 | key: "resizeMode", 209 | values() { 210 | return cc.Layout.ResizeMode.__enums__; 211 | }, 212 | }, 213 | { 214 | key: "type", 215 | values() { 216 | return cc.Layout.Type.__enums__; 217 | }, 218 | }, 219 | { 220 | key: "startAxis", 221 | values() { 222 | return cc.Layout.AxisDirection.__enums__; 223 | }, 224 | }, 225 | { 226 | key: "horizontalDirection", 227 | values() { 228 | return cc.Layout.HorizontalDirection.__enums__; 229 | }, 230 | }, 231 | { 232 | key: "verticalDirection", 233 | values() { 234 | return cc.Layout.VerticalDirection.__enums__; 235 | }, 236 | }, 237 | ], 238 | }, 239 | { 240 | type: cc.VideoPlayer, 241 | list: [ 242 | { 243 | key: "resourceType", 244 | values() { 245 | return cc.VideoPlayer.ResourceType.__enums__; 246 | }, 247 | }, 248 | ], 249 | }, 250 | { 251 | type: cc.Graphics, 252 | list: [ 253 | { 254 | key: "lineJoin", 255 | values() { 256 | return cc.Graphics.LineJoin.__enums__; 257 | }, 258 | }, 259 | { 260 | key: "lineCap", 261 | values() { 262 | return cc.Graphics.LineCap.__enums__; 263 | }, 264 | }, 265 | ], 266 | }, 267 | { 268 | type: cc.Camera, 269 | list: [ 270 | { 271 | key: "clearFlags", 272 | values() { 273 | return adaptEnum( 274 | cc.Camera.ClearFlags || // TODO: 2x是个掩码，不是枚举 275 | cc.Camera.ClearFlag // 3.x是枚举 276 | ); 277 | }, 278 | }, 279 | { 280 | key: "projection", 281 | values() { 282 | return cc.Camera.ProjectionType.__enums__; 283 | }, 284 | }, 285 | { 286 | key: "aperture", 287 | values() { 288 | return cc.Camera.Aperture.__enums__; 289 | }, 290 | }, 291 | { 292 | key: "shutter", 293 | values() { 294 | return cc.Camera.Shutter.__enums__; 295 | }, 296 | }, 297 | { 298 | key: "iso", 299 | values() { 300 | return cc.Camera.ISO.__enums__; 301 | }, 302 | }, 303 | // TODO: 有时间再优化可以复选的枚举选项 304 | // { 305 | // key: "visibility", 306 | // values() { 307 | // return cc.Layers.BitMask.__bitmask__; 308 | // }, 309 | // }, 310 | ], 311 | }, 312 | ]; 313 | return enumConfig; 314 | } 315 | 316 | function adaptEnum(list: any): Array<{ name: string; value: number }> { 317 | const target = list.__enums__; 318 | if (!target) { 319 | const arr = Object.keys(list).map((key) => { 320 | return { 321 | name: key, 322 | value: list[key], 323 | }; 324 | }); 325 | return arr; 326 | } 327 | if (!Array.isArray(target)) { 328 | help(); 329 | } 330 | return target; 331 | } 332 | -------------------------------------------------------------------------------- /src/scripts/inject/event.ts: -------------------------------------------------------------------------------- 1 | import { debugLog, Msg, Page, PluginEvent } from "../../core/types"; 2 | import { GA_EventName } from "../../ga/type"; 3 | import { DocumentEvent, GoogleAnalyticsData } from "../const"; 4 | import { Terminal } from "../terminal"; 5 | 6 | export class InjectEvent { 7 | protected terminal = new Terminal("Inject "); 8 | constructor() { 9 | document.addEventListener(DocumentEvent.Content2Inject, (event: CustomEvent) => { 10 | const pluginEvent: PluginEvent = PluginEvent.create(event.detail); 11 | debugLog && console.log(...this.terminal.chunkMessage(pluginEvent.toChunk())); 12 | this.onMessage(pluginEvent); 13 | }); 14 | } 15 | onMessage(data: PluginEvent) {} 16 | sendMsgToContent(msg: Msg, data: any) { 17 | const detail = new PluginEvent(Page.Inject, Page.Content, msg, data); 18 | debugLog && console.log(...this.terminal.chunkSend(detail.toChunk())); 19 | const event = new CustomEvent(DocumentEvent.Inject2Content, { detail }); 20 | document.dispatchEvent(event); 21 | } 22 | sendEngineVersion(version: string) { 23 | const detail = version; 24 | const event = new CustomEvent(DocumentEvent.EngineVersion, { detail }); 25 | document.dispatchEvent(event); 26 | } 27 | sendAppVersion(version: string) { 28 | const detail = { event: GA_EventName.AppVersion, params: version } as GoogleAnalyticsData; 29 | const event = new CustomEvent(DocumentEvent.GoogleAnalytics, { detail }); 30 | document.dispatchEvent(event); 31 | } 32 | sendUrl(url: string) { 33 | const detail = { event: GA_EventName.GameUrl, params: url } as GoogleAnalyticsData; 34 | const event = new CustomEvent(DocumentEvent.GoogleAnalytics, { detail }); 35 | document.dispatchEvent(event); 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /src/scripts/inject/everything.ts: -------------------------------------------------------------------------------- 1 | import { Msg } from "../../core/types"; 2 | import { Inspector } from "./inspector"; 3 | 4 | // 和everything插件交互 5 | export class Everything { 6 | // 支持多开creator，遍历everything插件的server 7 | private inspector: Inspector | null = null; 8 | init(inspector: Inspector) { 9 | this.inspector = inspector; 10 | } 11 | test() { 12 | const port = 2505; 13 | fetch(`http://localhost:${port}/test`) 14 | .then((e) => {}) 15 | .catch((e) => { 16 | console.log(e); 17 | }); 18 | } 19 | open(prefabUUID: string) { 20 | console.log("open prefab：", prefabUUID); 21 | // const url = new URL(window.location.href); 22 | // const port = Number(url.port) - 1000 || 7456; 23 | const port = 2505; // 暂时拿不到编辑器api，暂时写死 24 | const url = `http://localhost:${port}/open?uuid=${prefabUUID}`; 25 | // console.log("open url：", url); 26 | fetch(url) 27 | .then((e) => { 28 | console.log(e); 29 | }) 30 | .catch((e) => { 31 | this.inspector.sendMsgToContent(Msg.ResponseBuyEverything, {}); 32 | }); 33 | } 34 | } 35 | export const everything = new Everything(); 36 | -------------------------------------------------------------------------------- /src/scripts/inject/hint/adapter.ts: -------------------------------------------------------------------------------- 1 | declare const cc: any; 2 | export interface DrawOptions { 3 | fill: boolean; 4 | fillColor: string; 5 | stroke: boolean; 6 | strokeColor: string; 7 | } 8 | export class Point { 9 | x: number; 10 | y: number; 11 | constructor(x: number, y: number) { 12 | this.x = x; 13 | this.y = y; 14 | } 15 | } 16 | export class RectPoints { 17 | points: Point[] = []; 18 | get len() { 19 | return this.points.length; 20 | } 21 | add(point: Point) { 22 | this.points.push(point); 23 | } 24 | at(index: number) { 25 | return this.points[index]; 26 | } 27 | test(width: number, height: number) { 28 | this.points.push(new Point(0, 0)); 29 | this.points.push(new Point(width, 0)); 30 | this.points.push(new Point(width, height)); 31 | this.points.push(new Point(0, height)); 32 | } 33 | } 34 | export class HintAdapter { 35 | protected draw = null; 36 | constructor() {} 37 | resetIndex() { 38 | throw new Error("not implemented"); 39 | } 40 | getRectPoints(node: any): RectPoints | null { 41 | throw new Error("not implemented"); 42 | } 43 | clear() { 44 | if (this.draw) { 45 | this.draw.clear(); 46 | } 47 | } 48 | convertMousePos(event: MouseEvent, canvas: HTMLCanvasElement): { x: number; y: number } { 49 | throw new Error("not implemented"); 50 | } 51 | hitTest(node: any, x: number, y: number): boolean { 52 | throw new Error("not implemented"); 53 | } 54 | initDrawNode() { 55 | if (this.draw && !this.draw.isValid) { 56 | this.draw = null; 57 | } 58 | if (this.draw) { 59 | return; 60 | } 61 | const scene = cc.director.getScene(); 62 | if (!scene) { 63 | return; 64 | } 65 | let node = new cc.Node("draw-node"); 66 | this.draw = node.addComponent(cc.Graphics || cc.GraphicsComponent); 67 | if (!this.addDraw(scene, node)) { 68 | node.destroy(); 69 | this.draw = null; 70 | } 71 | } 72 | public isDrawValid() { 73 | return this.draw && this.draw.isValid; 74 | } 75 | protected addDraw(scene: any, node: any): boolean { 76 | throw new Error("not implemented"); 77 | } 78 | public drawRect(points: RectPoints, opts: DrawOptions) { 79 | this.draw.lineWidth = 2; 80 | for (let i = 0; i < points.len; i++) { 81 | const p = points.at(i); 82 | if (i === 0) { 83 | this.draw.moveTo(p.x, p.y); 84 | } else { 85 | this.draw.lineTo(p.x, p.y); 86 | } 87 | } 88 | if (points.len) { 89 | this.draw.close(); 90 | } 91 | if (opts.stroke) { 92 | this.draw.strokeColor = new cc.Color().fromHEX(opts.strokeColor); 93 | this.draw.stroke(); 94 | } 95 | if (opts.fill) { 96 | this.draw.fillColor = new cc.Color().fromHEX(opts.fillColor); 97 | this.draw.fill(); 98 | } 99 | } 100 | } 101 | -------------------------------------------------------------------------------- /src/scripts/inject/hint/hint-v2.ts: -------------------------------------------------------------------------------- 1 | import { HintAdapter, Point, RectPoints } from "./adapter"; 2 | declare const cc: any; 3 | 4 | export class HintV2 extends HintAdapter { 5 | constructor() { 6 | super(); 7 | } 8 | protected addDraw(scene: any, node: any): boolean { 9 | scene.addChild(node); 10 | return true; 11 | } 12 | private canvasBoundingRect = { 13 | left: 0, 14 | top: 0, 15 | width: 0, 16 | height: 0, 17 | adjustedTop: 0, 18 | adjustedLeft: 0, 19 | }; 20 | private _updateCanvasBoundingRect() { 21 | // @ts-ignore 22 | const element: any = cc.game.canvas; 23 | var docElem = document.documentElement; 24 | var leftOffset = window.pageXOffset - docElem.clientLeft; 25 | var topOffset = window.pageYOffset - docElem.clientTop; 26 | if (element.getBoundingClientRect) { 27 | var box = element.getBoundingClientRect(); 28 | this.canvasBoundingRect.left = box.left + leftOffset; 29 | this.canvasBoundingRect.top = box.top + topOffset; 30 | this.canvasBoundingRect.width = box.width; 31 | this.canvasBoundingRect.height = box.height; 32 | } else if (element instanceof HTMLCanvasElement) { 33 | this.canvasBoundingRect.left = leftOffset; 34 | this.canvasBoundingRect.top = topOffset; 35 | this.canvasBoundingRect.width = element.width; 36 | this.canvasBoundingRect.height = element.height; 37 | } else { 38 | this.canvasBoundingRect.left = leftOffset; 39 | this.canvasBoundingRect.top = topOffset; 40 | this.canvasBoundingRect.width = parseInt(element.style.width); 41 | this.canvasBoundingRect.height = parseInt(element.style.height); 42 | } 43 | } 44 | getPointByEvent(event: MouseEvent) { 45 | this._updateCanvasBoundingRect(); 46 | if (event.pageX != null) 47 | //not avalable in <= IE8 48 | return { x: event.pageX, y: event.pageY }; 49 | 50 | this.canvasBoundingRect.left -= document.body.scrollLeft; 51 | this.canvasBoundingRect.top -= document.body.scrollTop; 52 | 53 | return { x: event.clientX, y: event.clientY }; 54 | } 55 | convertMousePos(event: MouseEvent, canvas: HTMLCanvasElement): { x: number; y: number } { 56 | let location = this.getPointByEvent(event); 57 | // let p = cc.view._convertMouseToLocationInView(location, this.canvasBoundingRect); 58 | let p = cc.view.convertToLocationInView(location.x, location.y, this.canvasBoundingRect); 59 | let scaleX = cc.view._scaleX; 60 | let scaleY = cc.view._scaleY; 61 | let viewport = cc.view._viewportRect; 62 | let x = (p.x - viewport.x) / scaleX; 63 | let y = (p.y - viewport.y) / scaleY; 64 | 65 | // let position = cc.v2(event.offsetX, event.offsetY); 66 | // let size = cc.view.getDesignResolutionSize(); 67 | // let rect = { left: 0, top: 0, width: size.width, height: size.height }; 68 | // cc.view._convertMouseToLocationInView(position, rect); 69 | // let wordPos = cc.v2(); 70 | // cc.Camera.main.getScreenToWorldPoint(position, wordPos); 71 | 72 | return { x, y }; 73 | } 74 | hitTest(node: any, x: number, y: number): boolean { 75 | // let rect = item.getBoundingBox(); 76 | // let p = item.parent.convertToNodeSpaceAR(wordPos); 77 | // if (rect.contains(p)) { 78 | // return item; 79 | // } 80 | const mask = this._searchComponentsInParent(node, cc.Mask); 81 | const b = node._hitTest(cc.v2(x, y), { mask }); 82 | return b; 83 | } 84 | private _searchComponentsInParent(node: any, comp: any) { 85 | if (comp) { 86 | let index = 0; 87 | let list = null; 88 | for (var curr = node; curr && cc.Node.isNode(curr); curr = curr._parent, ++index) { 89 | if (curr.getComponent(comp)) { 90 | let next = { 91 | index: index, 92 | node: curr, 93 | }; 94 | 95 | if (list) { 96 | list.push(next); 97 | } else { 98 | list = [next]; 99 | } 100 | } 101 | } 102 | 103 | return list; 104 | } 105 | 106 | return null; 107 | } 108 | resetIndex(): void { 109 | const node = this.draw.node; 110 | node.zIndex = node.parent.children.length; 111 | } 112 | getRectPoints(node: any): RectPoints | null { 113 | const points: RectPoints = new RectPoints(); 114 | const { anchorX, anchorY, width, height } = node; 115 | const x = -anchorX * width; 116 | const y = -anchorY * height; 117 | const matrixm = node._worldMatrix.m; 118 | const m00 = matrixm[0], 119 | m01 = matrixm[1], 120 | m04 = matrixm[4], 121 | m05 = matrixm[5], 122 | m12_tx = matrixm[12], 123 | m13_ty = matrixm[13]; 124 | [ 125 | new Point(x, y), // 126 | new Point(x + width, y), 127 | new Point(x + width, y + height), 128 | new Point(x, y + height), 129 | ].forEach(({ x, y }: Point) => { 130 | const worldX = x * m00 + y * m04 + m12_tx; // x 131 | const worldY = x * m01 + y * m05 + m13_ty; // y 132 | const pos = this.draw.node.convertToNodeSpaceAR(cc.v2(worldX, worldY)); 133 | points.add(new Point(pos.x, pos.y)); 134 | }); 135 | return points; 136 | } 137 | } 138 | -------------------------------------------------------------------------------- /src/scripts/inject/hint/hint-v3.ts: -------------------------------------------------------------------------------- 1 | import { HintAdapter, Point, RectPoints } from "./adapter"; 2 | declare const cc: any; 3 | export class HintV3 extends HintAdapter { 4 | resetIndex(): void { 5 | if (this.inspectorCanvas) { 6 | const len = this.inspectorCanvas.parent.children.length; 7 | this.inspectorCanvas.setSiblingIndex(len); 8 | } 9 | } 10 | private get transformComponent() { 11 | return cc.UITransformComponent || cc.UITransform; 12 | } 13 | hitTest(node: any, x: number, y: number): boolean { 14 | if (node === this.inspectorCanvas) { 15 | return false; 16 | } 17 | if (node.getComponent(cc.Canvas)) { 18 | // 因为Canvas会全屏，所以暂时不拾取，会干扰体验 19 | return false; 20 | } 21 | const tr = node.getComponent(this.transformComponent); 22 | if (tr) { 23 | const size = cc.view.getVisibleSize(); 24 | if (tr.width >= size.width || tr.height >= size.height) { 25 | // 节点的区域非常大，并且没有渲染组件，在界面上看不到任何内容，也忽略掉 26 | // 有些背景遮罩使用的是单色透明图片，这种情况暂时没有好办法过滤掉 27 | const renderComp = [cc.Sprite, cc.Label].find((comp) => node.getComponent(comp)); 28 | if (!renderComp) { 29 | return false; 30 | } 31 | } 32 | } 33 | 34 | let hitTest = null; 35 | if (tr) { 36 | if (tr.hitTest) { 37 | hitTest = tr.hitTest.bind(tr); 38 | } else if (tr.isHit) { 39 | // TODO: 3.3.1使用的是这个接口，hitTest有问题，有人反馈再说修复，老版本暂不花费太多精力 40 | hitTest = tr.isHit.bind(tr); 41 | } 42 | } 43 | if (hitTest) { 44 | let b = hitTest({ x, y }, 0); 45 | return b; 46 | } else { 47 | return false; 48 | } 49 | } 50 | convertMousePos(event: MouseEvent, canvas: HTMLCanvasElement): { x: number; y: number } { 51 | const rect = canvas.getBoundingClientRect(); 52 | let x = event.clientX - rect.x; 53 | let y = rect.y + rect.height - event.clientY; 54 | x *= window.devicePixelRatio; 55 | y *= window.devicePixelRatio; 56 | return { x, y }; 57 | } 58 | /** 59 | * 这种方式能够获取到优先绘制的canvas，也能保证线框在顶部，但是方案不完美，会受到node.layer的影响 60 | */ 61 | private getCanvas(scene: any) { 62 | const canvasArray: Array<{ canvas: any; index: number }> = []; 63 | scene.walk((item: any) => { 64 | if (cc.Canvas) { 65 | const comp = item.getComponent(cc.Canvas); 66 | if (comp) { 67 | const idx = comp.cameraComponent?.priority || 0; 68 | canvasArray.push({ canvas: comp, index: idx }); 69 | } 70 | } 71 | }); 72 | if (canvasArray.length) { 73 | canvasArray.sort((a, b) => a.index - b.index); 74 | return canvasArray[0].canvas.node; 75 | } 76 | return null; 77 | } 78 | private inspectorCanvas: any = null; 79 | protected addDraw(scene: any, graphicsNode: any): boolean { 80 | graphicsNode.layer = this.getLayerID(); 81 | const tr = graphicsNode.getComponent(this.transformComponent) || graphicsNode.addComponent(this.transformComponent); 82 | if (tr) { 83 | tr.setContentSize(0, 0); 84 | } 85 | 86 | const inspectorCanvas = this.createInspectorCanvas(); 87 | scene.addChild(inspectorCanvas); 88 | 89 | const camera = this.createCamera(); 90 | inspectorCanvas.addChild(camera.node); 91 | inspectorCanvas.addChild(graphicsNode); 92 | 93 | const canvas = inspectorCanvas.addComponent(cc.Canvas); 94 | canvas.cameraComponent = camera; 95 | canvas.alignCavasWithScreen = true; 96 | this.inspectorCanvas = inspectorCanvas; 97 | return true; 98 | } 99 | private createInspectorCanvas() { 100 | const node = new cc.Node("InspectorCanvas"); 101 | node.layer = this.getLayerID(); 102 | const widget = node.addComponent(cc.Widget); 103 | widget.alignMode = cc.Widget.AlignMode.ALWAYS; 104 | widget.isAlignBottom = true; 105 | widget.isAlignTop = true; 106 | widget.isAlignLeft = true; 107 | widget.isAlignRight = true; 108 | widget.left = widget.right = widget.top = widget.bottom = 0; 109 | 110 | return node; 111 | } 112 | private createCamera() { 113 | const node = new cc.Node("InspectorCamera"); 114 | node.layer = this.getLayerID(); 115 | const camera = node.addComponent(cc.Camera); 116 | camera.priority = Number.MAX_VALUE; 117 | camera.layer = this.getLayerID(); 118 | camera.visibility = this.getLayerID(); 119 | camera.clearFlags = cc.Camera.ClearFlag.DONT_CLEAR; 120 | camera.clearColor = new cc.Color(0, 0, 0, 0); 121 | camera.projection = cc.Camera.ProjectionType.ORTHO; 122 | camera.far = 2000; 123 | return camera; 124 | } 125 | private getLayerID() { 126 | // FIXME: https://forum.cocos.org/t/topic/165550 127 | return cc.Layers.Enum.GIZMOS; 128 | } 129 | getRectPoints(node: any): RectPoints | null { 130 | if (!node.worldPosition) { 131 | return null; 132 | } 133 | if (!this.transformComponent) { 134 | return null; 135 | } 136 | const tr = node.getComponent(this.transformComponent); 137 | if (!tr) { 138 | return null; 139 | } 140 | const { anchorPoint, width, height } = tr; 141 | const points: RectPoints = new RectPoints(); 142 | const x = -anchorPoint.x * width; 143 | const y = -anchorPoint.y * height; 144 | const m = node.worldMatrix; 145 | 146 | [ 147 | new Point(x, y), // 148 | new Point(x + width, y), 149 | new Point(x + width, y + height), 150 | new Point(x, y + height), 151 | ].forEach(({ x, y }: Point) => { 152 | let rhw = m.m03 * x + m.m07 * y + m.m15; 153 | rhw = rhw ? 1 / rhw : 1; 154 | let worldX = (m.m00 * x + m.m04 * y + m.m12) * rhw; 155 | let worldY = (m.m01 * x + m.m05 * y + m.m13) * rhw; 156 | let worldZ = (m.m02 * x + m.m06 * y + m.m14) * rhw; 157 | const pos = this.draw.getComponent(this.transformComponent).convertToNodeSpaceAR(cc.v3(worldX, worldY, worldZ)); 158 | points.add(new Point(pos.x, pos.y)); 159 | }); 160 | 161 | return points; 162 | } 163 | /** 164 | * 尝试实现wireframe模式 165 | */ 166 | private getTrangles(node: any) { 167 | const comps = node._components; 168 | if (comps && Array.isArray(comps)) { 169 | const m = node.worldMatrix; 170 | comps.forEach((comp) => { 171 | const { renderData } = comp; 172 | if (!renderData) { 173 | return; 174 | } 175 | const { data, _vc: VertexCount, _ic: IndexCount, chunk } = renderData; 176 | if (!data) { 177 | return; 178 | } 179 | 180 | // 获取indexBuffer的索引顺序 181 | const ib = chunk.meshBuffer.iData; 182 | let indexOffset = chunk.meshBuffer.indexOffset; 183 | const vidOrigin = chunk.vertexOffset; 184 | const arr = []; 185 | for (let i = 0; i < IndexCount; i++) { 186 | const index = ib[indexOffset + i] - vidOrigin; 187 | arr.push(index); 188 | } 189 | 190 | for (let j = 0; j < data.length; j++) { 191 | const item = data[j]; 192 | const { x, y, z, u, v, color } = item; 193 | let rhw = m.m03 * x + m.m07 * y + m.m15; 194 | rhw = rhw ? 1 / rhw : 1; 195 | 196 | let worldX = (m.m00 * x + m.m04 * y + m.m12) * rhw; 197 | let worldY = (m.m01 * x + m.m05 * y + m.m13) * rhw; 198 | let worldZ = (m.m02 * x + m.m06 * y + m.m14) * rhw; 199 | // const pos = this.draw.getComponent(transform).convertToNodeSpaceAR(cc.v3(worldX, worldY, worldZ)); 200 | // points.points.push(new Point(pos.x, pos.y)); 201 | } 202 | }); 203 | } 204 | } 205 | } 206 | -------------------------------------------------------------------------------- /src/scripts/inject/hint/index.ts: -------------------------------------------------------------------------------- 1 | import ccui from "@xuyanfeng/cc-ui"; 2 | import { IUiMenuItem } from "@xuyanfeng/cc-ui/types/cc-menu/const"; 3 | import { throttle } from "lodash"; 4 | import { toRaw } from "vue"; 5 | import { Msg } from "../../../core/types"; 6 | import { DocumentEvent } from "../../const"; 7 | import { appStore } from "../../inject-view/store"; 8 | import { Inspector } from "../inspector"; 9 | import { DrawOptions, HintAdapter, RectPoints } from "./adapter"; 10 | import { HintV2 } from "./hint-v2"; 11 | import { HintV3 } from "./hint-v3"; 12 | declare const cc: any; 13 | 14 | /** 15 | * 只负责管理hint的流程 16 | */ 17 | export class Hint { 18 | private engineVersion: string = ""; 19 | private hintAdapter: HintAdapter = null; 20 | public setEngineVersion(version: string) { 21 | this.engineVersion = version; 22 | if (version.startsWith("2.")) { 23 | this.hintAdapter = new HintV2(); 24 | } else if (version.startsWith("3.")) { 25 | this.hintAdapter = new HintV3(); 26 | } 27 | } 28 | private inspector: Inspector = null; 29 | constructor(inspector: Inspector) { 30 | this.inspector = inspector; 31 | document.addEventListener(DocumentEvent.InspectorClear, () => { 32 | this.cleanHover(); 33 | this.cleanSelected(); 34 | }); 35 | document.addEventListener(DocumentEvent.GameInspectorBegan, (event: CustomEvent) => { 36 | const el = this.getTargetElement(); 37 | if (!el) { 38 | return; 39 | } 40 | 41 | const cursor = el.style.cursor; 42 | el.style.cursor = "zoom-in"; 43 | 44 | const mousedown = (event: MouseEvent) => { 45 | event.stopPropagation(); 46 | event.preventDefault(); 47 | pickEnd(); 48 | 49 | if (event.button === 0) { 50 | // 左键拾取 51 | this.updateHintDown(event, el); 52 | } else { 53 | // 其他按键取消 54 | this.pickCancel(); 55 | } 56 | }; 57 | function pickEnd() { 58 | document.removeEventListener("keydown", keydown, true); 59 | el.removeEventListener("mousedown", mousedown, true); 60 | el.removeEventListener("mousemove", mousemove, true); 61 | el.style.cursor = cursor; 62 | const e = new CustomEvent(DocumentEvent.GameInspectorEnd); 63 | document.dispatchEvent(e); 64 | } 65 | 66 | const mousemove = (event: MouseEvent) => { 67 | this.updateHitMoveThrottle(event, el); 68 | }; 69 | const keydown = (event: KeyboardEvent) => { 70 | const { shortKeyPick } = toRaw(appStore().config); 71 | if (event.code === shortKeyPick) { 72 | pickEnd(); 73 | this.pickCancel(); 74 | } 75 | }; 76 | document.addEventListener("keydown", keydown, true); 77 | el.addEventListener("mousemove", mousemove, true); 78 | el.addEventListener("mousedown", mousedown, true); 79 | }); 80 | } 81 | private pickCancel() { 82 | this.updateHitMoveThrottle.cancel(); 83 | this.cleanHover(); 84 | } 85 | private updateHitMoveThrottle = throttle(this.updateHintMove, 300); 86 | private updateHintMove(event: MouseEvent, canvas: HTMLCanvasElement) { 87 | const nodes = this.getMouseNodes(event, canvas); 88 | if (nodes.length) { 89 | const node = nodes[0]; 90 | this.setHover(node); 91 | } 92 | } 93 | private getMouseNodes(event: MouseEvent, canvas: HTMLCanvasElement): Array { 94 | this.inspector.updateTreeInfo(false); 95 | const { x, y } = this.hintAdapter.convertMousePos(event, canvas); 96 | const nodes = []; 97 | this.inspector.forEachNode((node) => { 98 | const b = this.hintAdapter.hitTest(node, x, y); 99 | if (b && node.active && node.activeInHierarchy) { 100 | nodes.push(node); 101 | } 102 | }); 103 | nodes.reverse(); 104 | return nodes; 105 | } 106 | private updateHintDown(event: MouseEvent, canvas: HTMLCanvasElement) { 107 | this.cleanHover(); 108 | this.cleanSelected(); 109 | const nodes = this.getMouseNodes(event, canvas); 110 | const pickTop = toRaw(appStore().config.pickTop); 111 | if (nodes.length === 1 || (pickTop && nodes.length)) { 112 | const item = nodes[0]; 113 | this.cleanHover(); 114 | this.setSelected(item); 115 | this.sendInspectNodeMsg(item); 116 | } else { 117 | const menu = nodes.map((item) => { 118 | const path = this.getPath(item); 119 | return { 120 | name: path, 121 | callback: () => { 122 | this.cleanHover(); 123 | this.setSelected(item); 124 | this.sendInspectNodeMsg(item); 125 | }, 126 | enter: () => { 127 | this.setHover(item); 128 | }, 129 | leave: () => { 130 | this.cleanHover(); 131 | }, 132 | } as IUiMenuItem; 133 | }); 134 | ccui.menu.showMenuByMouseEvent(event, menu, { opacity: 0.8 }); 135 | } 136 | } 137 | private sendInspectNodeMsg(node: any) { 138 | if (node.uuid) { 139 | this.inspector.sendMsgToContent(Msg.InspectNode, node.uuid); 140 | } 141 | } 142 | private getPath(node: any) { 143 | let path = []; 144 | let parent = node; 145 | while (parent) { 146 | path.push(parent.name); 147 | parent = parent.parent; 148 | } 149 | path = path.reverse(); 150 | return path.join("/"); 151 | } 152 | private getTargetElement(): HTMLCanvasElement | null { 153 | // @ts-ignore 154 | if (typeof cc !== "undefined" && cc.game && cc.game.canvas) { 155 | // @ts-ignore 156 | return cc.game.canvas; 157 | } else { 158 | null; 159 | } 160 | } 161 | public cleanHover() { 162 | this.hoverNodes = []; 163 | this.hintAdapter && this.hintAdapter.clear(); 164 | } 165 | public cleanSelected() { 166 | this.selectedNodes = []; 167 | this.hintAdapter && this.hintAdapter.clear(); 168 | } 169 | private hoverNodes = []; 170 | private selectedNodes = []; 171 | 172 | public update() { 173 | if (!this.hintAdapter) { 174 | return; 175 | } 176 | this.hintAdapter.initDrawNode(); 177 | if (!this.hintAdapter.isDrawValid()) { 178 | return; 179 | } 180 | this.hintAdapter.clear(); 181 | this.hintAdapter.resetIndex(); 182 | // this.testRect(); 183 | this.hoverNodes.forEach((node) => { 184 | if (node.isValid) { 185 | this.hintNode(node, { 186 | fill: true, 187 | fillColor: "#00ff0055", 188 | stroke: true, 189 | strokeColor: "#ffffff44", 190 | }); 191 | } 192 | }); 193 | this.selectedNodes.forEach((node) => { 194 | if (node.isValid) { 195 | this.hintNode(node, { 196 | fill: false, 197 | fillColor: "#ff0000", 198 | stroke: true, 199 | strokeColor: "#ff0000", 200 | }); 201 | } 202 | }); 203 | } 204 | private testRect() { 205 | const points = new RectPoints(); 206 | points.test(100, 100); 207 | this.hintAdapter.drawRect(points, { 208 | fill: true, 209 | fillColor: "#00ff0099", 210 | stroke: true, 211 | strokeColor: "#ff000099", 212 | }); 213 | } 214 | public setHover(node: any) { 215 | if (node.isValid) { 216 | this.hoverNodes = [node]; 217 | } 218 | } 219 | public setSelected(node: any) { 220 | if (node.isValid) { 221 | this.selectedNodes = [node]; 222 | } 223 | } 224 | 225 | private hintNode(node: any, opts: DrawOptions) { 226 | const points = this.hintAdapter.getRectPoints(node); 227 | if (!points) { 228 | return; 229 | } 230 | this.hintAdapter.drawRect(points, opts); 231 | } 232 | } 233 | -------------------------------------------------------------------------------- /src/scripts/inject/index.ts: -------------------------------------------------------------------------------- 1 | import { Inspector } from "./inspector"; 2 | const inspector = new Inspector(); 3 | inspector.init(); 4 | window["CCInspector"] = inspector; 5 | 6 | window["DoInspect"] = function () { 7 | const t = inspector.target; 8 | if (typeof t === "function") { 9 | //@ts-ignore 10 | inspect(t); 11 | } 12 | inspector.target = null; 13 | }; 14 | -------------------------------------------------------------------------------- /src/scripts/inject/inject-view.ts: -------------------------------------------------------------------------------- 1 | import ccui from "@xuyanfeng/cc-ui"; 2 | import "@xuyanfeng/cc-ui/dist/ccui.css"; 3 | import "@xuyanfeng/cc-ui/iconfont/iconfont.css"; 4 | import { createPinia } from "pinia"; 5 | import { createApp } from "vue"; 6 | import { DocumentEvent } from "../const"; 7 | import App from "../inject-view/app.vue"; 8 | export class InjectView { 9 | private _inited = false; 10 | private css: string[] = []; 11 | private hasLoadCss = false; 12 | constructor() { 13 | document.addEventListener(DocumentEvent.LoadInjectCss, (event: CustomEvent) => { 14 | const cssArray: string[] = event.detail; 15 | this.css = cssArray; 16 | this.loadCss(); 17 | }); 18 | } 19 | public init() { 20 | if (this._inited) { 21 | return; 22 | } 23 | this._inited = true; 24 | this.createUI(); 25 | } 26 | private loadCss() { 27 | if (this.hasLoadCss) { 28 | return; 29 | } 30 | if (this.css.length === 0) { 31 | return; 32 | } 33 | this.hasLoadCss = true; 34 | this.css.forEach((css) => { 35 | const link = document.createElement("link"); 36 | link.href = css; 37 | link.rel = "stylesheet"; 38 | document.head.appendChild(link); 39 | }); 40 | } 41 | private createUI() { 42 | const el = document.createElement("div"); 43 | el.setAttribute("app", ""); 44 | el.style.zIndex = "9000"; 45 | document.body.appendChild(el); 46 | // load css 47 | this.loadCss(); 48 | // vue 49 | const app = createApp(App); 50 | app.use(createPinia()); 51 | // ccui.uiElement.setDoc(document); 52 | app.use(ccui); 53 | app.mount(el); 54 | } 55 | } 56 | export const injectView = new InjectView(); 57 | -------------------------------------------------------------------------------- /src/scripts/inject/inspect-list.ts: -------------------------------------------------------------------------------- 1 | export class InspectTarget { 2 | private list = []; 3 | 4 | /** 5 | * 是否启用过滤 6 | */ 7 | enabled: boolean = false; 8 | addInspectType(item: any) { 9 | if (!this.list.find((el) => item === el)) { 10 | this.list.push(item); 11 | } 12 | console.log(this.list); 13 | } 14 | 15 | removeInspectType(item: any) { 16 | this.list.splice(this.list.indexOf(item), 1); 17 | console.log(this.list); 18 | } 19 | cleanInspectType() { 20 | this.list.length = 0; 21 | } 22 | isContainInspectType(type: any) { 23 | return !!this.list.find((el) => type === el); 24 | } 25 | 26 | checkNodeComponentsIsInList(node: any) { 27 | const comps = node._components; 28 | for (let i = 0; i < comps.length; i++) { 29 | const comp = comps[i]; 30 | if (this.list.find((el) => comp instanceof el)) { 31 | return true; 32 | } 33 | } 34 | return false; 35 | } 36 | } 37 | 38 | export const inspectTarget = new InspectTarget(); 39 | -------------------------------------------------------------------------------- /src/scripts/inject/setValue.ts: -------------------------------------------------------------------------------- 1 | import { isVersion3 } from "./util"; 2 | 3 | interface ConfigItem { 4 | path: string[], 5 | func: Function; 6 | } 7 | 8 | const config: ConfigItem[] = [ 9 | { 10 | path: ["position", "x"], 11 | func: (target: any, value: any) => { 12 | let pos = target.getPosition(); 13 | pos.x = value; 14 | target.setPosition(pos); 15 | } 16 | }, 17 | { 18 | path: ["position", "y"], 19 | func: (target: any, value: any) => { 20 | let pos = target.getPosition(); 21 | pos.y = value; 22 | target.setPosition(pos); 23 | } 24 | }, 25 | { 26 | path: ["position", "z"], 27 | func: (target: any, value: any) => { 28 | let pos = target.getPosition(); 29 | pos.z = value; 30 | target.setPosition(pos); 31 | } 32 | }, 33 | { 34 | path: ["scale", "x"], 35 | func: ((target: any, value: any) => { 36 | let scale = target.getScale(); 37 | scale.x = value; 38 | target.setScale(scale); 39 | }) 40 | }, 41 | { 42 | path: ["scale", "y"], 43 | func: ((target: any, value: any) => { 44 | let scale = target.getScale(); 45 | scale.y = value; 46 | target.setScale(scale); 47 | }) 48 | }, 49 | { 50 | path: ["scale", "z"], 51 | func: ((target: any, value: any) => { 52 | let scale = target.getScale(); 53 | scale.z = value; 54 | target.setScale(scale); 55 | }) 56 | } 57 | ] 58 | 59 | // 3.x不允许直接设置xyz，需要走setPosition 60 | export function trySetValueWithConfig(pathArray: string[], targetObject: any, targetValue: any) { 61 | if (isVersion3()) { 62 | let fullPath: string = pathArray.toString() 63 | let item = config.find(el => { 64 | return fullPath.endsWith(el.path.toString()) 65 | }); 66 | if (item) { 67 | // 将多余的path去掉 68 | let leftPathArray = []; 69 | let max = pathArray.length - item.path.length; 70 | for (let i = 0; i < max; i++) { 71 | leftPathArray.push(pathArray[i]) 72 | } 73 | 74 | let pathObjectValue = getValue(targetObject, leftPathArray); 75 | if (pathObjectValue) { 76 | try { 77 | item.func(pathObjectValue, targetValue); 78 | return true; 79 | } catch (e) { 80 | console.error(e); 81 | return false 82 | } 83 | } 84 | } 85 | } 86 | return false; 87 | } 88 | 89 | export function getValue(target: any, path: string[]) { 90 | for (let i = 0; i < path.length; i++) { 91 | let key = path[i]; 92 | if (target[key] !== undefined || target.hasOwnProperty(key)) { 93 | target = target[key] 94 | } else { 95 | return null; 96 | } 97 | } 98 | return target; 99 | } 100 | -------------------------------------------------------------------------------- /src/scripts/inject/types.ts: -------------------------------------------------------------------------------- 1 | import { ArrayData, ImageData, Info, ObjectData, Vec2Data, Vec3Data } from "../../views/devtools/data"; 2 | 3 | export interface BuildObjectOptions { 4 | path: string[]; 5 | value: Object; 6 | data: ObjectData; 7 | } 8 | 9 | export interface BuildArrayOptions { 10 | path: string[]; 11 | value: Object; 12 | data: ArrayData; 13 | keys: number[]; 14 | } 15 | 16 | export interface BuildVecOptions { 17 | path: string[]; 18 | keys: Array<{ 19 | key: string; 20 | /** 21 | * 分量使用的步进值，优先使用，主要是为了实现不同分量不同的步进 22 | */ 23 | step?: (key: string) => number; 24 | /** 25 | * 分量是否可以调整 26 | */ 27 | disabled?: (key: string, item: Info) => boolean; 28 | }>; 29 | /** 30 | * 所有的vec统一使用的步进值 31 | */ 32 | step?: number; 33 | ctor: Function; 34 | value: Object; 35 | data: Vec3Data | Vec2Data; 36 | } 37 | export interface NodeChildrenOptions { 38 | /**遍历到prefab的index，主要是为了着色 */ 39 | index: number; 40 | } 41 | export interface BuildImageOptions { 42 | path: string[]; 43 | ctor: Function; 44 | value: Object; 45 | data: ImageData; 46 | } 47 | export enum ShowCode { 48 | TouchStart = "touch-start", 49 | TouchMove = "touch-move", 50 | TouchEnd = "touch-end", 51 | TouchCancel = "touch-cancel", 52 | ButtonClick = "button-click", 53 | ButtonClickEvents = "button-events", 54 | } 55 | -------------------------------------------------------------------------------- /src/scripts/inject/util.ts: -------------------------------------------------------------------------------- 1 | declare const cc: any; 2 | 3 | export function isVersion3() { 4 | if (typeof cc !== "undefined" && cc && typeof cc.ENGINE_VERSION === "string") { 5 | const version: string = cc.ENGINE_VERSION; 6 | return version.startsWith("3."); 7 | } 8 | return false; 9 | } 10 | 11 | export function isHasProperty(base: Object, key: string): boolean { 12 | let ret = Object.getOwnPropertyDescriptor(base, key); 13 | if (ret) { 14 | return true; 15 | } else { 16 | let proto = Object.getPrototypeOf(base); 17 | if (proto) { 18 | return isHasProperty(proto, key); 19 | } else { 20 | return false; 21 | } 22 | } 23 | } 24 | 25 | export function freshEditor() { 26 | let router = ""; 27 | let isCreator2X = false; 28 | if (isVersion3()) { 29 | isCreator2X = false; 30 | router = "asset-db/refresh"; 31 | } else { 32 | isCreator2X = true; 33 | router = "update-db"; 34 | } 35 | const url = new URL(window.location.href); 36 | const port = Number(url.port) || 7456; 37 | fetch(`http://localhost:${port}/${router}`) 38 | .then((res) => { 39 | res.text().then((a: string) => { 40 | window.location.reload(); 41 | if (isCreator2X === false && a === "success") { 42 | // 3.x 43 | } 44 | if (isCreator2X === true && a === "Changes submitted") { 45 | // 2.x 46 | } 47 | }); 48 | }) 49 | .then((data) => {}); 50 | } 51 | -------------------------------------------------------------------------------- /src/scripts/terminal.ts: -------------------------------------------------------------------------------- 1 | export class Chunk { 2 | /** 3 | * 显示的值 4 | */ 5 | value: string = ""; 6 | /** 7 | * 是否换行 8 | */ 9 | private newline: boolean = false; 10 | /** 11 | * 显示的样式 12 | */ 13 | style: string[] = []; 14 | constructor(v: string, newline: boolean = false) { 15 | this.value = v; 16 | this.newline = newline; 17 | } 18 | color(c: string) { 19 | this.style.push(`color:${c}`); 20 | return this; 21 | } 22 | background(c: string) { 23 | this.style.push(`background:${c}`); 24 | return this; 25 | } 26 | padding(c: string) { 27 | this.style.push(`padding:${c}`); 28 | return this; 29 | } 30 | fontwight(c: string) { 31 | this.style.push(`font-weight:${c}`); 32 | return this; 33 | } 34 | bold() { 35 | return this.fontwight("bold"); 36 | } 37 | margin(c: string) { 38 | this.style.push(`margin:${c}`); 39 | return this; 40 | } 41 | marginLeft(c: string) { 42 | this.style.push(`margin-left:${c}`); 43 | return this; 44 | } 45 | marginRight(c: string) { 46 | this.style.push(`margin-right:${c}`); 47 | return this; 48 | } 49 | toValue() { 50 | return `%c${this.value}${this.newline ? "\n" : ""}`; 51 | } 52 | toStyle() { 53 | return this.style.join(";"); 54 | } 55 | } 56 | 57 | export class Terminal { 58 | /** 59 | * 标签 60 | */ 61 | tag = "terminal"; 62 | /** 63 | * 子标签 64 | */ 65 | subTag = ""; 66 | /** 67 | * 标签的颜色 68 | */ 69 | tagColor = "blue"; 70 | /** 71 | * 标签的背景色 72 | */ 73 | tagBackground = "yellow"; 74 | /** 75 | * 日志文本的颜色 76 | */ 77 | txtColor = "black"; 78 | private chunks: Chunk[] = []; 79 | constructor(tag: string) { 80 | this.tag = tag; 81 | } 82 | init(): string[] { 83 | this.txtColor = "black"; 84 | this.subTag = "init"; 85 | return this.log(); 86 | } 87 | 88 | public log(message: string = "", newline: boolean = false): string[] { 89 | const txt = new Chunk(message).color(this.txtColor).background("#e6e6e6").marginLeft("5px"); 90 | return this.doChunk(newline, [txt]); 91 | } 92 | public chunkMessage(chunk: Chunk[]) { 93 | this.subTag = "message"; 94 | return this.doChunk(false, chunk); 95 | } 96 | 97 | public chunkSend(chunk: Chunk[]) { 98 | this.subTag = "send "; 99 | return this.doChunk(false, chunk); 100 | } 101 | private doChunk(newline: boolean = false, chunks: Chunk[]) { 102 | this.chunks = []; 103 | const tag = new Chunk(this.tag).color(this.tagColor).background(this.tagBackground).padding("0 4px"); 104 | this.chunks.push(tag); 105 | 106 | const subTag = new Chunk(this.subTag, newline).color(this.tagBackground).background(this.tagColor).padding("0 3px"); 107 | this.chunks.push(subTag); 108 | 109 | chunks.forEach((c) => { 110 | this.chunks.push(c); 111 | }); 112 | 113 | let head = "*"; 114 | for (let i = 0; i < this.chunks.length; i++) { 115 | const chunk = this.chunks[i]; 116 | head += chunk.toValue(); 117 | } 118 | const ret = [head]; 119 | this.chunks.forEach((chunk) => { 120 | ret.push(chunk.toStyle()); 121 | }); 122 | this.reset(); 123 | return ret; 124 | } 125 | private reset() { 126 | this.subTag = ""; 127 | } 128 | public blue(message: string): string[] { 129 | this.txtColor = "blue"; 130 | this.subTag = ""; 131 | return this.log(message); 132 | } 133 | public green(message: string): string[] { 134 | this.txtColor = "green"; 135 | this.subTag = ""; 136 | return this.log(message); 137 | } 138 | public red(message: string): string[] { 139 | this.txtColor = "red"; 140 | this.subTag = ""; 141 | return this.log(message); 142 | } 143 | send(msg: string) { 144 | this.txtColor = "black"; 145 | this.subTag = "send"; 146 | return this.log(`${msg}`); 147 | } 148 | message(msg: string): string[] { 149 | this.txtColor = "black"; 150 | this.subTag = "message"; 151 | return this.log(`${msg}`); 152 | } 153 | connect(msg: string): string[] { 154 | this.txtColor = "black"; 155 | this.subTag = "connect"; 156 | return this.log(`${msg}`); 157 | } 158 | disconnect(msg: string): string[] { 159 | this.txtColor = "black"; 160 | this.subTag = "disconnect"; 161 | return this.log(`${msg}`); 162 | } 163 | } 164 | -------------------------------------------------------------------------------- /src/views/devtools/bridge.ts: -------------------------------------------------------------------------------- 1 | import CCP from "cc-plugin/src/ccp/entry-render"; 2 | import { TinyEmitter } from "tiny-emitter"; 3 | import { debugLog, Msg, Page, PluginEvent } from "../../core/types"; 4 | import { Terminal } from "../../scripts/terminal"; 5 | import { TestClient, testServer } from "./test/server"; 6 | export type BridgeCallback = (data: PluginEvent, sender: chrome.runtime.Port) => void; 7 | if (chrome.devtools) { 8 | console.log("chrome devtools"); 9 | } 10 | class Bridge implements TestClient { 11 | private emitter = new TinyEmitter(); 12 | /** 13 | * 和background建立的链接 14 | */ 15 | private connect: chrome.runtime.Port | null = null; 16 | private terminal = new Terminal(Page.Devtools); 17 | 18 | private _inited = false; 19 | public disconnect() { 20 | if (this.connect) { 21 | this.connect.disconnect(); 22 | this.connect = null; 23 | debugger; 24 | } 25 | } 26 | private init() { 27 | if (this._inited) { 28 | return; 29 | } 30 | this._inited = true; 31 | if (CCP.Adaptation.Env.isChromeRuntime) { 32 | // 调试的标签ID 33 | const id = chrome.devtools.inspectedWindow.tabId; 34 | this.connect = chrome.runtime.connect({ name: `${Page.Devtools}-${id}` }); 35 | this.connect.onDisconnect.addListener((port: chrome.runtime.Port) => { 36 | debugLog && console.log(...this.terminal.disconnect("")); 37 | this.connect = null; 38 | debugger; 39 | }); 40 | 41 | this.connect.onMessage.addListener((event, sender: chrome.runtime.Port) => { 42 | const data = PluginEvent.create(event); 43 | debugLog && console.log(...this.terminal.chunkMessage(data.toChunk())); 44 | if (data.valid && data.isTargetDevtools()) { 45 | this.emitter.emit(data.msg, data); 46 | } else { 47 | console.log(JSON.stringify(event)); 48 | debugger; 49 | } 50 | }); 51 | } else { 52 | testServer.add(this); 53 | } 54 | } 55 | on(msg: Msg, callback: (data: PluginEvent) => void) { 56 | this.emitter.on(msg, callback); 57 | } 58 | off(msg: Msg, callback: (data: PluginEvent) => void) { 59 | this.emitter.off(msg, callback); 60 | } 61 | recv(event: PluginEvent): void { 62 | this.emit(event); 63 | } 64 | emit(data: PluginEvent) { 65 | this.emitter.emit(data.msg, data); 66 | } 67 | send(msg: Msg, data?: any) { 68 | this.init(); 69 | if (CCP.Adaptation.Env.isChromeDevtools) { 70 | if (this.connect) { 71 | let sendData = new PluginEvent(Page.Devtools, Page.Background, msg, data); 72 | this.connect.postMessage(sendData); 73 | } else { 74 | console.warn(...this.terminal.log("重新和background建立链接")); 75 | this._inited = false; 76 | this.init(); 77 | this.send(msg, data); 78 | } 79 | } else { 80 | testServer.recv(msg, data); 81 | } 82 | } 83 | } 84 | 85 | export const bridge = new Bridge(); 86 | -------------------------------------------------------------------------------- /src/views/devtools/bus.ts: -------------------------------------------------------------------------------- 1 | import { TinyEmitter } from "tiny-emitter"; 2 | 3 | export enum BusMsg { 4 | ShowPlace = "ShowPlace", 5 | FoldAllGroup = "FoldAllGroup", 6 | UpdateSettings = "UpdateSettings", 7 | /** 8 | * 开关定时器，方便测试 9 | */ 10 | EnableSchedule = "EnableSchedule", 11 | ChangeContent = "ChangeContent", 12 | SelectNode = "SelectNode", 13 | } 14 | 15 | export const Bus = new TinyEmitter(); 16 | -------------------------------------------------------------------------------- /src/views/devtools/const.ts: -------------------------------------------------------------------------------- 1 | export const PanelMsg = { 2 | Show: "Show", 3 | Hide: "Hide", 4 | }; 5 | 6 | export enum RotateType { 7 | None = "none", 8 | One = "one", 9 | Loop = "loop", 10 | } 11 | -------------------------------------------------------------------------------- /src/views/devtools/contextMenu.ts: -------------------------------------------------------------------------------- 1 | function createPluginMenus() { 2 | const menus = []; 3 | 4 | let parent = chrome.contextMenus.create({ 5 | id: "parent", 6 | title: "CC-Inspector", 7 | }); 8 | chrome.contextMenus.create({ 9 | id: "test", 10 | title: "测试右键菜单", 11 | parentId: parent, 12 | // 上下文环境，可选：["all", "page", "frame", "selection", "link", "editable", "image", "video", "audio"]，默认page 13 | contexts: ["page"], 14 | }); 15 | chrome.contextMenus.create({ 16 | id: "notify", 17 | parentId: parent, 18 | title: "通知", 19 | }); 20 | 21 | chrome.contextMenus.onClicked.addListener(function (info, tab) { 22 | if (info.menuItemId === "test") { 23 | alert("您点击了右键菜单！"); 24 | } else if (info.menuItemId === "notify") { 25 | chrome.notifications.create("null", { 26 | type: "basic", 27 | iconUrl: "icons/48.png", 28 | title: "通知", 29 | message: "测试通知", 30 | }); 31 | } 32 | }); 33 | } 34 | 35 | chrome.contextMenus.removeAll(() => { 36 | createPluginMenus(); 37 | }); 38 | -------------------------------------------------------------------------------- /src/views/devtools/everything.vue: -------------------------------------------------------------------------------- 1 | 4 | 14 | 19 | -------------------------------------------------------------------------------- /src/views/devtools/find.vue: -------------------------------------------------------------------------------- 1 | 10 | 42 | 59 | -------------------------------------------------------------------------------- /src/views/devtools/game-info.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 77 | 78 | 96 | -------------------------------------------------------------------------------- /src/views/devtools/index.ts: -------------------------------------------------------------------------------- 1 | import ccui from "@xuyanfeng/cc-ui"; 2 | import "@xuyanfeng/cc-ui/dist/ccui.css"; 3 | import "@xuyanfeng/cc-ui/iconfont/iconfont.css"; 4 | import CCP from "cc-plugin/src/ccp/entry-render"; 5 | import { createPinia } from "pinia"; 6 | import { createApp } from "vue"; 7 | import pluginConfig from "../../../cc-plugin.config"; 8 | import "../global.less"; 9 | import App from "./index.vue"; 10 | export default CCP.init(pluginConfig, { 11 | ready: function (rootElement: any, args: any) { 12 | if (args && args.body) { 13 | ccui.uiElement.setBody(args.body); 14 | } 15 | if (args && args.doc) { 16 | ccui.uiElement.setDoc(args.doc); 17 | } 18 | const app = createApp(App); 19 | app.use(ccui); 20 | app.use(createPinia()); 21 | app.mount(rootElement); 22 | }, 23 | }); 24 | -------------------------------------------------------------------------------- /src/views/devtools/inspector.vue: -------------------------------------------------------------------------------- 1 | 13 | 161 | 176 | -------------------------------------------------------------------------------- /src/views/devtools/refresh.vue: -------------------------------------------------------------------------------- 1 | 4 | 49 | 79 | -------------------------------------------------------------------------------- /src/views/devtools/register-panel.ts: -------------------------------------------------------------------------------- 1 | import CCP from "cc-plugin/src/ccp/entry-render"; 2 | 3 | export function init() { 4 | if (chrome && chrome.devtools) { 5 | // 对应的是Elements面板的边栏 6 | chrome.devtools.panels.elements.createSidebarPane(CCP.manifest.name, function (sidebar) { 7 | sidebar.setObject({ some_data: "some data to show!" }); 8 | }); 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/views/devtools/store.ts: -------------------------------------------------------------------------------- 1 | import profile from "cc-plugin/src/ccp/profile"; 2 | import { defineStore } from "pinia"; 3 | import { ref, toRaw } from "vue"; 4 | import pluginConfig from "../../../cc-plugin.config"; 5 | import { PanelMsg } from "./const"; 6 | export const enum RefreshType { 7 | Auto = "auto", 8 | Manual = "manual", 9 | } 10 | export class ConfigData { 11 | /** 12 | * 刷新类型 13 | */ 14 | refreshType: string = RefreshType.Manual; 15 | /** 16 | * 刷新间隔时间，单位ms 17 | */ 18 | refreshTime: number = 500; 19 | /** 20 | * 展开测试的section 21 | */ 22 | expandTest: boolean = false; 23 | /** 24 | * 是否自动刷新inspector 25 | */ 26 | refreshInspector: boolean = true; 27 | /** 28 | * 是否自动刷新hierarchy 29 | */ 30 | refreshHirarchy: boolean = true; 31 | /** 32 | * 当鼠标滑过节点树时，游戏是否同步Inspect 33 | */ 34 | hoverInspect: boolean = true; 35 | /** 36 | * 当节点树点击时，游戏是否同步Inspect 37 | */ 38 | clickInspect: boolean = true; 39 | /** 40 | * 显示节点树的icon 41 | */ 42 | showTreeIcon: boolean = true; 43 | } 44 | 45 | export const appStore = defineStore("app", () => { 46 | const config = ref(new ConfigData()); 47 | const frameID = ref(0); 48 | const pageShow = ref(false); 49 | 50 | function readConfigFile(file: string) { 51 | const data = profile.load(file) as ConfigData; 52 | config.value.refreshType = data.refreshType || RefreshType.Manual; 53 | config.value.refreshTime = data.refreshTime || 500; 54 | config.value.expandTest = !!data.expandTest; 55 | config.value.refreshHirarchy = !!data.refreshHirarchy; 56 | config.value.refreshInspector = !!data.refreshInspector; 57 | config.value.hoverInspect = !!data.hoverInspect; 58 | config.value.clickInspect = !!data.clickInspect; 59 | config.value.showTreeIcon = !!data.showTreeIcon; 60 | } 61 | return { 62 | frameID, 63 | pageShow, 64 | config, 65 | init() { 66 | profile.init(new ConfigData(), pluginConfig); 67 | if (chrome.devtools) { 68 | window.addEventListener(PanelMsg.Show, () => { 69 | pageShow.value = true; 70 | }); 71 | chrome.devtools.inspectedWindow.eval("window.location.href", (url: string, ex: chrome.devtools.inspectedWindow.EvaluationExceptionInfo) => { 72 | readConfigFile(url); 73 | }); 74 | } else { 75 | pageShow.value = true; 76 | readConfigFile(`${pluginConfig.manifest.name}.json`); 77 | } 78 | }, 79 | save() { 80 | const cfg = toRaw(config.value); 81 | profile.save(cfg); 82 | }, 83 | }; 84 | }); 85 | -------------------------------------------------------------------------------- /src/views/devtools/timer.ts: -------------------------------------------------------------------------------- 1 | export class Timer { 2 | private timer: number | null = null; 3 | /** 4 | * 执行定时器的回调 5 | */ 6 | public onWork: Function | null = null; 7 | /** 8 | * 清理定时器的回调 9 | */ 10 | public onClean: Function | null = null; 11 | public duration: number = 300; 12 | public name: string = ""; 13 | 14 | create(rightNow: boolean = false) { 15 | this.clean(); 16 | this.timer = setInterval(this.onWork, this.duration); 17 | if (rightNow) { 18 | this.onWork && this.onWork(); 19 | } 20 | } 21 | destroy(): boolean { 22 | if (this.timer === null) { 23 | return false; 24 | } else { 25 | clearInterval(this.timer); 26 | this.timer = null; 27 | return true; 28 | } 29 | } 30 | clean() { 31 | if (this.destroy()) { 32 | this.onClean && this.onClean(); 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/views/devtools/ui/property-engine.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 38 | 39 | 92 | -------------------------------------------------------------------------------- /src/views/devtools/ui/property-group.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 99 | 100 | 114 | -------------------------------------------------------------------------------- /src/views/devtools/ui/property-image.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 43 | 44 | 98 | -------------------------------------------------------------------------------- /src/views/devtools/ui/propertys.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 39 | 40 | 46 | -------------------------------------------------------------------------------- /src/views/devtools/ui/settings.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 60 | 61 | 67 | -------------------------------------------------------------------------------- /src/views/devtools/util.ts: -------------------------------------------------------------------------------- 1 | import { Msg, RequestSupportData } from "../../core/types"; 2 | import { bridge } from "./bridge"; 3 | 4 | export function checkSupport() { 5 | bridge.send(Msg.RequestSupport, {} as RequestSupportData); 6 | } 7 | export function execInspect() { 8 | setTimeout(() => { 9 | chrome.devtools.inspectedWindow.eval(`DoInspect()`); 10 | }, 5); 11 | } 12 | -------------------------------------------------------------------------------- /src/views/global.less: -------------------------------------------------------------------------------- 1 | #app { 2 | background-color: #666666 !important; 3 | } -------------------------------------------------------------------------------- /src/views/options/index.ts: -------------------------------------------------------------------------------- 1 | import ccui from "@xuyanfeng/cc-ui"; 2 | import "@xuyanfeng/cc-ui/dist/ccui.css"; 3 | import "@xuyanfeng/cc-ui/iconfont/iconfont.css"; 4 | import CCP from "cc-plugin/src/ccp/entry-render"; 5 | import { createApp } from "vue"; 6 | import pluginConfig from "../../../cc-plugin.config"; 7 | import App from "./index.vue"; 8 | 9 | export default CCP.init(pluginConfig, { 10 | ready: function (rootElement: any, args: any) { 11 | const app = createApp(App); 12 | app.use(ccui); 13 | app.mount(rootElement); 14 | }, 15 | }); 16 | -------------------------------------------------------------------------------- /src/views/options/index.vue: -------------------------------------------------------------------------------- 1 | 16 | 29 | 51 | -------------------------------------------------------------------------------- /src/views/options/res/money.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tidys/cc-inspector-chrome/a0329f741412c121ffc949daafbd5d86bf2f38cf/src/views/options/res/money.png -------------------------------------------------------------------------------- /src/views/popup/index.ts: -------------------------------------------------------------------------------- 1 | import ccui from "@xuyanfeng/cc-ui"; 2 | import "@xuyanfeng/cc-ui/dist/ccui.css"; 3 | import "@xuyanfeng/cc-ui/iconfont/iconfont.css"; 4 | import "@xuyanfeng/cc-ui/iconfont/use.css"; 5 | import CCP from "cc-plugin/src/ccp/entry-render"; 6 | import { createApp } from "vue"; 7 | import pluginConfig from "../../../cc-plugin.config"; 8 | import "../global.less"; 9 | import App from "./index.vue"; 10 | export default CCP.init(pluginConfig, { 11 | ready: function (rootElement: any, args: any) { 12 | const app = createApp(App); 13 | app.use(ccui); 14 | app.mount(rootElement); 15 | }, 16 | }); 17 | -------------------------------------------------------------------------------- /src/views/popup/index.vue: -------------------------------------------------------------------------------- 1 | 39 | 161 | 225 | -------------------------------------------------------------------------------- /src/views/popup/res/30.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tidys/cc-inspector-chrome/a0329f741412c121ffc949daafbd5d86bf2f38cf/src/views/popup/res/30.jpg -------------------------------------------------------------------------------- /src/views/popup/res/friend.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tidys/cc-inspector-chrome/a0329f741412c121ffc949daafbd5d86bf2f38cf/src/views/popup/res/friend.png -------------------------------------------------------------------------------- /src/views/popup/res/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tidys/cc-inspector-chrome/a0329f741412c121ffc949daafbd5d86bf2f38cf/src/views/popup/res/github.png -------------------------------------------------------------------------------- /src/views/popup/res/qq.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tidys/cc-inspector-chrome/a0329f741412c121ffc949daafbd5d86bf2f38cf/src/views/popup/res/qq.png -------------------------------------------------------------------------------- /src/views/popup/res/star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tidys/cc-inspector-chrome/a0329f741412c121ffc949daafbd5d86bf2f38cf/src/views/popup/res/star.png -------------------------------------------------------------------------------- /src/views/popup/res/tiezi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tidys/cc-inspector-chrome/a0329f741412c121ffc949daafbd5d86bf2f38cf/src/views/popup/res/tiezi.png -------------------------------------------------------------------------------- /src/views/popup/tool-item.vue: -------------------------------------------------------------------------------- 1 | 14 | 40 | 46 | -------------------------------------------------------------------------------- /src/views/popup/tool.vue: -------------------------------------------------------------------------------- 1 | 6 | 46 | 53 | -------------------------------------------------------------------------------- /src/views/popup/type.ts: -------------------------------------------------------------------------------- 1 | export interface Tools { 2 | name: string; 3 | url: string; 4 | store: string; 5 | } 6 | 7 | export class ToolItem { 8 | constructor(type: string) { 9 | this.type = type; 10 | } 11 | title: string = ""; 12 | type: string = ""; 13 | items: Tools[] = []; 14 | } 15 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowSyntheticDefaultImports": true, 4 | "experimentalDecorators": true, 5 | "target": "ES6", 6 | "module": "commonjs" 7 | } 8 | } 9 | --------------------------------------------------------------------------------