diff --git a/.gitignore b/.gitignore
index 73c9aef..7edc371 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,8 @@ CocosCreatorInspector/src/build
 /source/artifacts/
 /cc-inspector-v1.2/
 /test/
+cc-inspector/.yalc/
+cc-inspector/node_modules/
+cc-inspector/yalc.lock
+cc-inspector/chrome/
+cc-inspector/dist/
diff --git a/cc-inspector/cc-plugin.config.ts b/cc-inspector/cc-plugin.config.ts
index 3283d8f..29e5fe0 100644
--- a/cc-inspector/cc-plugin.config.ts
+++ b/cc-inspector/cc-plugin.config.ts
@@ -14,8 +14,8 @@ function i18n(key: string) {
 
 const manifest: CocosPluginManifest = {
   name: pkgName,
-  version: "1.0.0",
-  description: "cc-inspector",
+  version: "2.1.0",
+  description: "cc-inspector desc",
   author: "xu_yanfeng",
   main: "./src/main.ts",
   panels: [
@@ -41,12 +41,12 @@ const manifest: CocosPluginManifest = {
   i18n_en: "./src/i18n/en.ts",
   i18n_zh: "./src/i18n/zh.ts",
   chrome: {
-    view_devtools: "",
-    view_options: "",
-    view_popup: "",
-    script_background: "",
-    script_content: "",
-    script_inject: "",
+    view_devtools: "src/views/devtools/index.ts",
+    view_options: "src/views/options/index.ts",
+    view_popup: "src/views/popup/index.ts",
+    script_background: "src/scripts/background.ts",
+    script_content: "src/scripts/content.ts",
+    script_inject: "src/scripts/inject.ts",
   },
 };
 // 这里的options变量名暂时不支持修改，发布时会进行必要的修改
@@ -58,6 +58,7 @@ const options: CocosPluginOptions = {
   watchBuild: true,
   outputProject: {
     web: "./web",
+    chrome: "./chrome",
   },
 };
 export default { manifest, options };
diff --git a/cc-inspector/package.json b/cc-inspector/package.json
index baf8b38..44157c2 100644
--- a/cc-inspector/package.json
+++ b/cc-inspector/package.json
@@ -4,7 +4,7 @@
   "devDependencies": {
     "@types/fs-extra": "9.0.1",
     "@types/node": "16.11.12",
-    "@xuyanfeng/cc-ui": "0.2.14",
+    "@xuyanfeng/cc-ui": "^0.2.14",
     "cc-plugin": "file:.yalc/cc-plugin"
   },
   "name": "cc-plugin-demo",
@@ -13,9 +13,11 @@
     "ccp-pack-v2": "cc-plugin pack cp-v2",
     "ccp-pack-v3": "cc-plugin pack cp-v3",
     "ccp-pack-web": "cc-plugin pack web",
+    "ccp-pack-chrome": "cc-plugin pack chrome",
     "ccp-serve-v2": "cc-plugin serve cp-v2",
     "ccp-serve-v3": "cc-plugin serve cp-v3",
-    "ccp-serve-web": "cc-plugin serve web"
+    "ccp-serve-web": "cc-plugin serve web",
+    "ccp-serve-chrome": "cc-plugin serve chrome"
   },
   "version": "1.0.0"
 }
diff --git a/cc-inspector/src/scripts/background.ts b/cc-inspector/src/scripts/background.ts
new file mode 100644
index 0000000..ccb850a
--- /dev/null
+++ b/cc-inspector/src/scripts/background.ts
@@ -0,0 +1 @@
+console.log("background");
diff --git a/cc-inspector/src/scripts/content.ts b/cc-inspector/src/scripts/content.ts
new file mode 100644
index 0000000..51fd814
--- /dev/null
+++ b/cc-inspector/src/scripts/content.ts
@@ -0,0 +1 @@
+console.log("content.ts");
diff --git a/cc-inspector/src/scripts/inject.ts b/cc-inspector/src/scripts/inject.ts
new file mode 100644
index 0000000..23765b8
--- /dev/null
+++ b/cc-inspector/src/scripts/inject.ts
@@ -0,0 +1,3 @@
+console.log("injected");
+const a = 1;
+const b = 2;
diff --git a/cc-inspector/src/views/devtools/index.ts b/cc-inspector/src/views/devtools/index.ts
new file mode 100644
index 0000000..d45f706
--- /dev/null
+++ b/cc-inspector/src/views/devtools/index.ts
@@ -0,0 +1,15 @@
+import { createApp } from "vue";
+import App from "./index.vue";
+import CCP from "cc-plugin/src/ccp/entry-render";
+import pluginConfig from "../../../cc-plugin.config";
+import ccui from "@xuyanfeng/cc-ui";
+import "@xuyanfeng/cc-ui/dist/ccui.css";
+import "@xuyanfeng/cc-ui/iconfont/iconfont.css";
+
+export default CCP.init(pluginConfig, {
+  ready: function (rootElement: any, args: any) {
+    const app = createApp(App);
+    app.use(ccui);
+    app.mount(rootElement);
+  },
+});
diff --git a/cc-inspector/src/views/devtools/index.vue b/cc-inspector/src/views/devtools/index.vue
new file mode 100644
index 0000000..186c3ea
--- /dev/null
+++ b/cc-inspector/src/views/devtools/index.vue
@@ -0,0 +1,20 @@
+<template>
+    <div class="devtools">devtools</div>
+  </template>
+  <script lang="ts">
+  import { defineComponent, onMounted, ref, provide, nextTick } from "vue";
+  export default defineComponent({
+    name: "devtools",
+    components: {},
+    setup(props, ctx) {
+      return {}; 
+    },
+  });
+  </script>
+  <style scoped lang="less">
+  .devtools {
+      widows: 10px;
+      height: 10px;
+      background-color: rebeccapurple;
+  }
+  </style>
\ No newline at end of file
diff --git a/cc-inspector/src/views/options/index.ts b/cc-inspector/src/views/options/index.ts
new file mode 100644
index 0000000..d45f706
--- /dev/null
+++ b/cc-inspector/src/views/options/index.ts
@@ -0,0 +1,15 @@
+import { createApp } from "vue";
+import App from "./index.vue";
+import CCP from "cc-plugin/src/ccp/entry-render";
+import pluginConfig from "../../../cc-plugin.config";
+import ccui from "@xuyanfeng/cc-ui";
+import "@xuyanfeng/cc-ui/dist/ccui.css";
+import "@xuyanfeng/cc-ui/iconfont/iconfont.css";
+
+export default CCP.init(pluginConfig, {
+  ready: function (rootElement: any, args: any) {
+    const app = createApp(App);
+    app.use(ccui);
+    app.mount(rootElement);
+  },
+});
diff --git a/cc-inspector/src/views/options/index.vue b/cc-inspector/src/views/options/index.vue
new file mode 100644
index 0000000..8547214
--- /dev/null
+++ b/cc-inspector/src/views/options/index.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="options">options</div>
+</template>
+<script lang="ts">
+import { defineComponent, onMounted, ref, provide, nextTick } from "vue";
+export default defineComponent({
+  name: "options",
+  components: {},
+  setup(props, ctx) {
+    return {}; 
+  },
+});
+</script>
+<style scoped lang="less">
+.options {
+    widows: 10px;
+    height: 10px;
+    background-color: rebeccapurple;
+}
+</style>
\ No newline at end of file
diff --git a/cc-inspector/src/views/popup/index.ts b/cc-inspector/src/views/popup/index.ts
new file mode 100644
index 0000000..d45f706
--- /dev/null
+++ b/cc-inspector/src/views/popup/index.ts
@@ -0,0 +1,15 @@
+import { createApp } from "vue";
+import App from "./index.vue";
+import CCP from "cc-plugin/src/ccp/entry-render";
+import pluginConfig from "../../../cc-plugin.config";
+import ccui from "@xuyanfeng/cc-ui";
+import "@xuyanfeng/cc-ui/dist/ccui.css";
+import "@xuyanfeng/cc-ui/iconfont/iconfont.css";
+
+export default CCP.init(pluginConfig, {
+  ready: function (rootElement: any, args: any) {
+    const app = createApp(App);
+    app.use(ccui);
+    app.mount(rootElement);
+  },
+});
diff --git a/cc-inspector/src/views/popup/index.vue b/cc-inspector/src/views/popup/index.vue
new file mode 100644
index 0000000..d7c4123
--- /dev/null
+++ b/cc-inspector/src/views/popup/index.vue
@@ -0,0 +1,20 @@
+<template>
+    <div class="popup">popup</div>
+  </template>
+  <script lang="ts">
+  import { defineComponent, onMounted, ref, provide, nextTick } from "vue";
+  export default defineComponent({
+    name: "popup",
+    components: {},
+    setup(props, ctx) {
+      return {}; 
+    },
+  });
+  </script>
+  <style scoped lang="less">
+  .popup {
+      widows: 10px;
+      height: 10px;
+      background-color: rebeccapurple;
+  }
+  </style>
\ No newline at end of file
diff --git a/cc-inspector/yarn.lock b/cc-inspector/yarn.lock
index 7b410e7..349f5ed 100644
--- a/cc-inspector/yarn.lock
+++ b/cc-inspector/yarn.lock
@@ -1034,7 +1034,7 @@
   resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
   integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
 
-"@xuyanfeng/cc-ui@0.2.14":
+"@xuyanfeng/cc-ui@^0.2.14":
   version "0.2.14"
   resolved "https://registry.yarnpkg.com/@xuyanfeng/cc-ui/-/cc-ui-0.2.14.tgz#799d20ec150f9c32530f42822a18f39b76410e33"
   integrity sha512-YyL1GeitR2orKNPQfpDkKeW5O33vgE0fJNgYCKauzbt5KVaz99DZR5NFSa9WYz5MPfyOpAK/1ImQX1R2ZtIsSQ==