Página Principal Explorar Ajuda
Registe-se Iniciar Sessão
siwei
/
dify
1
0
Fork 0
Ficheiros Problemas 0 Pull Requests 0 Wiki
Ver Fonte

Chrome Dify Chatbot Plug-in (#1378)

Co-authored-by: luowei <glpat-EjySCyNjWiLqAED-YmwM>
Co-authored-by: crazywoola <427733928@qq.com>
Charlie.Wei há 2 anos atrás
pai
8c4ae98f3d
commit
288705fefd
14 ficheiros alterados com 187 adições e 0 exclusões
Visão Dividida Mostrar Estatísticas Diff
  1. 35 0
      third-party/chrome plug-in/README_CN.md
  2. 28 0
      third-party/chrome plug-in/content.js
  3. BIN
      third-party/chrome plug-in/images/128.png
  4. BIN
      third-party/chrome plug-in/images/16.png
  5. BIN
      third-party/chrome plug-in/images/32.png
  6. BIN
      third-party/chrome plug-in/images/48.png
  7. BIN
      third-party/chrome plug-in/images/img-1.png
  8. BIN
      third-party/chrome plug-in/images/img-2.png
  9. BIN
      third-party/chrome plug-in/images/img-3.png
  10. BIN
      third-party/chrome plug-in/images/img-4.png
  11. BIN
      third-party/chrome plug-in/images/img-5.png
  12. 29 0
      third-party/chrome plug-in/manifest.json
  13. 56 0
      third-party/chrome plug-in/options.html
  14. 39 0
      third-party/chrome plug-in/options.js

+ 35 - 0
third-party/chrome plug-in/README_CN.md
Ver Ficheiro 

@@ -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)

Diff do ficheiro suprimidas por serem muito extensas
+ 28 - 0
third-party/chrome plug-in/content.js


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


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


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


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


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


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


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


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


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


+ 29 - 0
third-party/chrome plug-in/manifest.json
Ver Ficheiro 

@@ -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
Ver Ficheiro 

@@ -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
Ver Ficheiro 

@@ -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;
 
+  }
 
+});

Alguns ficheiros não foram mostrados porque muitos ficheiros mudaram neste diff