Phase 7 Task 7: 插件与集成系统
- 创建 plugin_manager.py 模块
- PluginManager: 插件管理主类
- ChromeExtensionHandler: Chrome 插件处理
- BotHandler: 飞书/钉钉/Slack 机器人处理
- WebhookIntegration: Zapier/Make Webhook 集成
- WebDAVSync: WebDAV 同步管理
- 创建完整的 Chrome 扩展代码
- manifest.json, background.js, content.js, content.css
- popup.html/js: 弹出窗口界面
- options.html/js: 设置页面
- 支持网页剪藏、选中文本保存、项目选择
- 更新 schema.sql 添加插件相关数据库表
- plugins: 插件配置表
- bot_sessions: 机器人会话表
- webhook_endpoints: Webhook 端点表
- webdav_syncs: WebDAV 同步配置表
- plugin_activity_logs: 插件活动日志表
- 更新 main.py 添加插件相关 API 端点
- GET/POST /api/v1/plugins - 插件管理
- POST /api/v1/plugins/chrome/clip - Chrome 插件保存网页
- POST /api/v1/bots/webhook/{platform} - 接收机器人消息
- GET /api/v1/bots/sessions - 机器人会话列表
- POST /api/v1/webhook-endpoints - 创建 Webhook 端点
- POST /webhook/{type}/{token} - 接收外部 Webhook
- POST /api/v1/webdav-syncs - WebDAV 同步配置
- POST /api/v1/webdav-syncs/{id}/test - 测试 WebDAV 连接
- POST /api/v1/webdav-syncs/{id}/sync - 触发 WebDAV 同步
- 更新 requirements.txt 添加插件依赖
- beautifulsoup4: HTML 解析
- webdavclient3: WebDAV 客户端
- 更新 STATUS.md 和 README.md 开发进度
This commit is contained in:
OpenClaw Bot
204
chrome-extension/content.js
Normal file
204
chrome-extension/content.js
Normal file
@@ -0,0 +1,204 @@
|
||||
// InsightFlow Chrome Extension - Content Script
|
||||
// 在页面中注入，处理页面交互
|
||||
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
// 防止重复注入
|
||||
if (window.insightflowInjected) return;
|
||||
window.insightflowInjected = true;
|
||||
|
||||
// 创建浮动按钮
|
||||
let floatingButton = null;
|
||||
let selectionPopup = null;
|
||||
|
||||
// 监听选中文本
|
||||
document.addEventListener('mouseup', handleSelection);
|
||||
document.addEventListener('keyup', handleSelection);
|
||||
|
||||
function handleSelection(e) {
|
||||
const selection = window.getSelection();
|
||||
const text = selection.toString().trim();
|
||||
|
||||
if (text.length > 0) {
|
||||
showFloatingButton(selection);
|
||||
} else {
|
||||
hideFloatingButton();
|
||||
hideSelectionPopup();
|
||||
}
|
||||
}
|
||||
|
||||
// 显示浮动按钮
|
||||
function showFloatingButton(selection) {
|
||||
if (!floatingButton) {
|
||||
floatingButton = document.createElement('div');
|
||||
floatingButton.className = 'insightflow-float-btn';
|
||||
floatingButton.innerHTML = `
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 5v14M5 12h14"/>
|
||||
</svg>
|
||||
`;
|
||||
floatingButton.title = '保存到 InsightFlow';
|
||||
document.body.appendChild(floatingButton);
|
||||
|
||||
floatingButton.addEventListener('click', () => {
|
||||
const text = window.getSelection().toString().trim();
|
||||
if (text) {
|
||||
showSelectionPopup(text);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 定位按钮
|
||||
const range = selection.getRangeAt(0);
|
||||
const rect = range.getBoundingClientRect();
|
||||
|
||||
floatingButton.style.left = `${rect.right + window.scrollX - 40}px`;
|
||||
floatingButton.style.top = `${rect.top + window.scrollY - 45}px`;
|
||||
floatingButton.style.display = 'flex';
|
||||
}
|
||||
|
||||
// 隐藏浮动按钮
|
||||
function hideFloatingButton() {
|
||||
if (floatingButton) {
|
||||
floatingButton.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// 显示选择弹窗
|
||||
function showSelectionPopup(text) {
|
||||
hideFloatingButton();
|
||||
|
||||
if (!selectionPopup) {
|
||||
selectionPopup = document.createElement('div');
|
||||
selectionPopup.className = 'insightflow-popup';
|
||||
document.body.appendChild(selectionPopup);
|
||||
}
|
||||
|
||||
selectionPopup.innerHTML = `
|
||||
<div class="insightflow-popup-header">
|
||||
<span>保存到 InsightFlow</span>
|
||||
<button class="insightflow-close-btn">×</button>
|
||||
</div>
|
||||
<div class="insightflow-popup-content">
|
||||
<div class="insightflow-text-preview">${escapeHtml(text.substring(0, 200))}${text.length > 200 ? '...' : ''}</div>
|
||||
<div class="insightflow-actions">
|
||||
<button class="insightflow-btn insightflow-btn-primary" id="if-save-quick">快速保存</button>
|
||||
<button class="insightflow-btn" id="if-save-select">选择项目...</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
selectionPopup.style.display = 'block';
|
||||
|
||||
// 定位弹窗
|
||||
const selection = window.getSelection();
|
||||
const range = selection.getRangeAt(0);
|
||||
const rect = range.getBoundingClientRect();
|
||||
|
||||
selectionPopup.style.left = `${Math.min(rect.left + window.scrollX, window.innerWidth - 320)}px`;
|
||||
selectionPopup.style.top = `${rect.bottom + window.scrollY + 10}px`;
|
||||
|
||||
// 绑定事件
|
||||
selectionPopup.querySelector('.insightflow-close-btn').addEventListener('click', hideSelectionPopup);
|
||||
selectionPopup.querySelector('#if-save-quick').addEventListener('click', () => saveQuick(text));
|
||||
selectionPopup.querySelector('#if-save-select').addEventListener('click', () => saveWithProject(text));
|
||||
}
|
||||
|
||||
// 隐藏选择弹窗
|
||||
function hideSelectionPopup() {
|
||||
if (selectionPopup) {
|
||||
selectionPopup.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// 快速保存
|
||||
async function saveQuick(text) {
|
||||
hideSelectionPopup();
|
||||
|
||||
chrome.runtime.sendMessage({
|
||||
action: 'clipPage',
|
||||
selectionText: text
|
||||
});
|
||||
}
|
||||
|
||||
// 选择项目保存
|
||||
async function saveWithProject(text) {
|
||||
// 获取项目列表
|
||||
chrome.runtime.sendMessage({ action: 'fetchProjects' }, (response) => {
|
||||
if (response.success && response.projects.length > 0) {
|
||||
showProjectSelector(text, response.projects);
|
||||
} else {
|
||||
saveQuick(text); // 失败时快速保存
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 显示项目选择器
|
||||
function showProjectSelector(text, projects) {
|
||||
selectionPopup.innerHTML = `
|
||||
<div class="insightflow-popup-header">
|
||||
<span>选择项目</span>
|
||||
<button class="insightflow-close-btn">×</button>
|
||||
</div>
|
||||
<div class="insightflow-popup-content">
|
||||
<div class="insightflow-project-list">
|
||||
${projects.map(p => `
|
||||
<div class="insightflow-project-item" data-id="${p.id}">
|
||||
<div class="insightflow-project-name">${escapeHtml(p.name)}</div>
|
||||
<div class="insightflow-project-desc">${escapeHtml(p.description || '').substring(0, 50)}</div>
|
||||
</div>
|
||||
`).join('')}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
selectionPopup.querySelector('.insightflow-close-btn').addEventListener('click', hideSelectionPopup);
|
||||
|
||||
// 绑定项目选择事件
|
||||
selectionPopup.querySelectorAll('.insightflow-project-item').forEach(item => {
|
||||
item.addEventListener('click', () => {
|
||||
const projectId = item.dataset.id;
|
||||
saveToProject(text, projectId);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 保存到指定项目
|
||||
async function saveToProject(text, projectId) {
|
||||
hideSelectionPopup();
|
||||
|
||||
chrome.runtime.sendMessage({
|
||||
action: 'getConfig'
|
||||
}, (config) => {
|
||||
// 临时设置默认项目
|
||||
config.defaultProjectId = projectId;
|
||||
chrome.runtime.sendMessage({
|
||||
action: 'saveConfig',
|
||||
config: config
|
||||
}, () => {
|
||||
chrome.runtime.sendMessage({
|
||||
action: 'clipPage',
|
||||
selectionText: text
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// HTML 转义
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
// 点击页面其他地方关闭弹窗
|
||||
document.addEventListener('click', (e) => {
|
||||
if (selectionPopup && !selectionPopup.contains(e.target) &&
|
||||
floatingButton && !floatingButton.contains(e.target)) {
|
||||
hideSelectionPopup();
|
||||
hideFloatingButton();
|
||||
}
|
||||
});
|
||||
|
||||
})();
|
||||
Reference in New Issue
Block a user