├── AUTHORERS ├── README.md ├── README_CN.md ├── README_CN.txt ├── content.js ├── favicon.png ├── images ├── .DS_Store ├── 128.png ├── 16.png ├── 32.png ├── 48.png ├── favicon.ico ├── img-1.png ├── img-2.png ├── img-3.png └── img-4.png ├── manifest.json ├── options.css ├── options.html ├── options.js └── tailwind.css /AUTHORERS: -------------------------------------------------------------------------------- 1 | charli117 -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Chrome Dify ChatBot插件 2 | 3 | ### Method 1: Chrome Extension Store * [Click to visit](https://chrome.google.com/webstore/detail/dify-chatbot/ceehdapohffmjmkdcifjofadiaoeggaf/related?hl=zh-CN&authuser=0) * 4 | 5 | ### Method 2: Load in Developer Mode Locally 6 | 7 | - Go to Chrome browser extension management, you can directly access [chrome://extensions/](chrome://extensions/) 8 | - Enable "Developer mode" and click "Load unpacked extension" 9 | 10 | ![img-1.png](images/img-1.png) 11 | 12 | - Then open the root directory of the extension source file 13 | - third-party 14 | - chrome plug-in 15 | - content.js Floating button JS script 16 | - favicon.png Extension icon 17 | - manifest.json Extension description file 18 | - options.css Extension configuration page style file 19 | - options.html Extension configuration static HTML page 20 | - options.js Extension configuration JS script 21 | 22 | ### After importing the extension, subsequent configurations are the same 23 | - Create Dify application configuration, click on "Embed" in the application overview, switch to the Chrome browser extension installation view, click the copy button to get the ChatBot URL, as shown in the figure: 24 | 25 | ![img-2.png](images/img-2.png) 26 | - Click "Save" and confirm the prompt to successfully configure 27 | 28 | ![img-3.png](images/img-3.png) 29 | 30 | - Restart the browser to ensure that all pages are refreshed successfully 31 | - Dify chatbot floating bar can be loaded normally on any page in Chrome, if you need to change the chatbot, just change the ChatBot URL 32 | 33 | ![img-4.png](images/img-4.png) -------------------------------------------------------------------------------- /README_CN.md: -------------------------------------------------------------------------------- 1 | ## Chrome Dify ChatBot插件 2 | 3 | ### 方式1：Chrome插件商店 * [点击访问](https://chrome.google.com/webstore/detail/dify-chatbot/ceehdapohffmjmkdcifjofadiaoeggaf/related?hl=zh-CN&authuser=0) * 4 | 5 | ### 方式2：本地开发者模式加载 6 | 7 | - 进入Chrome浏览器管理扩展程序，可直接访问 [chrome://extensions/](chrome://extensions/) 8 | - 选择开启 “开发者模式”，并点击 “加载已解压的扩展程序” 9 | 10 | ![img-1.png](images/img-1.png) 11 | 12 | - 然后打开插件源文件所在根目录 13 | - third-party 14 | - chrome plug-in 15 | - content.js 浮动按钮JS脚本 16 | - favicon.png 插件图标 17 | - manifest.json 插件描述文件 18 | - options.css 插件配置页面样式文件 19 | - options.html 插件配置静态HTML页面 20 | - options.js 插件配置JS脚本 21 | 22 | ### 插件导入完成后，后续配置无差异 23 | - 创建Dify应用配置，在应用概览中点击嵌入，切换到安装Chrome浏览器扩展视图，点击copy按钮获取ChatBot Url，如图： 24 | 25 | ![img-2.png](images/img-2.png) 26 | - 点击保存，确认提示配置成功即可 27 | 28 | ![img-3.png](images/img-3.png) 29 | 30 | - 保险起见重启浏览器确保所有分页刷新成功 31 | - Chrome打开任意页面均可正常加载DIfy机器人浮动栏，后续如需更换机器人只需要变更ChatBot Url即可 32 | 33 | ![img-4.png](images/img-4.png) -------------------------------------------------------------------------------- /README_CN.txt: -------------------------------------------------------------------------------- 1 | ## Chrome Dify ChatBot插件 2 | 3 | 1、初始化设置Dify 应用配置，分别输入Dify根域名和应用Token，Token可以在Dify应用嵌入中获取； 4 | 2、点击保存，确认提示配置成功即可； 5 | 3、保险起见重启浏览器确保所有分页刷新成功； 6 | 4、Chrome打开任意页面均可正常加载DIfy机器人浮动栏，后续如需更换机器人只需要变更Token即可； -------------------------------------------------------------------------------- /content.js: -------------------------------------------------------------------------------- 1 | const storage = chrome.storage.sync; 2 | chrome.storage.sync.get(['chatbotUrl'], function(result) { 3 | window.difyChatbotConfig = { 4 | chatbotUrl: result.chatbotUrl, 5 | }; 6 | }); 7 | 8 | document.body.onload = embedChatbot; 9 | 10 | async function embedChatbot() { 11 | const difyChatbotConfig = window.difyChatbotConfig; 12 | if (!difyChatbotConfig) { 13 | console.warn('Dify Chatbot Url is empty or is not provided'); 14 | return; 15 | } 16 | const openIcon = ` 24 | 30 | `; 31 | const closeIcon = ` 39 | 46 | `; 47 | 48 | // create iframe 49 | function createIframe() { 50 | const iframe = document.createElement('iframe'); 51 | iframe.allow = "fullscreen;microphone" 52 | iframe.title = "dify chatbot bubble window" 53 | iframe.id = 'dify-chatbot-bubble-window' 54 | iframe.src = difyChatbotConfig.chatbotUrl 55 | 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;' 56 | document.body.appendChild(iframe); 57 | } 58 | 59 | /** 60 | * rem to px 61 | * @param {*} rem ：30rem 62 | */ 63 | function handleRemToPx(rem) { 64 | if (!rem) return; 65 | let pxValue = 0; 66 | try { 67 | const regex = /\d+/; 68 | // extract the numeric part and convert it to a numeric type 69 | const remValue = parseInt(regex.exec(rem)[0], 10); 70 | const rootFontSize = parseFloat( 71 | window.getComputedStyle(document.documentElement).fontSize 72 | ); 73 | pxValue = remValue * rootFontSize; 74 | } catch (error) { 75 | console.error(error); 76 | } 77 | return pxValue; 78 | } 79 | 80 | /** 81 | * support element drag 82 | * @param {*} targetButton entry element 83 | */ 84 | function handleElementDrag(targetButton) { 85 | // define a variable to hold the mouse position 86 | let mouseX = 0, 87 | mouseY = 0, 88 | offsetX = 0, 89 | offsetY = 0; 90 | 91 | // Listen for mouse press events, get mouse position and element position 92 | targetButton.addEventListener("mousedown", function (event) { 93 | // calculate mouse position 94 | mouseX = event.clientX; 95 | mouseY = event.clientY; 96 | 97 | // calculate element position 98 | const rect = targetButton.getBoundingClientRect(); 99 | offsetX = mouseX - rect.left; 100 | offsetY = mouseY - rect.top; 101 | 102 | // listen for mouse movement events 103 | document.addEventListener("mousemove", onMouseMove); 104 | }); 105 | 106 | // listen for mouse lift events and stop listening for mouse move events 107 | document.addEventListener("mouseup", function () { 108 | document.removeEventListener("mousemove", onMouseMove); 109 | }); 110 | 111 | // the mouse moves the event handler to update the element position 112 | function onMouseMove(event) { 113 | // calculate element position 114 | let newX = event.clientX - offsetX, 115 | newY = event.clientY - offsetY; 116 | 117 | // 计算视线边界 118 | const viewportWidth = window.innerWidth, 119 | viewportHeight = window.innerHeight; 120 | 121 | const maxX = viewportWidth - targetButton.offsetWidth, 122 | maxY = viewportHeight - targetButton.offsetHeight; 123 | 124 | // application limitation 125 | newX = Math.max(12, Math.min(newX, maxX)); 126 | newY = Math.max(12, Math.min(newY, maxY)); 127 | 128 | // update element position 129 | targetButton.style.left = newX + "px"; 130 | targetButton.style.top = newY + "px"; 131 | } 132 | } 133 | 134 | const targetButton = document.getElementById("dify-chatbot-bubble-button"); 135 | 136 | if (!targetButton) { 137 | // create button 138 | const containerDiv = document.createElement("div"); 139 | containerDiv.id = 'dify-chatbot-bubble-button'; 140 | containerDiv.style.cssText = `position: fixed; bottom: 3rem; right: 1rem; width: 50px; height: 50px; border-radius: 25px; background-color: #155EEF; box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 8px 0px; cursor: move; z-index: 2147483647; transition: all 0.2s ease-in-out 0s; left: unset; transform: scale(1); :hover {transform: scale(1.1);}`; 141 | const displayDiv = document.createElement('div'); 142 | displayDiv.style.cssText = "display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; z-index: 2147483647;"; 143 | displayDiv.innerHTML = openIcon; 144 | containerDiv.appendChild(displayDiv); 145 | document.body.appendChild(containerDiv); 146 | handleElementDrag(containerDiv); 147 | 148 | // add click event to control iframe display 149 | containerDiv.addEventListener('click', function () { 150 | const targetIframe = document.getElementById('dify-chatbot-bubble-window'); 151 | if (!targetIframe) { 152 | createIframe(); 153 | displayDiv.innerHTML = closeIcon; 154 | return; 155 | } 156 | if (targetIframe.style.display === "none") { 157 | targetIframe.style.display = "block"; 158 | displayDiv.innerHTML = closeIcon; 159 | } else { 160 | targetIframe.style.display = "none"; 161 | displayDiv.innerHTML = openIcon; 162 | } 163 | }); 164 | } else { 165 | // add any drag and drop to the floating icon 166 | handleElementDrag(targetButton); 167 | } 168 | } -------------------------------------------------------------------------------- /favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/langgenius/chatbot-chrome-extension/c49f51fea22c23750b19e713e1db3d3b90c5b720/favicon.png -------------------------------------------------------------------------------- /images/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/langgenius/chatbot-chrome-extension/c49f51fea22c23750b19e713e1db3d3b90c5b720/images/.DS_Store -------------------------------------------------------------------------------- /images/128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/langgenius/chatbot-chrome-extension/c49f51fea22c23750b19e713e1db3d3b90c5b720/images/128.png -------------------------------------------------------------------------------- /images/16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/langgenius/chatbot-chrome-extension/c49f51fea22c23750b19e713e1db3d3b90c5b720/images/16.png -------------------------------------------------------------------------------- /images/32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/langgenius/chatbot-chrome-extension/c49f51fea22c23750b19e713e1db3d3b90c5b720/images/32.png -------------------------------------------------------------------------------- /images/48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/langgenius/chatbot-chrome-extension/c49f51fea22c23750b19e713e1db3d3b90c5b720/images/48.png -------------------------------------------------------------------------------- /images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/langgenius/chatbot-chrome-extension/c49f51fea22c23750b19e713e1db3d3b90c5b720/images/favicon.ico -------------------------------------------------------------------------------- /images/img-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/langgenius/chatbot-chrome-extension/c49f51fea22c23750b19e713e1db3d3b90c5b720/images/img-1.png -------------------------------------------------------------------------------- /images/img-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/langgenius/chatbot-chrome-extension/c49f51fea22c23750b19e713e1db3d3b90c5b720/images/img-2.png -------------------------------------------------------------------------------- /images/img-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/langgenius/chatbot-chrome-extension/c49f51fea22c23750b19e713e1db3d3b90c5b720/images/img-3.png -------------------------------------------------------------------------------- /images/img-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/langgenius/chatbot-chrome-extension/c49f51fea22c23750b19e713e1db3d3b90c5b720/images/img-4.png -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "manifest_version": 3, 3 | "name": "Dify Chatbot", 4 | "version": "1.5", 5 | "description": "This is a chrome extension to inject a dify chatbot on any pages", 6 | "content_scripts": [ 7 | { 8 | "matches": [""], 9 | "js": ["content.js"] 10 | } 11 | ], 12 | "permissions": ["webRequest", "storage"], 13 | "action": { 14 | "default_popup": "options.html", 15 | "default_icon": { 16 | "16": "images/16.png", 17 | "32": "images/32.png", 18 | "48": "images/48.png", 19 | "128": "images/128.png" 20 | 21 | } 22 | }, 23 | "icons": { 24 | "16": "images/16.png", 25 | "32": "images/32.png", 26 | "48": "images/48.png", 27 | "128": "images/128.png" 28 | } 29 | } -------------------------------------------------------------------------------- /options.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #f2f2f2; 3 | font-family: Arial, sans-serif; 4 | } 5 | 6 | h2 { 7 | color: #333; 8 | } 9 | 10 | label { 11 | display: block; 12 | margin-top: 10px; 13 | margin-bottom: 10px; 14 | } 15 | 16 | input[type="text"] { 17 | width: 280px; 18 | padding: 6px; 19 | } -------------------------------------------------------------------------------- /options.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dify Chatbot Extension 6 | 7 | 8 | 9 | 10 | 11 |
12 |

Dify Chatbot Extension

13 |
14 |
15 |
16 | 17 |
18 |
19 | 22 |
23 |
24 | 25 |
26 |
27 |
28 | 29 |
30 |
31 | 32 |
33 |
34 |
35 | 37 |
38 |
39 |
40 |
41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /options.js: -------------------------------------------------------------------------------- 1 | 2 | document.getElementById('save-button').addEventListener('click', function (e) { 3 | e.preventDefault(); 4 | const chatbotUrl = document.getElementById('chatbot-url').value; 5 | const errorTip = document.getElementById('error-tip'); 6 | 7 | if (chatbotUrl.trim() === "") { 8 | errorTip.textContent = "Dify ChatBot URL cannot be empty."; 9 | } else { 10 | errorTip.textContent = ""; 11 | 12 | chrome.storage.sync.set({ 13 | 'chatbotUrl': chatbotUrl, 14 | }, function () { 15 | alert('Save Success!'); 16 | }); 17 | } 18 | }); 19 | 20 | // Load parameters from chrome.storage when the page loads 21 | chrome.storage.sync.get(['chatbotUrl'], function (result) { 22 | const chatbotUrlInput = document.getElementById('chatbot-url'); 23 | 24 | if (result.chatbotUrl) { 25 | chatbotUrlInput.value = result.chatbotUrl; 26 | } 27 | 28 | }); --------------------------------------------------------------------------------