Pārlūkot izejas kodu

Chrome Dify Chatbot Plug-in (#1378)

Co-authored-by: luowei <glpat-EjySCyNjWiLqAED-YmwM>
Co-authored-by: crazywoola <427733928@qq.com>
Charlie.Wei 1 gadu atpakaļ
vecāks
revīzija
288705fefd

+ 35 - 0
third-party/chrome 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)

Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 28 - 0
third-party/chrome plug-in/content.js


BIN
third-party/chrome plug-in/images/128.png


BIN
third-party/chrome plug-in/images/16.png


BIN
third-party/chrome plug-in/images/32.png


BIN
third-party/chrome plug-in/images/48.png


BIN
third-party/chrome plug-in/images/img-1.png


BIN
third-party/chrome plug-in/images/img-2.png


BIN
third-party/chrome plug-in/images/img-3.png


BIN
third-party/chrome plug-in/images/img-4.png


BIN
third-party/chrome plug-in/images/img-5.png


+ 29 - 0
third-party/chrome 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"
+  }
+}

+ 56 - 0
third-party/chrome 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>

+ 39 - 0
third-party/chrome 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;
+  }
+});

Daži faili netika attēloti, jo izmaiņu fails ir pārāk liels