change catalogue and update readme

third-party/chrome plug-in/README_CN.md

+## Chrome Dify ChatBot插件
+
+### 方式1：Chrome插件商店 * [点击访问](https://chrome.google.com/webstore/detail/dify-chatbot/ceehdapohffmjmkdcifjofadiaoeggaf/related?hl=zh-CN&authuser=0) *
+ 
+### 方式2：本地开发者模式加载
+
+- 进入Chrome浏览器管理扩展程序，可直接访问 [chrome://extensions/](chrome://extensions/)
+- 选择开启 “开发者模式”，并点击 “加载已解压的扩展程序”
+![img-1.png](images/img-1.png)
+- 然后打开插件源文件所在根目录
+  - third-party
+    - chrome plug-in
+      - content.js          浮动按钮JS脚本
+      - favicon.png         插件图标
+      - manifest.json       插件描述文件
+      - options.css         插件配置页面样式文件
+      - options.html        插件配置静态HTML页面
+      - options.js          插件配置JS脚本
+
+### 插件导入完成后，后续配置无差异
+- 初始化设置Dify 应用配置，分别输入Dify根域名和应用Token，Token可以在Dify应用嵌入中获取，如图：
+![img-2.png](images/img-2.png)
+![img-3.png](images/img-3.png)
+- 点击保存，确认提示配置成功即可
+![img-4.png](images/img-4.png)
+- 保险起见重启浏览器确保所有分页刷新成功
+- Chrome打开任意页面均可正常加载DIfy机器人浮动栏，后续如需更换机器人只需要变更Token即可
+![img-5.png](images/img-5.png)
\ No newline at end of file

chrome plug-in/content.js → third-party/chrome plug-in/content.js

@@ -56,17 +56,10 @@ async function embedChatbot() {
     iframe.src = `${baseUrl}/chat/${difyChatbotConfig.token}`
     iframe.style.cssText = 'border: none; position: fixed; flex-direction: column; justify-content: space-between; box-shadow: rgba(150, 150, 150, 0.2) 0px 10px 30px 0px, rgba(150, 150, 150, 0.2) 0px 0px 0px 1px; bottom: 6.7rem; right: 1rem; width: 30rem; height: 48rem; border-radius: 0.75rem; display: flex; z-index: 2147483647; overflow: hidden; left: unset; background-color: #F3F4F6;'
     document.body.appendChild(iframe);
-
-    // 计算更新入口位置，避免被遮挡
-    // const targetButton = document.getElementById('dify-chatbot-bubble-button');
-    // targetButton.style.right =
-    //   handleRemToPx(iframe.style.width) +
-    //   handleRemToPx(iframe.style.right) +
-    //   8 + "px";
   }
 
   /**
-   * rem转换为px
+   * rem to px
    * @param {*} rem ：30rem
    */
   function handleRemToPx(rem) {
@@ -74,7 +67,7 @@ async function embedChatbot() {
     let pxValue = 0;
     try {
       const regex = /\d+/;
-      // 提取数字部分，并转换为数字类型
+      // extract the numeric part and convert it to a numeric type
       const remValue = parseInt(regex.exec(rem)[0], 10);
       const rootFontSize = parseFloat(
         window.getComputedStyle(document.documentElement).fontSize
@@ -87,39 +80,39 @@ async function embedChatbot() {
   }
 
   /**
-   * 支持元素拖动
-   * @param {*} targetButton 入口元素
+   * support element drag
+   * @param {*} targetButton entry element
    */
   function handleElementDrag(targetButton) {
-    // 定义变量来保存鼠标位置
+    // define a variable to hold the mouse position
     let mouseX = 0,
       mouseY = 0,
       offsetX = 0,
       offsetY = 0;
 
-    // 监听鼠标按下事件，获取鼠标位置和元素位置
+    // Listen for mouse press events, get mouse position and element position
     targetButton.addEventListener("mousedown", function (event) {
-      // 计算鼠标位置
+      // calculate mouse position
       mouseX = event.clientX;
       mouseY = event.clientY;
 
-      // 计算元素位置
+      // calculate element position
       const rect = targetButton.getBoundingClientRect();
       offsetX = mouseX - rect.left;
       offsetY = mouseY - rect.top;
 
-      // 监听鼠标移动事件
+      // listen for mouse movement events
       document.addEventListener("mousemove", onMouseMove);
     });
 
-    // 监听鼠标抬起事件，停止监听鼠标移动事件
+    // listen for mouse lift events and stop listening for mouse move events
     document.addEventListener("mouseup", function () {
       document.removeEventListener("mousemove", onMouseMove);
     });
 
-    // 鼠标移动事件处理程序，更新元素位置
+    // the mouse moves the event handler to update the element position
     function onMouseMove(event) {
-      // 计算元素位置
+      // calculate element position
       let newX = event.clientX - offsetX,
         newY = event.clientY - offsetY;
 
@@ -130,11 +123,11 @@ async function embedChatbot() {
       const maxX = viewportWidth - targetButton.offsetWidth,
         maxY = viewportHeight - targetButton.offsetHeight;
 
-      // 应用限制
+      // application limitation
       newX = Math.max(12, Math.min(newX, maxX));
       newY = Math.max(12, Math.min(newY, maxY));
 
-      // 更新元素位置
+      // update element position
       targetButton.style.left = newX + "px";
       targetButton.style.top = newY + "px";
     }
@@ -171,7 +164,7 @@ async function embedChatbot() {
       }
     });
   } else {
-    // 浮动图标添加任意拖拽
+    // add any drag and drop to the floating icon
     handleElementDrag(targetButton);
   }
 }
\ No newline at end of file

chrome plug-in/manifest.json → third-party/chrome plug-in/manifest.json

 {
   "manifest_version": 3,
   "name": "Dify Chatbot",
-  "version": "1.0",
+  "version": "1.1",
   "description": "This is a chrome extension to inject a dify chatbot on pages",
   "content_scripts": [
     {

chrome plug-in/options.css → third-party/chrome plug-in/options.css

@@ -9,6 +9,7 @@ h2 {
 
 label {
   display: block;
+  margin-top: 10px;
   margin-bottom: 10px;
 }
 

chrome plug-in/options.html → third-party/chrome plug-in/options.html

@@ -6,15 +6,14 @@
 </head>
 <body>
   <h2>Dify Chatbot Extension Options</h2>
-  <label for="base-url">Base URL:</label>
+  <label for="base-url"><span class="req">*</span> Base URL:</label>
   <input type="text" id="base-url" name="base-url" value="">
-  <span class="required">*</span>
   
-  <label for="token">Token:</label>
+  <label for="token"><span class="required">*</span> Token:</label>
   <input type="text" id="token" name="token" value="">
-  <span class="required">*</span>
-  
+
   <button id="save-button">Save</button>
+  
   <script src="options.js"></script>
 </body>
 </html>
\ No newline at end of file

chrome plug-in/options.js → third-party/chrome plug-in/options.js

@@ -15,8 +15,20 @@ document.getElementById('save-button').addEventListener('click', function() {
   });
 });
 
-// 在页面加载时从chrome.storage中加载参数
+// Load parameters from chrome.storage when the page loads
 chrome.storage.sync.get(['baseUrl', 'token'], function(result) {
-  document.getElementById('base-url').value = result.baseUrl;
-  document.getElementById('token').value = result.token;
+  const baseUrlInput = document.getElementById('base-url');
+  const tokenInput = document.getElementById('token');
+
+  if (result.baseUrl) {
+    baseUrlInput.value = result.baseUrl;
+  } else {
+    baseUrlInput.placeholder = 'Dify Domain Url';
+  }
+
+  if (result.token) {
+    tokenInput.value = result.token;
+  } else {
+    tokenInput.placeholder = 'Application Embedded Token';
+  }
 });
\ No newline at end of file