利用Dify+chrome plugin做一个基于网页的聊天机器人

nil
206 阅读3分钟

写在前面

在信息爆炸的时代，我们每天都要浏览大量网页内容。如何快速获取网页核心信息、进行跨语言阅读成为了提升效率的关键。本文将带你通过Dify平台和Chrome插件技术，打造一个智能网页助手，实现一键总结、翻译和智能对话功能。

一句话概括

使用Dify构建智能聊天机器人，通过Chrome插件注入网页，实现基于当前页面内容的智能对话、总结和翻译功能。

效果

image.png

安装插件后，浏览器右下角会出现浮动按钮，点击即可与当前网页内容进行智能交互：

  • 自动获取网页主要内容并生成摘要

  • 支持多语言翻译

  • 预设常见问题快速提问

  • 沉浸式聊天体验不打断浏览

实现

首先，用docker在本地安装dify，然后创建一个工作流

使用Dify搭建一个聊天机器人

image.png

点击这里直接下载dify流程,导入到dify即可使用。

使用trae写一个chrome插件

创建插件基本结构：

chrome-extension/
├── manifest.json
├── background.js
├── content.js
├── config.js
├── embed.min.js
└── icons/
    ├── icon16.png
    ├── icon48.png
    └── icon128.png

核心代码

// 创建Dify聊天窗口容器
function createChatContainer() {
  const chatContainer = document.createElement('div');
  chatContainer.id = 'dify-chat-container';
  chatContainer.style.display = 'none';
  document.body.appendChild(chatContainer);

  // 加载配置脚本
  const configScript = document.createElement('script');
  configScript.src = chrome.runtime.getURL('config.js');
  
  configScript.onerror = function() {
    console.error('Failed to load config script');
  };
  
  configScript.onload = function() {
    console.log('Config script loaded successfully');
    
    // 加载Dify嵌入脚本
    const script = document.createElement('script');
    script.src = chrome.runtime.getURL('embed.min.js');
    script.id = 'YOUR_APP_ID'; // 替换为你的Dify应用ID
    script.defer = true;

    script.onerror = function() {
      console.error('Failed to load Dify script');
    };
    
    script.onload = function() {
      console.log('Dify script loaded successfully');
      // 初始化聊天机器人
      if (window.DifyChatbot) {
        window.DifyChatbot.init(window.difyChatbotConfig);
      }
    };
    
    chatContainer.appendChild(script);
  };
  
  chatContainer.appendChild(configScript);
}

// 创建浮动按钮
function createFloatingButton() {
  const button = document.createElement('div');
  button.id = 'floating-button';
  button.innerHTML = '<img src="' + chrome.runtime.getURL('icons/icon16.png') + '" alt="AI助手"/>';
  document.body.appendChild(button);

  // 按钮点击事件
  button.addEventListener('click', () => {
    const chatContainer = document.getElementById('dify-chat-container');
    if (chatContainer.style.display === 'none') {
      chatContainer.style.display = 'block';
    } else {
      chatContainer.style.display = 'none';
    }
  });
}

// 页面加载完成后初始化
window.addEventListener('load', () => {
  createChatContainer();
  createFloatingButton();
});

加载dify插件的config文件

window.difyChatbotConfig = {
  token: 'YOUR_APP_TOKEN', // 替换为你的Dify应用token
  baseUrl: 'http://127.0.0.1',
//   baseUrl:'http://localhost',
  inputs: { website: window.location.href },
  systemVariables: {},
  userVariables: {}
};

安装插件并测试

  • 打开Chrome浏览器，进入chrome://extensions/

  • 开启"开发者模式"

  • 点击"加载已解压的扩展程序"，选择插件文件夹

  • 访问任意网页，测试右下角浮动按钮功能

  • 点击按钮与AI助手交互，测试总结和翻译功能

源代码

完整源代码已上传至GitHub：项目地址

总结

通过结合Dify平台和Chrome插件技术，我们成功构建了一个智能网页助手。这种方案的优势在于：

  • 快速开发：利用Dify平台免去了训练AI模型的复杂过程

  • 灵活部署：Chrome插件形式无需额外安装软件

  • 强大功能：支持总结、翻译、问答等多种场景

  • 隐私保护：数据处理在用户本地完成

至此，这款功能强大的浏览器插件已成功开发完成！它为您提供了智能、便捷的网页交互新体验。

欢迎体验与反馈： 如果您在使用的过程中有任何疑问、建议或发现了有趣的玩法，非常欢迎在评论区留言或私信交流。期待能与大家共同探讨技术细节、分享使用心得，一起学习进步！

让我们一起探索AI工具的无限可能！

avatar
文章
阅读
粉丝