1 年間前 · 288705fefd
--- a/plug-in/README_CN.md
+++ b/plug-in/README_CN.md
@@ -0,0 +1,35 @@
 
				+## 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)
			
--- a/plug-in/content.js
+++ b/plug-in/content.js
--- a/plug-in/images/128.png
+++ b/plug-in/images/128.png
--- a/plug-in/images/16.png
+++ b/plug-in/images/16.png
--- a/plug-in/images/32.png
+++ b/plug-in/images/32.png
--- a/plug-in/images/48.png
+++ b/plug-in/images/48.png
--- a/plug-in/images/img-1.png
+++ b/plug-in/images/img-1.png
--- a/plug-in/images/img-2.png
+++ b/plug-in/images/img-2.png
--- a/plug-in/images/img-3.png
+++ b/plug-in/images/img-3.png
--- a/plug-in/images/img-4.png
+++ b/plug-in/images/img-4.png
--- a/plug-in/images/img-5.png
+++ b/plug-in/images/img-5.png
--- a/plug-in/manifest.json
+++ b/plug-in/manifest.json
@@ -0,0 +1,29 @@
 
				+{
			
 
				+  "manifest_version": 3,
			
 
				+  "name": "Dify Chatbot",
			
 
				+  "version": "1.3",
			
 
				+  "description": "This is a chrome extension to inject a dify chatbot on any pages",
			
 
				+  "content_scripts": [
			
 
				+    {
			
 
				+      "matches": ["<all_urls>"],
			
 
				+      "js": ["content.js"]
			
 
				+    }
			
 
				+  ],
			
 
				+  "permissions": ["webRequest", "storage"],
			
 
				+  "action": {
			
 
				+      "default_popup": "options.html",
			
 
				+      "default_icon": {
			
 
				+        "16": "images/16.png",
			
 
				+        "32": "images/32.png",
			
 
				+        "48": "images/48.png",
			
 
				+        "128": "images/128.png"
			
 
				+        
			
 
				+      }
			
 
				+  },
			
 
				+  "icons": {
			
 
				+    "16": "images/16.png",
			
 
				+    "32": "images/32.png",
			
 
				+    "48": "images/48.png",
			
 
				+    "128": "images/128.png"
			
 
				+  }
			
 
				+}
			
--- a/plug-in/options.html
+++ b/plug-in/options.html
@@ -0,0 +1,56 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+
			
 
				+<head>
			
 
				+  <title>Dify Chatbot Extension</title>
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
			
 
				+</head>
			
 
				+
			
 
				+<body class="bg-gray-100 py-8 px-4 w-96">
			
 
				+  <div class="max-w-md mx-auto bg-white shadow-md rounded-lg p-4">
			
 
				+    <h2 class="text-2xl font-semibold mb-4">Dify Chatbot Extension</h2>
			
 
				+    <form>
			
 
				+      <div class="mb-4 flex items-center">
			
 
				+        <div class="w-1/4">
			
 
				+          <label for="base-url" class="block font-semibold text-gray-700">Base URL</label>
			
 
				+        </div>
			
 
				+        <div class="w-3/4">
			
 
				+          <input type="text" id="base-url" name="base-url" value=""
			
 
				+            class="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:border-blue-400"
			
 
				+            placeholder="https://udify.app">
			
 
				+        </div>
			
 
				+      </div>
			
 
				+
			
 
				+      <div class="mb-4 flex items-center">
			
 
				+        <div class="w-1/4">
			
 
				+          <label for="token" class="block font-semibold text-gray-700">Token</label>
			
 
				+        </div>
			
 
				+        <div class="w-3/4">
			
 
				+          <input type="text" id="token" name="token" value=""
			
 
				+            class="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:border-blue-400"
			
 
				+            placeholder="Application Embedded Token">
			
 
				+        </div>
			
 
				+      </div>
			
 
				+
			
 
				+      <div class="mb-4 flex items-center">
			
 
				+        <div class="w-1/4"></div>
			
 
				+        <div class="w-3/4">
			
 
				+          <span id="error-tip" class="text-red-600"></span>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+
			
 
				+      <div class="mb-4 flex items-center">
			
 
				+        <div class="w-1/4"></div>
			
 
				+        <div class="w-3/4">
			
 
				+          <button id="save-button"
			
 
				+            class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 focus:outline-none focus:bg-blue-600">Save</button>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </form>
			
 
				+  </div>
			
 
				+
			
 
				+  <script src="options.js"></script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/plug-in/options.js
+++ b/plug-in/options.js
@@ -0,0 +1,39 @@
 
				+
			
 
				+document.getElementById('save-button').addEventListener('click', function (e) {
			
 
				+  e.preventDefault();
			
 
				+  var baseUrl = document.getElementById('base-url').value;
			
 
				+  var token = document.getElementById('token').value;
			
 
				+  var errorTip = document.getElementById('error-tip');
			
 
				+
			
 
				+  if (baseUrl.trim() === "" || token.trim() === "") {
			
 
				+    if (baseUrl.trim() === "") {
			
 
				+      errorTip.textContent = "Base URL cannot be empty.";
			
 
				+    } else {
			
 
				+      errorTip.textContent = "Token cannot be empty.";
			
 
				+    }
			
 
				+  } else {
			
 
				+    errorTip.textContent = "";
			
 
				+
			
 
				+    chrome.storage.sync.set({
			
 
				+      'baseUrl': baseUrl,
			
 
				+      'token': token
			
 
				+    }, function () {
			
 
				+      alert('Save Success!');
			
 
				+    });
			
 
				+  }
			
 
				+
			
 
				+});
			
 
				+
			
 
				+// Load parameters from chrome.storage when the page loads
			
 
				+chrome.storage.sync.get(['baseUrl', 'token'], function (result) {
			
 
				+  const baseUrlInput = document.getElementById('base-url');
			
 
				+  const tokenInput = document.getElementById('token');
			
 
				+
			
 
				+  if (result.baseUrl) {
			
 
				+    baseUrlInput.value = result.baseUrl;
			
 
				+  }
			
 
				+
			
 
				+  if (result.token) {
			
 
				+    tokenInput.value = result.token;
			
 
				+  }
			
 
				+});