代码整理

.gitignore

@@ -1,13 +1,11 @@
 .idea
-CocosCreatorInspector/src/build
-/source/artifacts/
-/cc-inspector-v1.2/
-/test/
-
-cc-inspector/node_modules/
-cc-inspector/yalc.lock
-cc-inspector/chrome/
-cc-inspector/dist/
-cc-inspector/yarn-error.log
-cc-inspector/chrome.zip
-cc-inspector/chrome.crx
+test/
+node_modules/
+web/
+.yalc/
+yalc.lock
+chrome/
+dist/
+yarn-error.log
+chrome.zip
+chrome.crx

.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="$PROJECT_DIR$" vcs="Git" />
-  </component>
-</project>

CocosCreatorInspector/Limit.md

@@ -1,4 +0,0 @@
-# 一些限制
-`chrome.processes`这个API能获取进程信息,但是需要安装chrome-dev版本
-
-性能优化,除了关注资源加载情况,目前通过chrome插件获取到的信息有限,还是依赖chrome devtools 的performance面板最直接,chrome并没有对外开放`performance`相关的api

CocosCreatorInspector/README.md

@@ -1,45 +0,0 @@
-# cocos-creator-inspector
-## 插件说明
-本插件为chrome插件,设计该插件的初衷是方便在chrome环境下运行时调试creator游戏.   
-开发过程中难免翻车,为什么添加的图片看不到,为什么图片的位置有偏差,为什么.....    
-总之,身为程序员的我们每天都在思考:我错在了哪里?如果能在运行游戏的时候,查看游戏的节点树多好啊    
-so...       
-![](../doc/CreatorInspector/icon.png)   
-
-cc-inspector 插件顺势而生, 你需要的我来完成   
-目前插件支持运行时查看场景的节点树信息,比如坐标,缩放,颜色,透明度,附加的组件等等,其中在节点的可视状态属性里面,提供了**显示/隐藏**的操作按钮,该操作会直接影响到运行时节点的可视状态,惊不惊喜,意不意外,还有这种令人窒息的操作? 
-![](http://imgsrc.baidu.com/forum/pic/item/2cdeec1190ef76c6371dd3dd9616fdfaae516778.jpg)  
-目前版本功能虽然单薄,但是实用性非常高,在后续版本中,会陆陆续续开发新功能,比如修改节点的坐标,缩放等等属性,当然还有一个最重要的核心功能,就是节点附加的组件,如果能动态修改组件属性,执行组件的function,简直是如虎添翼啊!     
-好吧,总之**这是一个神奇的插件**,更多好玩的功能有待发掘,希望这只 **猫头鹰** 能作为游戏开发之旅的火眼金睛,披荆斩棘,让bug无处可藏!
-
-### 论坛帖子地址
- http://forum.cocos.com/t/chrome-creator/55669
-
-## 插件安装
-- [安装包下载](http://7xq9nm.com1.z0.glb.clouddn.com/ccInspector_v1.1.zip)   
-- [点击查看如何安装](../doc/CreatorInspector/install/README.md)
-## 如何使用
-- 在chrome浏览器中运行creator开发的游戏
-- F12打开**开发者工具**你会发现多了一个cocos选项
-  ![](../doc/CreatorInspector/scene1.png)
-- 点击**刷新**按钮即可查看游戏运行时的节点目录树,左侧为节点,右侧为节点信息
-  ![](../doc/CreatorInspector/scene3.png) 
-  - 节点信息中有控制显示隐藏的按钮,点击该按钮将直接影响运行中的游戏效果
-    ![](../doc/CreatorInspector/showHideNode.gif) 
-  - 节点属性列表中显示了改节点上挂的所有组件,目前仅仅支持查看组件名称,并不能实时编辑   
-## 开发中使用到的技术
-- chrome 插件开发
-- vue+webpack
-- element-ui    
-- cocos creator
-## 寻求帮助
-因为本人不是web前端开发出身,而这个插件使用了比较多的web前端技术,所以急切的寻求一个web前端小伙伴,共同完善这个插件,这也是本人将这个插件开源的一个重要原因
-## 联系方式
-QQ群**224756137**
-
-### manifest.json
-// 开发参考：http://open.chrome.360.cn/extension_dev/overview.html
-// 字段说明参考：http://open.chrome.360.cn/extension_dev/manifest.html
-
-## 配合使用插件
-[extensions-reloader](https://chrome.google.com/webstore/detail/extensions-reloader/fimgfedafeadlieiabdeeaodndnlbhid?utm_source=chrome-ntp-icon)

CocosCreatorInspector/Update.md

@@ -1,7 +0,0 @@
-# 版本更新说明
-## v1.2
-### 新功能
-- popup页面增加**支持作者**功能,还望各位打赏一下喽!
-![](../doc/CreatorInspector/package/4.png)
-- 优化了很多交互,详细见下图
-![](../doc/CreatorInspector/package/5.gif)

CocosCreatorInspector/package.json

@@ -1,55 +0,0 @@
-{
-  "name": "cocos-inspector",
-  "description": "Cocos Creator Inspector",
-  "version": "1.0.0",
-  "author": "xu_yanfeng",
-  "license": "MIT",
-  "private": true,
-  "scripts": {
-    "dev-server": "webpack-dev-server --inline --progress --open --hot --port 8888",
-    "dev-index": "cross-env NODE_ENV=development webpack-dev-server --open http://localhost:8082/index.html --inline  --progress --hot --port 8082",
-    "dev-popup": "cross-env NODE_ENV=development webpack-dev-server --open http://localhost:8083/popup.html --inline  --progress --hot --port 8083",
-    "dev-inspector": "cross-env NODE_ENV=development webpack-dev-server --open http://localhost:8084/devInspector.html --inline --progress --hot --port 8084",
-    "build": "webpack --config ./src/webpack.config.js --progress",
-    "build-watch": "webpack --config ./src/webpack.config.js --progress --watch"
-  },
-  "dependencies": {
-    "fs": "0.0.1-security",
-    "fs-extra": "^5.0.0",
-    "gulp": "^3.9.1",
-    "gulp-shell": "^0.6.5",
-    "json-beautifully": "^1.0.3",
-    "less": "3.9.0",
-    "less-loader": "5.0.0",
-    "path": "^0.12.7",
-    "ts-loader": "^6.2.2",
-    "typescript": "^3.9.9",
-    "url-loader": "^0.6.2",
-    "vue": "^2.4.4",
-    "vue-awesome": "^2.3.4",
-    "vue-property-decorator": "^9.1.2"
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not ie <= 8"
-  ],
-  "devDependencies": {
-    "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.2",
-    "babel-preset-env": "^1.6.0",
-    "babel-preset-stage-3": "^6.24.1",
-    "clean-webpack-plugin": "^0.1.17",
-    "copy-webpack-plugin": "^4.0.1",
-    "cross-env": "^5.0.5",
-    "css-loader": "^0.28.7",
-    "file-loader": "^1.1.4",
-    "html-webpack-plugin": "^3.2.0",
-    "style-loader": "^0.19.0",
-    "vue-loader": "^15.9.6",
-    "vue-template-compiler": "^2.4.4",
-    "webpack": "^4.46.0",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.8.2"
-  }
-}

CocosCreatorInspector/src/webpack.config.js

@@ -1,168 +0,0 @@
-const Path = require('path');
-let webpack = require('webpack');
-let HtmlWebpackPlugin = require('html-webpack-plugin');
-let CleanWebpackPlugin = require('clean-webpack-plugin');
-let CopyWebpackPlugin = require('copy-webpack-plugin');
-const VueLoaderPlugin = require('vue-loader/lib/plugin');
-let ChromeManifest = require('./core/chrome-manifest');
-
-if (process.env.NODE_ENV === 'production') {
-
-}
-
-let resolve = function (dir) {
-  return Path.join(__dirname, dir);
-};
-
-let htmlPage = function (title, filename, chunks, template) {
-  return new HtmlWebpackPlugin({
-    title: title,
-    hash: true,
-    cache: true,
-    inject: 'body',
-    filename: './pages/' + filename + '.html',
-    template: template || Path.resolve(__dirname, 'core/page.ejs'),
-    appMountId: 'app',
-    chunks
-  });
-};
-
-module.exports = {
-  mode: 'development',
-  entry: {
-    // test: resolve('test'),
-    background: resolve('background'),
-
-    // devInspector: path.resolve(__dirname, './src/dev/devInspector/main.js'),
-    // dev: path.resolve(__dirname, './src/dev/dev.js'),
-    // index: path.resolve(__dirname, './src/index/main.js'),
-    // backgroundScripts: path.resolve(__dirname, './src/dev/backgroundScripts.js'),
-    // contentScripts: path.resolve(__dirname, './src/dev/contentScripts.js'),
-    // util: path.resolve(__dirname, './src/dev/util.js'),
-  },
-  output: {
-    path: Path.resolve(__dirname, 'build'),
-    publicPath: '/',
-    filename: 'js/[name].js'
-  },
-  plugins: [
-    new VueLoaderPlugin(),
-    // new webpack.HotModuleReplacementPlugin(),
-    // webpack 执行之前删除dist下的文件
-    new CleanWebpackPlugin(['./build/*'], {
-      root: __dirname,//根目录
-      verbose: true,//开启在控制台输出信息
-      dry: false,//启用删除文件
-    }),
-
-    htmlPage('background', 'background', ['background']),
-    new ChromeManifest({
-      outFile: Path.join(__dirname, 'build/manifest.json'),
-      manifest: Path.join(__dirname, 'manifest.js')
-    }),
-
-    // 拷贝静态资源(manifest.json)
-    new CopyWebpackPlugin([{
-      from: Path.resolve(__dirname, 'icon'),
-      to: 'icon',
-      force: true,
-      // ignore: ['.*']
-    }]),
-    // new webpack.DefinePlugin({
-    //   'process.env': {
-    //     NODE_ENV: '"production"'
-    //   }
-    // }),
-    // new webpack.optimize.UglifyJsPlugin({
-    //   sourceMap: true,
-    //   compress: {
-    //     warnings: false
-    //   }
-    // }),
-    // new webpack.LoaderOptionsPlugin({
-    //   minimize: true
-    // })
-  ],
-  module: {
-    rules: [
-      {
-        test: /\.(css)$/,
-        use: [
-          'vue-style-loader',
-          'css-loader'
-        ],
-      },
-      {
-        test: /\.less$/,
-        use: [
-          'less-loader'
-        ],
-      },
-      {
-        test: /\.vue$/,
-        loader: 'vue-loader',
-        options: {
-          loaders: {
-            scss: 'style-loader!css-loader!sass-loader',
-            sass: 'style-loader!css-loader!sass-loader?indentedSyntax',
-            less: 'less-loader'
-          }
-          // other vue-loader options go here
-        }
-      },
-      {
-        test: /\.js$/,
-        loader: 'babel-loader',
-        exclude: /node_modules/
-      },
-      {
-        test: /\.ts$/,
-        loader: 'ts-loader',
-        exclude: /node_modules/
-      },
-      // {
-      //   test: /\.(png|jpg|gif|svg|ttf|woff|woff2|eot)$/,
-      //   loader: 'file-loader',
-      //   options: {
-      //     name: '[name].[ext]?[hash]'
-      //   }
-      // },
-      {
-        test: /\.(png|jpg|gif|svg)(\?.*)?$/,
-        loader: 'url-loader',
-        options: {
-          limit: 10000,
-          name: 'img/[name].[hash:7].[ext]'
-        }
-      },
-      {
-        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-        loader: 'url-loader',
-        options: {
-          limit: 10000,
-          name: 'fonts/[name].[hash:7].[ext]'
-        }
-      }
-    ]
-  },
-  resolve: {
-    alias: {
-      'vue$': 'vue/dist/vue.esm.js'
-    },
-    extensions: ['*', '.ts', '.js', '.vue', '.json']
-  },
-  devServer: {
-    contentBase: './dist',//本地服务器所加载的页面所在的目录
-    historyApiFallback: true,//不跳转
-    noInfo: true,
-    inline: true,//实时刷新
-    overlay: true
-  },
-
-  performance: {
-    hints: false
-  },
-  devtool: '#source-map'
-};
-
-

CocosCreatorInspector/如何运行项目.md

@@ -1,40 +0,0 @@
-# 如何运行项目
-## 使用前
-在使用之前,需要在项目目录CocosCreatorInspector下执行命令
-```
-npm install
-```
-初始化项目所需的依赖包
-# 编译
-在项目目录运行编译命令
-```
-npm run build
-```
-会生成dist目录,目录下即打包所需要的所有文件
-
-
-
-# 如何打包插件
-## 命令行方式
-- 为了能够在计算机上让gulp直行任务，所以我们需要全局安装gulp。在终端执行：
-```$xslt
-cnpm install gulp -g
-```
-- 安装完成后，我们可以同样通过命令查看是否安装成功：
-```$xslt
-gulp -v
-```
-- 运行打包任务
-```$xslt
-gulp packageCrx
-```
-## 在webstorm中运行gulp任务
-- 在gulpfile.js文件上右击选择**Show Gulp Tasks**
-![](../doc/CreatorInspector/package/1.png)
-- 如果webstorm没有检测到任务列表,需要设置下安装包,点击**设置**,
-打开**Gulp Settings...**
-![](../doc/CreatorInspector/package/2.png)
-- 设置gulp模块的物理地址,注意图中红框设置的地址
-![](../doc/CreatorInspector/package/3.png)
-- 在webstorm中的gulp视图刷新任务列表
-- 双击**packageCrx**,执行打包插件任务

README.md

@@ -1,30 +1,30 @@
-# cic
+# cc-inspector-chrome
 
-目前chrome插进的代码都在source里面，其他目录为迁徙的老代码，还没整理完毕
+在浏览器中查看CocosCreator游戏的节点树、节点属性。
 
-# 说明
+![](./doc/scene4.png)
 
-inject在development模式下无法正常使用，暂时的解决办法，注释掉`vue-cli-plugin-browser-extension/index.js`代码中的124行：
-```
-webpackConfig.plugin('extension-reloader').use(ExtensionReloader, [{ entries, ...extensionReloaderOptions }])
-```
-详细原因参考：[issues](https://github.com/adambullmer/vue-cli-plugin-browser-extension/issues/120)
-
-# 后续工作
-
-popup界面增加联系方式。
-
-开发一个独立的electron桌面版本，使用socket调试app，解决排查app问题的痛点。
-防止别人篡改，必须混淆代码，增加修改难度，暂时不做加密。
-
-适配插件版本(不紧急)
-
-# 后续工作
-目前使用的vue2开发的插件，并且使用的是vue.config.js
-
-后续打算使用vue3重写，并且完全使用webpack进行打包配置，以灵活应对打包配置，关联项目
-
-https://github.com/tidys/project-tool
+- [youtube](https://www.youtube.com/watch?v=ajMz3zEFTA8)
+- [chrome](https://chromewebstore.google.com/detail/cc-inspector/hejbkamkfnkifppoaljcidepkhgaahcj?hl=zh-CN&utm_source=ext_sidebar)
+- [bilibili](https://www.bilibili.com/video/BV1jzcHeSEh3/)
+- [cocos store](https://store.cocos.com/app/detail/2002)
+- [github](https://github.com/tidys/cc-inspector-chrome)
 
+ 
+### 论坛
+ - http://forum.cocos.com/t/chrome-creator/55669
+ - https://forum.cocos.org/t/topic/164888
 
+ 
+## 开发中使用到的技术
+- [cc-plugin](https://www.npmjs.com/package/cc-plugin)
+- [cc-ui](https://www.npmjs.com/package/@xuyanfeng/cc-ui)
+- chrome 插件开发
+- vue3、webpack
+- cocos creator
 
+## Cocos Creator Test Cases
+ - [cocos test cases](https://tidys.github.io/creator-test-cases/)
+ 
+## TODO
+- 目前开发过程中无法实现HMR，参考[extensions-reloader](https://chrome.google.com/webstore/detail/extensions-reloader/fimgfedafeadlieiabdeeaodndnlbhid?utm_source=chrome-ntp-icon)

cc-inspector/.gitignore

@@ -1,3 +0,0 @@
-node_modules/
-web/
-.yalc/

cc-inspector/README.md

@@ -1,9 +0,0 @@
-对应的测视例网站：
-
-https://tidys.github.io/creator-test-cases/
-
-- youtube: https://www.youtube.com/watch?v=ajMz3zEFTA8
-- chrome: https://chromewebstore.google.com/detail/cc-inspector/hejbkamkfnkifppoaljcidepkhgaahcj?hl=zh-CN&utm_source=ext_sidebar
-- bilibili: https://www.bilibili.com/video/BV1jzcHeSEh3/
-- store: https://store.cocos.com/app/detail/2002
-- github: https://github.com/tidys/cc-inspector-chrome

cc-inspector/src/views/devtools/test/server.ts

@@ -1,242 +0,0 @@
-import { v4 } from "uuid";
-import { Msg, Page, PluginEvent, RequestNodeInfoData, ResponseNodeInfoData, ResponseSupportData, ResponseTreeInfoData } from "../../../core/types";
-import { CompType, VisibleProp } from "../comp";
-import { ArrayData, BoolData, ColorData, EngineData, EnumData, Group, ImageData, Info, InvalidData, NodeInfoData, NumberData, ObjectCircleData, ObjectData, Property, StringData, TextData, TreeData, Vec2Data, Vec3Data, Vec4Data } from "../data";
-export class TestClient {
-  recv(event: PluginEvent) {}
-}
-class Node {
-  icon: string = "icon_node";
-  active: boolean = true;
-  color: string = "";
-  children: Node[] = [];
-  id: string = "";
-  name: string = "";
-  components: Group[] = [];
-  constructor(name: string = "") {
-    this.name = name;
-    this.active = true;
-    this.id = v4();
-    this.children = [];
-  }
-  setColor(color: string) {
-    this.color = color;
-    return this;
-  }
-  setIcon(icon: string) {
-    this.icon = icon;
-    return this;
-  }
-  setActive(active: boolean) {
-    this.active = active;
-    return this;
-  }
-  buildComponent(name: string) {
-    const info = new Group(name);
-    this.components.push(info);
-    return info;
-  }
-
-  buildChild(name: string) {
-    const node = new Node(name);
-    this.children.push(node);
-    return node;
-  }
-  toTreeData(data: TreeData) {
-    data.id = this.id;
-    data.text = this.name;
-    data.active = this.active;
-    data.icon = this.icon;
-    data.color = this.color;
-    for (let i = 0; i < this.children.length; i++) {
-      const child = this.children[i];
-      const childData = new TreeData();
-      child.toTreeData(childData);
-      data.children.push(childData);
-    }
-  }
-  private allNodes(): Node[] {
-    const nodes: Node[] = [];
-    function circle(node: Node) {
-      node.children.forEach((child) => {
-        nodes.push(child);
-        circle(child);
-      });
-    }
-    circle(this);
-    return nodes;
-  }
-  findNode(id: string): Node | null {
-    const nodes: Node[] = this.allNodes();
-    return nodes.find((node) => node.id === id) || null;
-  }
-  findInfo(id: string): Info | null {
-    const nodes: Node[] = this.allNodes();
-    for (let i = 0; i < nodes.length; i++) {
-      const node = nodes[i];
-      const comp = node.findProperty(id);
-      if (comp) {
-        return comp;
-      }
-    }
-    return null;
-  }
-  private findProperty(id: string): Info | null {
-    for (let i = 0; i < this.components.length; i++) {
-      const comp = this.components[i];
-      for (let j = 0; j < comp.data.length; j++) {
-        const item: Property = comp.data[j];
-        if (item.value.id === id) {
-          return item.value;
-        }
-      }
-    }
-    return null;
-  }
-}
-export class TestServer {
-  private clients: TestClient[] = [];
-  private testData: Node = new Node("scene");
-  constructor() {
-    this.testData
-      .setIcon("icon_cocos")
-      .setColor("#f00")
-      .buildChild("base")
-      .setIcon("icon_prefab")
-      .buildComponent("group-base") //
-      .buildProperty("bool", new BoolData(true))
-      .buildProperty("text", new TextData("text"))
-      .buildProperty("number", new NumberData(100))
-      .buildProperty("string", new StringData("string"))
-      .buildProperty("enum", new EnumData().test())
-      .buildProperty("color", new ColorData("#f00"))
-      .buildProperty("image", new ImageData().test());
-    this.testData
-      .buildChild("vec")
-      .buildComponent("group-vec") //
-      .buildProperty("number", new NumberData(200))
-      .buildProperty("vec2", new Vec2Data().test())
-      .buildProperty("vec3", new Vec3Data().test())
-      .buildProperty("vec4", new Vec4Data().test());
-    this.testData
-      .buildChild("arr")
-      .buildComponent("group-arr") //
-      .buildProperty("array[t/b/n]", new ArrayData().testNormal()); //
-    this.testData
-      .buildChild("obj") //
-      .buildComponent("group-obj")
-      .buildProperty("object", new ObjectData().testNormal()); //
-    this.testData
-      .buildChild("obj-circle")
-      .buildComponent("group-obj-circle") //
-      .buildProperty("circle", new ObjectCircleData());
-
-    this.testData
-      .buildChild("arr[arr]")
-      .buildComponent("group-arr[arr]") //
-      .buildProperty("arr", new ArrayData().testArray()); //
-
-    this.testData
-      .buildChild("arr[obj]")
-      .buildComponent("group-arr[obj]") //
-      .buildProperty("arr", new ArrayData().testObject()); //
-
-    const node = this.testData.buildChild("str1").setActive(false).setColor("#00ff00ff");
-    const comp = node.buildComponent("group51");
-    comp.buildProperty("str1", new StringData("str1"));
-    node.buildComponent("group52").buildProperty("num", new NumberData(200));
-
-    this.testData.buildChild("str2").buildComponent("group6").buildProperty("str2", new StringData("str2"));
-
-    this.testData
-      .buildChild("engine")
-      .buildComponent("group4") //
-      .buildProperty("node", new EngineData().init(node.name, CompType.Node, node.id))
-      .buildProperty("sprite", new EngineData().init(node.name, CompType.Spirte, node.id))
-      .buildProperty("label", new EngineData().init(node.name, CompType.Label, node.id))
-      .buildProperty("prefab", new EngineData().init(node.name, CompType.Prefab, node.id))
-      .buildProperty("animation", new EngineData().init(node.name, CompType.Animation, node.id))
-      .buildProperty("button", new EngineData().init(node.name, CompType.Button, node.id))
-      .buildProperty("input", new EngineData().init(node.name, CompType.EditBox, node.id))
-      .buildProperty("un_known", new EngineData().init(comp.name, "un_known", comp.id, node.id));
-
-    this.testData
-      .buildChild("Invalid")
-      .buildComponent("group7")
-      .buildProperty("NaN", new InvalidData(NaN)) //
-      .buildProperty("null", new InvalidData(null))
-      .buildProperty("Infinity", new InvalidData(Infinity))
-      .buildProperty(VisibleProp.Active, new BoolData(true))
-      .buildProperty("undefined", new InvalidData(undefined));
-    this.testData
-      .buildChild("comp")
-      .buildComponent("node-2") //
-      .buildProperty("rotation", new NumberData(0))
-      .buildProperty(VisibleProp.Enabled, new BoolData(true))
-      .buildProperty("max", new NumberData(100));
-  }
-  add(client: TestClient) {
-    this.clients.push(client);
-  }
-  public support: boolean = true;
-  recv(msg: string, data: any) {
-    switch (msg) {
-      case Msg.RequestSupport: {
-        const e = new PluginEvent(Page.Background, Page.Devtools, Msg.ResponseSupport, {
-          support: this.support,
-          msg: "",
-          version: "0.0.0",
-        } as ResponseSupportData);
-        this.send(e);
-        break;
-      }
-      case Msg.RequestNodeInfo: {
-        const id: string = (data as RequestNodeInfoData).uuid;
-        const node: Node = this.testData.findNode(id);
-        let group = [];
-        if (node) {
-          group = node.components;
-        } else {
-          let g = new Group("scene").buildProperty("scene id", new StringData(id));
-          group.push(g);
-        }
-        const ret: NodeInfoData = new NodeInfoData(id, group);
-        const event = new PluginEvent(Page.Background, Page.Devtools, Msg.ResponseNodeInfo, ret as ResponseNodeInfoData);
-        this.send(event);
-        break;
-      }
-      case Msg.RequstTreeInfo: {
-        const ret: TreeData = new TreeData();
-        ret.icon = "icon_cocos";
-        this.testData.toTreeData(ret);
-        const event = new PluginEvent(Page.Inject, Page.Devtools, Msg.ResponseTreeInfo, ret as ResponseTreeInfoData);
-        this.send(event);
-        break;
-      }
-      case Msg.RequestSetProperty: {
-        const i = data as Info;
-        console.log(i);
-        break;
-      }
-      case Msg.RequestLogData: {
-        console.log(data);
-        break;
-      }
-      case Msg.RequestVisible: {
-        const node: Node = this.testData.findNode(data);
-        if (node) {
-          node.active = !node.active;
-        }
-        break;
-      }
-      default:
-        break;
-    }
-  }
-  send(event: PluginEvent) {
-    this.clients.forEach((client) => {
-      client.recv(event);
-    });
-  }
-}
-export const testServer = new TestServer();

cc-inspector/src/views/devtools/test/test.vue

@@ -1,162 +0,0 @@
-<template>
-  <div v-if="show" class="test">
-    <CCSection name="功能测试" :expand="config.expandTest" @change="onExpandTest">
-      <div>
-        <CCProp name="tree" align="left">
-          <CCButton @click="onTestTree1">tree1</CCButton>
-          <CCButton @click="onTestTree2">tree2</CCButton>
-          <CCButton @click="onTestNodeInfo">test node info</CCButton>
-        </CCProp>
-        <CCProp name="test" align="left">
-          <CCButton @click="onFrames">test frame</CCButton>
-          <CCButton @click="onNull">test null</CCButton>
-          <CCButton @click="onTerminal">terminal</CCButton>
-        </CCProp>
-        <CCProp name="cocos game" align="left">
-          <CCCheckBox :value="true" @change="onChangeCocosGame"></CCCheckBox>
-        </CCProp>
-        <CCProp name="timer" align="left">
-          <CCCheckBox :value="true" @change="onChangeTimer"></CCCheckBox>
-        </CCProp>
-      </div>
-    </CCSection>
-  </div>
-</template>
-<script lang="ts">
-import ccui from "@xuyanfeng/cc-ui";
-import { storeToRefs } from "pinia";
-import { defineComponent, ref } from "vue";
-import { debugLog, Msg, Page, PluginEvent, ResponseUpdateFramesData } from "../../../core/types";
-import { Terminal } from "../../../scripts/terminal";
-import { bridge } from "../bridge";
-import { Bus, BusMsg } from "../bus";
-import { FrameDetails, Group, InvalidData, NodeInfoData, TreeData } from "../data";
-import { appStore } from "../store";
-import { testServer } from "./server";
-const { CCButton, CCSection, CCCheckBox, CCProp } = ccui.components;
-export default defineComponent({
-  name: "test",
-  components: { CCButton, CCSection, CCCheckBox, CCProp },
-  emits: ["validGame"],
-  props: {
-    isCocosGame: { type: Boolean, default: false },
-  },
-  setup(props, { emit }) {
-    const { config } = storeToRefs(appStore());
-    // 仅在web环境显示
-    const show = ref(__DEV__);
-    // 测试发送的是纯数据
-    const testData = {
-      uuid: "d1NHXHs35F1rbFJZKeigkl",
-      group: [
-        {
-          id: "d1NHXHs35F1rbFJZKeigkl",
-          name: "cc.Scene",
-          data: [
-            {
-              name: "position",
-              value: {
-                id: "b9068b6f-8c1c-4d88-ac52-52cc09b37c1c",
-                type: "Vec3",
-                readonly: false,
-                path: [],
-                data: [
-                  { name: "x", value: { id: "be42ab63-d767-466e-8ba4-fb1b21201c54", type: "Number", readonly: false, path: ["d1NHXHs35F1rbFJZKeigkl", "x"], data: 0 } },
-                  { name: "y", value: { id: "498db9b2-e4a5-4c91-a546-1c3233e9bb50", type: "Number", readonly: false, path: ["d1NHXHs35F1rbFJZKeigkl", "y"], data: 0 } },
-                  { name: "z", value: { id: "400e184f-d754-4b66-aeb9-9f1feb1136a3", type: "Number", readonly: false, path: ["d1NHXHs35F1rbFJZKeigkl", "z"], data: 0 } },
-                ],
-              },
-            },
-          ],
-        },
-      ],
-    };
-    return {
-      config,
-      show,
-      onExpandTest(v: boolean) {
-        console.log(v);
-        config.value.expandTest = v;
-        appStore().save();
-      },
-
-      onChangeCocosGame(b: boolean) {
-        testServer.support = b;
-      },
-      onChangeTimer(b: boolean) {
-        Bus.emit(BusMsg.EnableSchedule, b);
-      },
-      onTerminal() {
-        const t = new Terminal("flag");
-        const event = new PluginEvent(Page.Background, Page.Background, Msg.ResponseTreeInfo, "");
-        debugLog && console.log(...t.message("1"));
-        debugLog && console.log(...t.log("newline", true));
-        debugLog && console.log(...t.log("oneline", false));
-        debugLog && console.log(...t.disconnect("disconnect"));
-        debugLog && console.log(...t.connect("connect"));
-        debugLog && console.log(...t.red("red"));
-        debugLog && console.log(...t.green("green"));
-        debugLog && console.log(...t.blue("blue"));
-        debugLog && console.log(...t.chunkMessage(event.toChunk()));
-      },
-      onTestTree1() {
-        const data: TreeData = {
-          id: "11",
-          color: "#ffffffff",
-          icon: "icon_node",
-          text: "11",
-          active: true,
-          children: [{ id: "22", text: "22", active: true, color: "#ffffffff", icon: "icon_node", children: [] }],
-        };
-        const event = new PluginEvent(Page.Inject, Page.Devtools, Msg.ResponseTreeInfo, data);
-        bridge.emit(event);
-      },
-      onTestTree2() {
-        const data: TreeData = {
-          id: "1",
-          text: "1",
-          color: "#ffffffff",
-          icon: "icon_node",
-          active: true,
-          children: [
-            {
-              id: "2",
-              text: "2",
-              color: "#ffffffff",
-              icon: "icon_node",
-              active: true,
-              children: [{ id: "3", text: "3", active: true, color: "#ffffffff", icon: "icon_node", children: [] }],
-            },
-            { id: "4", text: "4", active: true, color: "#ffffffff", icon: "icon_node", children: [] },
-          ],
-        };
-        const event = new PluginEvent(Page.Inject, Page.Devtools, Msg.ResponseTreeInfo, data);
-        bridge.emit(event);
-      },
-      onFrames() {
-        const data: FrameDetails[] = [
-          { url: "url1", tabID: 1, frameID: 1 },
-          { url: "url2", tabID: 1, frameID: 2 },
-        ];
-        const event = new PluginEvent(Page.Background, Page.Devtools, Msg.ResponseUpdateFrames, data as ResponseUpdateFramesData);
-        testServer.send(event);
-      },
-      onTestNodeInfo() {
-        const event = new PluginEvent(Page.Background, Page.Devtools, Msg.ResponseTreeInfo, testData);
-        testServer.send(event);
-      },
-      onNull() {
-        const data = new NodeInfoData("", [new Group("", "1").buildProperty("dependAssets", new InvalidData("Null"))]);
-        const event = new PluginEvent(Page.Background, Page.Devtools, Msg.ResponseTreeInfo, data);
-        testServer.send(event);
-      },
-    };
-  },
-});
-</script>
-<style scoped lang="less">
-.test {
-  color: rgb(192, 56, 56);
-  font-size: 11%;
-}
-</style>

cc-inspector/test/index.html

@@ -1,6 +0,0 @@
-<script type="text/javascript">
-window.cc={};
-</script>
-<div>
-    111
-</div>

cc-plugin.config.ts

@@ -15,10 +15,10 @@ const manifest: CocosPluginManifest = {
   main: "./src/main.ts",
   panels: [
     {
-      name: "main",
+      name: "inspector",
       type: Panel.Type.DockAble,
       main: "./src/panel/index.ts",
-      title: "cc-inspector",
+      title: "Cocos Inspector",
       width: 500,
       height: 400,
       minWidth: 50,

electron-app/index.css

@@ -1,9 +0,0 @@
-.sendCode {
-    width: 100%;
-    height: 300px;
-    margin-top: 10px;
-    margin-bottom: 10px;
-}
-.recvMsgError{
-    color: red;
-}

electron-app/index.html

@@ -1,34 +0,0 @@
-<html>
-<head>
-    <script src="lib/vue.js"></script>
-    <link rel="stylesheet" href="index.css">
-</head>
-<body>
-<div id="app">
-    <div>
-        链接状态：{{status}}
-    </div>
-    <div v-show="webSocketInstance">
-        <div style="display: flex;flex-direction: column;">
-            <span>收到的消息：</span>
-            <label>
-            <textarea :value="recvMsg" style="width: 100%;height: 300px;"
-                      :class="{'recvMsgError':recvMsgError}">
-
-            </textarea>
-            </label>
-        </div>
-
-        <div style="display: flex;flex-direction: column">
-            <label>
-                <textarea v-model="sendCode" class="sendCode"></textarea>
-            </label>
-            <div style="display: flex;flex-direction: row-reverse;">
-                <button @click="onRunCmd">发送代码</button>
-            </div>
-        </div>
-    </div>
-</div>
-<script src="./index.js"></script>
-</body>
-</html>

electron-app/index.js

@@ -1,56 +0,0 @@
-const WS = require("ws");
-let Server = null;
-new Vue({
-  el: "#app",
-  data: {
-    status: "---",
-    recvMsg: "",
-    recvMsgError: false,
-    sendCode: "console.log('hello')",
-    webSocketInstance: null,
-  },
-  created() {
-    Server = new WS.Server({port: 1109});
-    Server.on("connection", (webSocket) => {
-      this.status = "link";
-      this.webSocketInstance = webSocket;
-      webSocket.on("message", (msg) => {
-        const {error, data} = JSON.parse(msg);
-        this.recvMsgError = !!error;
-        if (data) {
-          this.recvMsg = data;
-        } else {
-          this.recvMsg = null;
-        }
-      });
-      webSocket.on("close", () => {
-        console.log("close");
-        this.status = "close";
-        this.webSocketInstance = null;
-      });
-      webSocket.on("open", () => {
-        console.log("open");
-        this.status = "open";
-      });
-      webSocket.on("error", () => {
-        console.log("error");
-        this.status = "error";
-        this.webSocketInstance = null;
-      });
-    });
-  },
-  mounted() {
-
-  },
-  methods: {
-    onRunCmd() {
-      if (this.webSocketInstance) {
-        let str = {
-          code: this.sendCode,
-        };
-        this.webSocketInstance.send(JSON.stringify(str));
-      }
-    },
-  }
-
-});

electron-app/inject.js

@@ -1,18 +0,0 @@
-let canvasArray = document.getElementsByTagName("canvas");
-if (canvasArray.length > 0) {
-  let canvas = canvasArray[0];
-  if (canvas) {
-    canvas.style.display = "none";
-    const {children} = canvas.parentNode;
-    let len = children.length;
-    let div = children[1];
-    if(div){
-      div.style.display='none';
-      console.log('hide div')
-    }
-    // console.log(div);
-  }
-}
-
-let div=document.getElementById('myDiv')
-console.log(div)

electron-app/main.js

@@ -1,21 +0,0 @@
-const Path = require("path");
-const {BrowserWindow, app} = require("electron");
-app.on("ready", () => {
-  const win = new BrowserWindow({
-    width: 1200,
-    height: 800,
-    webPreferences: {
-      nodeIntegration: true,
-      nodeIntegrationInSubFrames: true,
-      nodeIntegrationInWorker: true,
-      webSecurity: true,
-      contextIsolation: false,
-    }
-  });
-  win.webContents.openDevTools({mode: "right"});
-  win.loadFile(Path.join(__dirname, "index.html"));
-  win.show();
-});
-app.on("window-all-closed", () => {
-  app.quit();
-});

electron-app/package.json

@@ -1,16 +0,0 @@
-{
-  "name": "electron",
-  "version": "1.0.0",
-  "description": "",
-  "main": "main.js",
-  "scripts": {
-    "run-desktop": "electron ./"
-  },
-  "author": "",
-  "license": "ISC",
-  "dependencies": {
-    "axios": "^0.24.0",
-    "electron": "14.0.0",
-    "ws": "^8.2.3"
-  }
-}

electron-app/test/cmd.js

@@ -1,32 +0,0 @@
-// 游戏的inspect脚本
-const host = "192.168.1.5";//"localhost";
-const port = 1109;
-let url = `ws://${host}:${port}`;
-const ws = new WebSocket(url);
-ws.onopen = () => {
-  console.log("成功链接调试服务器", url);
-};
-ws.onmessage = (event) => {
-  console.log("收到消息", event);
-  const {code} = JSON.parse(event.data);
-  if (code) {
-    let ret = null;
-    let error = false;
-    try {
-      ret = eval(`${code}`);
-    } catch (e) {
-      error = true;
-      ret = e.toString();
-    }
-    ws.send(JSON.stringify({
-      error,
-      data: ret,
-    }));
-  }
-};
-ws.onerror = () => {
-  console.log("error");
-};
-ws.onclose = () => {
-  console.log("close");
-};

electron-app/test/index.html

@@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Title</title>
-    <script src="cmd.js"></script>
-</head>
-<body>
-
-</body>
-</html>

hello-chrome/devtools.js

@@ -1,5 +1,4 @@
 console.log("devtools.js");
-debugger
 
 // const tabsConnect = chrome.tabs.connect({ name: "devtoos" });
 // tabsConnect.onMessage.addListener((message) => {
@@ -21,6 +20,7 @@ const text = document.getElementById('text')
 const send2bg = document.getElementById('send2bg')
 if (send2bg) {
   send2bg.addEventListener('click', () => {
+    console.log(document.flag);
     const message = ("devtools send to background")
     runtimeConnect.postMessage(message)
     // tabsConnect.sendMessage(message);
@@ -28,14 +28,27 @@ if (send2bg) {
   })
 }
 
-
+console.log('href: ', window.location.href);
+console.log(chrome.devtools);
+console.log(chrome.devtools.inspectedWindow.tabId);
 chrome.devtools.panels.create("Hello World", "icon.png", "devtools.html", (panel) => {
   console.log("panel created");
-  panel.onShown.addListener(() => {
-    console.log("panel shown");
+  panel.onShown.addListener((win, b) => {
+    console.log("panel shown", win, b);
+    console.log(win.document.body)
+    console.log(` doc: `, win.document === document);
+    console.log(win.document);
+    console.log(window.document);
+    win.document.flag = "devtools_panel";
+    win.document.body.addEventListener('contextmenu', (e) => {
+      console.log(e);
+    })
+    document.body.addEventListener('keydown', (e) => {
+      console.log(e);
+    })
   });
-  panel.onHidden.addListener(() => {
-    console.log("panel hidden");
+  panel.onHidden.addListener((a, b) => {
+    console.log("panel hidden", a, b);
   });
   panel.onSearch.addListener((query) => {
     console.log("panel search", query);

others.md

@@ -0,0 +1,24 @@
+
+# 说明
+
+inject在development模式下无法正常使用，暂时的解决办法，注释掉`vue-cli-plugin-browser-extension/index.js`代码中的124行：
+```
+webpackConfig.plugin('extension-reloader').use(ExtensionReloader, [{ entries, ...extensionReloaderOptions }])
+```
+详细原因参考：[issues](https://github.com/adambullmer/vue-cli-plugin-browser-extension/issues/120)
+
+# 后续工作
+
+popup界面增加联系方式。
+
+开发一个独立的electron桌面版本，使用socket调试app，解决排查app问题的痛点。
+
+
+# 后续工作
+ 
+后续打算使用vue3重写，并且完全使用webpack进行打包配置，以灵活应对打包配置，关联项目
+
+https://github.com/tidys/project-tool
+
+
+