Ostrakon-VL-8B浏览器插件开发谷歌浏览器视觉辅助工具你有没有遇到过这样的情况浏览网页时看到一张复杂的图表想快速理解它的含义却要花时间仔细阅读图例和说明或者网页上某张图片加载失败了只留下一个空白区域和冰冷的“alt”文本让你对内容一无所知对于视障用户来说这个问题更加突出他们依赖屏幕阅读器而缺失或敷衍的图片描述会让他们的浏览体验大打折扣。今天我们就来动手解决这个问题。我将带你一步步开发一个谷歌浏览器插件它能把强大的视觉理解模型 Ostrakon-VL-8B 直接带到你的浏览器里。这个插件就像一个随时待命的视觉助手无论是想了解图片内容、为缺失的图片生成描述还是快速总结一个网页的截图它都能帮你轻松搞定。整个过程不需要你精通复杂的机器学习部署我们会用最直接的方式把模型的能力通过浏览器插件这个载体释放出来。1. 这个插件能帮你做什么在深入代码之前我们先看看这个插件具体能带来哪些便利。它主要围绕三个核心场景设计每一个都瞄准了实际浏览网页时的痛点。1.1 场景一右键获取图片智能描述这是最直接的功能。当你在网上看到任何图片——可能是一张信息图、一个产品示意图或者是一张充满细节的风景照——你只需要在图片上点击右键在右键菜单中就会多出一个选项比如“使用 Ostrakon-VL 分析此图片”。点击后插件会捕获这张图片发送给后台运行的 Ostrakon-VL-8B 模型。几秒钟后一个清晰、准确的文字描述就会以弹窗或侧边栏的形式呈现给你。这比你手动去揣摩图片内容要高效得多。对于学习、研究或者单纯满足好奇心都非常有用。1.2 场景二为破损图片生成替代文本网页无障碍访问Accessibility是一个重要但常被忽视的领域。许多网站图片的alt属性替代文本是空的或者只是简单的“图片”二字这对于使用屏幕阅读器的用户来说几乎毫无帮助。我们的插件可以监听网页的加载过程。当它检测到有图片因为网络问题加载失败显示为破损图标或者发现某个图片的alt属性为空或过于简单时可以自动触发。插件会尝试获取这张图片的原始地址将其发送给模型然后生成一段描述性的文字并动态地插入到图片的alt属性中。这样屏幕阅读器就能为用户读出有意义的描述极大地提升了网页的可访问性。1.3 场景三分析网页截图并总结有时候我们不仅关心某一张图片还想快速把握整个页面的核心内容。比如你打开一篇很长的技术博客或报告想先知道它大概讲了什么。插件可以提供一个按钮让你捕获当前整个浏览器窗口或页面某个区域的截图。这张截图随后会被送给 Ostrakon-VL-8B 模型。得益于模型强大的视觉-语言理解能力它不仅能识别截图中的文字还能理解整体的布局、图表关系然后为你生成一段简洁的页面内容摘要。这就像有一个助手先帮你快速浏览了一遍文章。2. 开发前的准备工作要开始开发我们需要准备好两方面的环境一个是 Ostrakon-VL-8B 模型服务另一个是 Chrome 插件开发的基础。2.1 启动 Ostrakon-VL-8B 模型服务我们的插件本身不直接运行模型那样太笨重了。插件会作为一个“客户端”通过网络请求与一个独立运行的模型服务“服务器”进行通信。你需要先让模型服务跑起来。假设你已经通过 Docker 或其他方式部署好了 Ostrakon-VL-8B 的 API 服务。关键是要确认这个服务提供了一个可以通过 HTTP 请求调用的接口。通常这类服务会有一个类似/v1/chat/completions或/generate的端点接收图片可能是 base64 编码或图片 URL和文本提示然后返回模型的文字回答。确保你知道这个服务的访问地址比如http://localhost:8000。记下这个地址和具体的 API 端点路径我们稍后在插件的代码里会用到。2.2 创建 Chrome 插件项目骨架Chrome 插件遵循 Manifest V3 (MV3) 规范。我们先来创建一个最基本的项目文件夹结构ostrakon-vl-helper/ ├── manifest.json # 插件的配置文件核心 ├── background.js # 后台服务脚本处理长时运行的任务 ├── content.js # 内容脚本注入到网页中与页面交互 ├── popup.html # 点击插件图标时弹出的界面 ├── popup.js # 弹出界面的交互逻辑 └── icons/ # 插件图标各种尺寸 ├── icon16.png ├── icon48.png └── icon128.png接下来我们逐一填充这些文件的核心内容。3. 构建插件核心Manifest 与通信架构Manifest V3 是新一代 Chrome 插件的基石它更安全对权限的控制也更严格。3.1 编写 manifest.json这个文件定义了插件的基本信息、权限和资源。{ manifest_version: 3, name: Ostrakon VL 视觉助手, version: 1.0, description: 利用 Ostrakon-VL-8B 模型为浏览器提供图片描述、无障碍访问和页面分析功能。, permissions: [ activeTab, contextMenus, scripting, storage ], host_permissions: [ http://localhost:8000/* // 允许与你的本地模型API通信 ], background: { service_worker: background.js }, content_scripts: [ { matches: [all_urls], js: [content.js], run_at: document_idle } ], action: { default_popup: popup.html, default_icon: { 16: icons/icon16.png, 48: icons/icon48.png, 128: icons/icon128.png } }, icons: { 16: icons/icon16.png, 48: icons/icon48.png, 128: icons/icon128.png } }关键点说明permissions: 我们申请了contextMenus来创建右键菜单scripting和activeTab为了与网页交互storage可能用来存一些用户设置比如模型API地址。host_permissions: 这是 MV3 的新特性明确声明插件需要访问哪些外部地址。这里填你的模型服务地址。background: 使用service_worker替代了以前的 background page/script更轻量。content_scripts: 指定将content.js注入到所有网页中以便监听图片加载和与DOM交互。3.2 建立通信桥梁Background Scriptbackground.js是插件的大脑它长期运行负责创建右键菜单、协调各模块通信并作为与模型API交互的代理。// background.js let modelApiUrl http://localhost:8000/v1/chat/completions; // 你的模型API地址 // 安装插件时创建右键菜单 chrome.runtime.onInstalled.addListener(() { chrome.contextMenus.create({ id: analyze-image, title: 使用 Ostrakon-VL 分析图片, contexts: [image] // 仅在图片上显示此菜单 }); console.log(Ostrakon VL 助手插件已安装右键菜单已添加。); }); // 监听右键菜单点击事件 chrome.contextMenus.onClicked.addListener((info, tab) { if (info.menuItemId analyze-image) { // 当用户点击“分析图片”时获取图片URL const imageUrl info.srcUrl; // 发送消息给 content script让它去处理图片并获取分析结果 chrome.tabs.sendMessage(tab.id, { action: analyzeImage, imageUrl: imageUrl }, (response) { // 这里可以处理 content script 返回的响应比如显示通知 if (response response.success) { chrome.notifications.create({ type: basic, iconUrl: icons/icon48.png, title: 分析完成, message: 已获取图片描述请查看弹出窗口或侧边栏。 }); } }); } }); // 接收来自 popup 或 content script 的请求转发给模型API chrome.runtime.onMessage.addListener((request, sender, sendResponse) { if (request.action callModelApi) { callModelAPI(request.prompt, request.imageData).then(result { sendResponse({success: true, data: result}); }).catch(error { sendResponse({success: false, error: error.message}); }); return true; // 保持消息通道异步打开 } }); // 调用 Ostrakon-VL-8B API 的核心函数 async function callModelAPI(prompt, imageData) { // 构建请求体具体格式需根据你的模型API调整 const requestBody { model: ostrakon-vl-8b, messages: [ { role: user, content: [ { type: text, text: prompt }, { type: image_url, image_url: { url: imageData } } // imageData 可以是 base64 或 图片URL ] } ], max_tokens: 300 }; try { const response await fetch(modelApiUrl, { method: POST, headers: { Content-Type: application/json, }, body: JSON.stringify(requestBody) }); if (!response.ok) { throw new Error(API请求失败: ${response.status}); } const data await response.json(); // 假设API返回结构为 { choices: [{ message: { content: 描述文本 } }] } return data.choices[0]?.message?.content || 未收到有效描述。; } catch (error) { console.error(调用模型API出错:, error); throw error; } }4. 与网页交互Content Script 实现content.js运行在网页的上下文中可以直接操作DOM捕获图片并与 background script 通信。// content.js // 监听来自 background script 的消息 chrome.runtime.onMessage.addListener((request, sender, sendResponse) { if (request.action analyzeImage) { handleImageAnalysis(request.imageUrl, sendResponse); return true; // 异步响应 } }); // 处理图片分析请求 async function handleImageAnalysis(imageUrl, sendResponse) { try { // 将图片转换为 base64以便发送给API如果API支持URL则可跳过 const base64Image await convertImageToBase64(imageUrl); // 构建提示词 const prompt 请详细描述这张图片的内容。; // 发送消息给 background script 去调用模型API chrome.runtime.sendMessage({ action: callModelApi, prompt: prompt, imageData: data:image/jpeg;base64,${base64Image} // 使用 base64 // 如果API支持直接传URL则直接用 imageUrl }, (apiResponse) { if (apiResponse.success) { // 将结果显示给用户例如创建一个浮动对话框 showResultDialog(apiResponse.data); sendResponse({success: true}); } else { console.error(模型API调用失败:, apiResponse.error); sendResponse({success: false, error: apiResponse.error}); } }); } catch (error) { console.error(处理图片失败:, error); sendResponse({success: false, error: error.message}); } } // 将网络图片转换为Base64编码 function convertImageToBase64(url) { return new Promise((resolve, reject) { const img new Image(); img.crossOrigin Anonymous; // 处理跨域图片可能需要服务器支持CORS img.onload () { const canvas document.createElement(canvas); canvas.width img.width; canvas.height img.height; const ctx canvas.getContext(2d); ctx.drawImage(img, 0, 0); resolve(canvas.toDataURL(image/jpeg).split(,)[1]); // 去掉 data URL 前缀 }; img.onerror reject; img.src url; }); } // 在页面上显示结果的简单对话框 function showResultDialog(description) { const dialog document.createElement(div); dialog.style.cssText position: fixed; top: 20px; right: 20px; z-index: 10000; background: white; border: 1px solid #ccc; border-radius: 8px; padding: 15px; max-width: 400px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); font-family: sans-serif; ; dialog.innerHTML h3 stylemargin-top:0;图片描述/h3 p${description}/p button idcloseDialog stylemargin-top:10px; padding:5px 10px;关闭/button ; document.body.appendChild(dialog); dialog.querySelector(#closeDialog).onclick () dialog.remove(); } // 监听图片加载错误尝试生成替代文本无障碍功能 document.addEventListener(error, (e) { if (e.target.tagName IMG !e.target.hasAttribute(alt-generated)) { const img e.target; const src img.src; if (src) { // 可以在这里触发一个后台任务为这张破损图片生成alt文本 console.log(检测到图片加载失败: ${src}可为其生成alt文本。); // 实际实现中可以调用 background script 的API然后回填 alt 属性 // img.setAttribute(alt, 生成的描述文本); // img.setAttribute(alt-generated, true); // 标记已处理 } } }, true); // 使用捕获阶段5. 设计用户界面Popup 与功能整合最后我们给插件一个简单的弹出界面用于触发截图分析等高级功能并展示设置。5.1 创建 popup.html!DOCTYPE html html head style body { width: 300px; padding: 15px; font-family: sans-serif; } button { width: 100%; padding: 10px; margin: 5px 0; background: #4285f4; color: white; border: none; border-radius: 4px; cursor: pointer; } button:hover { background: #3367d6; } #result { margin-top: 15px; padding: 10px; background: #f5f5f5; border-radius: 4px; white-space: pre-wrap; max-height: 200px; overflow-y: auto; } .hidden { display: none; } /style /head body h3Ostrakon VL 助手/h3 p右键点击网页图片即可分析。/p button idanalyzePage分析当前页面截图/button button idopenSettings设置/button div idresult classhidden/div div idsettings classhidden h4模型API设置/h4 label forapiUrlAPI地址:/label input typetext idapiUrl stylewidth:100%; margin-bottom:10px; placeholderhttp://localhost:8000/v1/chat/completions button idsaveSettings保存/button /div script srcpopup.js/script /body /html5.2 实现 popup.js 交互逻辑// popup.js document.addEventListener(DOMContentLoaded, function() { const analyzePageBtn document.getElementById(analyzePage); const openSettingsBtn document.getElementById(openSettings); const saveSettingsBtn document.getElementById(saveSettings); const resultDiv document.getElementById(result); const settingsDiv document.getElementById(settings); const apiUrlInput document.getElementById(apiUrl); // 加载保存的API地址 chrome.storage.local.get([modelApiUrl], function(data) { if (data.modelApiUrl) { apiUrlInput.value data.modelApiUrl; } }); // 分析页面截图 analyzePageBtn.addEventListener(click, function() { resultDiv.textContent 正在捕获截图并分析...; resultDiv.classList.remove(hidden); // 通知 content script 去捕获截图 chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { chrome.tabs.sendMessage(tabs[0].id, {action: capturePage}, function(response) { if (response response.imageData) { // 将截图发送给 background 去调用模型 chrome.runtime.sendMessage({ action: callModelApi, prompt: 请总结这个网页截图的主要内容。, imageData: response.imageData }, function(apiResponse) { if (apiResponse.success) { resultDiv.textContent 页面摘要\n${apiResponse.data}; } else { resultDiv.textContent 分析失败${apiResponse.error}; } }); } else { resultDiv.textContent 无法捕获页面截图。; } }); }); }); // 打开设置 openSettingsBtn.addEventListener(click, function() { settingsDiv.classList.toggle(hidden); resultDiv.classList.add(hidden); }); // 保存设置 saveSettingsBtn.addEventListener(click, function() { const newUrl apiUrlInput.value.trim(); if (newUrl) { chrome.storage.local.set({modelApiUrl: newUrl}, function() { alert(设置已保存); settingsDiv.classList.add(hidden); // 也可以通知 background.js 更新 API URL chrome.runtime.sendMessage({action: updateApiUrl, url: newUrl}); }); } }); });同时需要在content.js中添加捕获页面截图的功能// 在 content.js 中添加 // 监听来自 popup 的截图请求 chrome.runtime.onMessage.addListener((request, sender, sendResponse) { // ... 之前的 analyzeImage 处理逻辑 ... if (request.action capturePage) { captureVisibleTab(sendResponse); return true; } }); // 捕获当前可见标签页的截图简化版实际需处理权限和滚动 function captureVisibleTab(sendResponse) { // 使用 chrome.tabs.captureVisibleTab API 需要额外的权限声明 // 这里用一个简单的 canvas 绘制当前视口作为示例 html2canvas(document.body, { scrollY: -window.scrollY, windowWidth: document.documentElement.clientWidth, windowHeight: document.documentElement.clientHeight }).then(canvas { const imageData canvas.toDataURL(image/jpeg); sendResponse({success: true, imageData: imageData}); }).catch(err { console.error(截图失败:, err); sendResponse({success: false, error: err.message}); }); }注意html2canvas是一个第三方库需要引入。更正式的做法是使用 Chrome 扩展的chrome.tabs.captureVisibleTabAPI但这需要申请activeTab或all_urls权限并在 manifest 中声明。这里为了简化示例使用了概念性代码。6. 实际使用与效果体验把上面的代码文件都准备好图标也放进去之后你的插件文件夹就齐了。打开 Chrome 浏览器进入chrome://extensions/页面。打开右上角的“开发者模式”然后点击“加载已解压的扩展程序”选择你的ostrakon-vl-helper文件夹。加载成功后你应该能在浏览器工具栏看到插件的图标。现在随便打开一个带有图片的网页在一张图片上点击右键如果看到“使用 Ostrakon-VL 分析图片”的选项就说明插件安装成功了。点击它稍等片刻取决于你的模型服务速度和图片大小一个写着图片描述的小窗口就会弹出来。描述的质量完全取决于 Ostrakon-VL-8B 模型的能力对于常见的物体、场景和图表它通常能给出相当准确和细致的描述。对于无障碍功能你可以故意断开网络让一些图片加载失败观察控制台日志看看插件是否检测到了这些错误。至于页面分析功能点击插件图标在弹出的窗口里点“分析当前页面截图”它就会尝试对当前看到的部分进行总结。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
Ostrakon-VL-8B浏览器插件开发：谷歌浏览器视觉辅助工具
发布时间：2026/7/15 23:12:55
Ostrakon-VL-8B浏览器插件开发谷歌浏览器视觉辅助工具你有没有遇到过这样的情况浏览网页时看到一张复杂的图表想快速理解它的含义却要花时间仔细阅读图例和说明或者网页上某张图片加载失败了只留下一个空白区域和冰冷的“alt”文本让你对内容一无所知对于视障用户来说这个问题更加突出他们依赖屏幕阅读器而缺失或敷衍的图片描述会让他们的浏览体验大打折扣。今天我们就来动手解决这个问题。我将带你一步步开发一个谷歌浏览器插件它能把强大的视觉理解模型 Ostrakon-VL-8B 直接带到你的浏览器里。这个插件就像一个随时待命的视觉助手无论是想了解图片内容、为缺失的图片生成描述还是快速总结一个网页的截图它都能帮你轻松搞定。整个过程不需要你精通复杂的机器学习部署我们会用最直接的方式把模型的能力通过浏览器插件这个载体释放出来。1. 这个插件能帮你做什么在深入代码之前我们先看看这个插件具体能带来哪些便利。它主要围绕三个核心场景设计每一个都瞄准了实际浏览网页时的痛点。1.1 场景一右键获取图片智能描述这是最直接的功能。当你在网上看到任何图片——可能是一张信息图、一个产品示意图或者是一张充满细节的风景照——你只需要在图片上点击右键在右键菜单中就会多出一个选项比如“使用 Ostrakon-VL 分析此图片”。点击后插件会捕获这张图片发送给后台运行的 Ostrakon-VL-8B 模型。几秒钟后一个清晰、准确的文字描述就会以弹窗或侧边栏的形式呈现给你。这比你手动去揣摩图片内容要高效得多。对于学习、研究或者单纯满足好奇心都非常有用。1.2 场景二为破损图片生成替代文本网页无障碍访问Accessibility是一个重要但常被忽视的领域。许多网站图片的alt属性替代文本是空的或者只是简单的“图片”二字这对于使用屏幕阅读器的用户来说几乎毫无帮助。我们的插件可以监听网页的加载过程。当它检测到有图片因为网络问题加载失败显示为破损图标或者发现某个图片的alt属性为空或过于简单时可以自动触发。插件会尝试获取这张图片的原始地址将其发送给模型然后生成一段描述性的文字并动态地插入到图片的alt属性中。这样屏幕阅读器就能为用户读出有意义的描述极大地提升了网页的可访问性。1.3 场景三分析网页截图并总结有时候我们不仅关心某一张图片还想快速把握整个页面的核心内容。比如你打开一篇很长的技术博客或报告想先知道它大概讲了什么。插件可以提供一个按钮让你捕获当前整个浏览器窗口或页面某个区域的截图。这张截图随后会被送给 Ostrakon-VL-8B 模型。得益于模型强大的视觉-语言理解能力它不仅能识别截图中的文字还能理解整体的布局、图表关系然后为你生成一段简洁的页面内容摘要。这就像有一个助手先帮你快速浏览了一遍文章。2. 开发前的准备工作要开始开发我们需要准备好两方面的环境一个是 Ostrakon-VL-8B 模型服务另一个是 Chrome 插件开发的基础。2.1 启动 Ostrakon-VL-8B 模型服务我们的插件本身不直接运行模型那样太笨重了。插件会作为一个“客户端”通过网络请求与一个独立运行的模型服务“服务器”进行通信。你需要先让模型服务跑起来。假设你已经通过 Docker 或其他方式部署好了 Ostrakon-VL-8B 的 API 服务。关键是要确认这个服务提供了一个可以通过 HTTP 请求调用的接口。通常这类服务会有一个类似/v1/chat/completions或/generate的端点接收图片可能是 base64 编码或图片 URL和文本提示然后返回模型的文字回答。确保你知道这个服务的访问地址比如http://localhost:8000。记下这个地址和具体的 API 端点路径我们稍后在插件的代码里会用到。2.2 创建 Chrome 插件项目骨架Chrome 插件遵循 Manifest V3 (MV3) 规范。我们先来创建一个最基本的项目文件夹结构ostrakon-vl-helper/ ├── manifest.json # 插件的配置文件核心 ├── background.js # 后台服务脚本处理长时运行的任务 ├── content.js # 内容脚本注入到网页中与页面交互 ├── popup.html # 点击插件图标时弹出的界面 ├── popup.js # 弹出界面的交互逻辑 └── icons/ # 插件图标各种尺寸 ├── icon16.png ├── icon48.png └── icon128.png接下来我们逐一填充这些文件的核心内容。3. 构建插件核心Manifest 与通信架构Manifest V3 是新一代 Chrome 插件的基石它更安全对权限的控制也更严格。3.1 编写 manifest.json这个文件定义了插件的基本信息、权限和资源。{ manifest_version: 3, name: Ostrakon VL 视觉助手, version: 1.0, description: 利用 Ostrakon-VL-8B 模型为浏览器提供图片描述、无障碍访问和页面分析功能。, permissions: [ activeTab, contextMenus, scripting, storage ], host_permissions: [ http://localhost:8000/* // 允许与你的本地模型API通信 ], background: { service_worker: background.js }, content_scripts: [ { matches: [all_urls], js: [content.js], run_at: document_idle } ], action: { default_popup: popup.html, default_icon: { 16: icons/icon16.png, 48: icons/icon48.png, 128: icons/icon128.png } }, icons: { 16: icons/icon16.png, 48: icons/icon48.png, 128: icons/icon128.png } }关键点说明permissions: 我们申请了contextMenus来创建右键菜单scripting和activeTab为了与网页交互storage可能用来存一些用户设置比如模型API地址。host_permissions: 这是 MV3 的新特性明确声明插件需要访问哪些外部地址。这里填你的模型服务地址。background: 使用service_worker替代了以前的 background page/script更轻量。content_scripts: 指定将content.js注入到所有网页中以便监听图片加载和与DOM交互。3.2 建立通信桥梁Background Scriptbackground.js是插件的大脑它长期运行负责创建右键菜单、协调各模块通信并作为与模型API交互的代理。// background.js let modelApiUrl http://localhost:8000/v1/chat/completions; // 你的模型API地址 // 安装插件时创建右键菜单 chrome.runtime.onInstalled.addListener(() { chrome.contextMenus.create({ id: analyze-image, title: 使用 Ostrakon-VL 分析图片, contexts: [image] // 仅在图片上显示此菜单 }); console.log(Ostrakon VL 助手插件已安装右键菜单已添加。); }); // 监听右键菜单点击事件 chrome.contextMenus.onClicked.addListener((info, tab) { if (info.menuItemId analyze-image) { // 当用户点击“分析图片”时获取图片URL const imageUrl info.srcUrl; // 发送消息给 content script让它去处理图片并获取分析结果 chrome.tabs.sendMessage(tab.id, { action: analyzeImage, imageUrl: imageUrl }, (response) { // 这里可以处理 content script 返回的响应比如显示通知 if (response response.success) { chrome.notifications.create({ type: basic, iconUrl: icons/icon48.png, title: 分析完成, message: 已获取图片描述请查看弹出窗口或侧边栏。 }); } }); } }); // 接收来自 popup 或 content script 的请求转发给模型API chrome.runtime.onMessage.addListener((request, sender, sendResponse) { if (request.action callModelApi) { callModelAPI(request.prompt, request.imageData).then(result { sendResponse({success: true, data: result}); }).catch(error { sendResponse({success: false, error: error.message}); }); return true; // 保持消息通道异步打开 } }); // 调用 Ostrakon-VL-8B API 的核心函数 async function callModelAPI(prompt, imageData) { // 构建请求体具体格式需根据你的模型API调整 const requestBody { model: ostrakon-vl-8b, messages: [ { role: user, content: [ { type: text, text: prompt }, { type: image_url, image_url: { url: imageData } } // imageData 可以是 base64 或 图片URL ] } ], max_tokens: 300 }; try { const response await fetch(modelApiUrl, { method: POST, headers: { Content-Type: application/json, }, body: JSON.stringify(requestBody) }); if (!response.ok) { throw new Error(API请求失败: ${response.status}); } const data await response.json(); // 假设API返回结构为 { choices: [{ message: { content: 描述文本 } }] } return data.choices[0]?.message?.content || 未收到有效描述。; } catch (error) { console.error(调用模型API出错:, error); throw error; } }4. 与网页交互Content Script 实现content.js运行在网页的上下文中可以直接操作DOM捕获图片并与 background script 通信。// content.js // 监听来自 background script 的消息 chrome.runtime.onMessage.addListener((request, sender, sendResponse) { if (request.action analyzeImage) { handleImageAnalysis(request.imageUrl, sendResponse); return true; // 异步响应 } }); // 处理图片分析请求 async function handleImageAnalysis(imageUrl, sendResponse) { try { // 将图片转换为 base64以便发送给API如果API支持URL则可跳过 const base64Image await convertImageToBase64(imageUrl); // 构建提示词 const prompt 请详细描述这张图片的内容。; // 发送消息给 background script 去调用模型API chrome.runtime.sendMessage({ action: callModelApi, prompt: prompt, imageData: data:image/jpeg;base64,${base64Image} // 使用 base64 // 如果API支持直接传URL则直接用 imageUrl }, (apiResponse) { if (apiResponse.success) { // 将结果显示给用户例如创建一个浮动对话框 showResultDialog(apiResponse.data); sendResponse({success: true}); } else { console.error(模型API调用失败:, apiResponse.error); sendResponse({success: false, error: apiResponse.error}); } }); } catch (error) { console.error(处理图片失败:, error); sendResponse({success: false, error: error.message}); } } // 将网络图片转换为Base64编码 function convertImageToBase64(url) { return new Promise((resolve, reject) { const img new Image(); img.crossOrigin Anonymous; // 处理跨域图片可能需要服务器支持CORS img.onload () { const canvas document.createElement(canvas); canvas.width img.width; canvas.height img.height; const ctx canvas.getContext(2d); ctx.drawImage(img, 0, 0); resolve(canvas.toDataURL(image/jpeg).split(,)[1]); // 去掉 data URL 前缀 }; img.onerror reject; img.src url; }); } // 在页面上显示结果的简单对话框 function showResultDialog(description) { const dialog document.createElement(div); dialog.style.cssText position: fixed; top: 20px; right: 20px; z-index: 10000; background: white; border: 1px solid #ccc; border-radius: 8px; padding: 15px; max-width: 400px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); font-family: sans-serif; ; dialog.innerHTML h3 stylemargin-top:0;图片描述/h3 p${description}/p button idcloseDialog stylemargin-top:10px; padding:5px 10px;关闭/button ; document.body.appendChild(dialog); dialog.querySelector(#closeDialog).onclick () dialog.remove(); } // 监听图片加载错误尝试生成替代文本无障碍功能 document.addEventListener(error, (e) { if (e.target.tagName IMG !e.target.hasAttribute(alt-generated)) { const img e.target; const src img.src; if (src) { // 可以在这里触发一个后台任务为这张破损图片生成alt文本 console.log(检测到图片加载失败: ${src}可为其生成alt文本。); // 实际实现中可以调用 background script 的API然后回填 alt 属性 // img.setAttribute(alt, 生成的描述文本); // img.setAttribute(alt-generated, true); // 标记已处理 } } }, true); // 使用捕获阶段5. 设计用户界面Popup 与功能整合最后我们给插件一个简单的弹出界面用于触发截图分析等高级功能并展示设置。5.1 创建 popup.html!DOCTYPE html html head style body { width: 300px; padding: 15px; font-family: sans-serif; } button { width: 100%; padding: 10px; margin: 5px 0; background: #4285f4; color: white; border: none; border-radius: 4px; cursor: pointer; } button:hover { background: #3367d6; } #result { margin-top: 15px; padding: 10px; background: #f5f5f5; border-radius: 4px; white-space: pre-wrap; max-height: 200px; overflow-y: auto; } .hidden { display: none; } /style /head body h3Ostrakon VL 助手/h3 p右键点击网页图片即可分析。/p button idanalyzePage分析当前页面截图/button button idopenSettings设置/button div idresult classhidden/div div idsettings classhidden h4模型API设置/h4 label forapiUrlAPI地址:/label input typetext idapiUrl stylewidth:100%; margin-bottom:10px; placeholderhttp://localhost:8000/v1/chat/completions button idsaveSettings保存/button /div script srcpopup.js/script /body /html5.2 实现 popup.js 交互逻辑// popup.js document.addEventListener(DOMContentLoaded, function() { const analyzePageBtn document.getElementById(analyzePage); const openSettingsBtn document.getElementById(openSettings); const saveSettingsBtn document.getElementById(saveSettings); const resultDiv document.getElementById(result); const settingsDiv document.getElementById(settings); const apiUrlInput document.getElementById(apiUrl); // 加载保存的API地址 chrome.storage.local.get([modelApiUrl], function(data) { if (data.modelApiUrl) { apiUrlInput.value data.modelApiUrl; } }); // 分析页面截图 analyzePageBtn.addEventListener(click, function() { resultDiv.textContent 正在捕获截图并分析...; resultDiv.classList.remove(hidden); // 通知 content script 去捕获截图 chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { chrome.tabs.sendMessage(tabs[0].id, {action: capturePage}, function(response) { if (response response.imageData) { // 将截图发送给 background 去调用模型 chrome.runtime.sendMessage({ action: callModelApi, prompt: 请总结这个网页截图的主要内容。, imageData: response.imageData }, function(apiResponse) { if (apiResponse.success) { resultDiv.textContent 页面摘要\n${apiResponse.data}; } else { resultDiv.textContent 分析失败${apiResponse.error}; } }); } else { resultDiv.textContent 无法捕获页面截图。; } }); }); }); // 打开设置 openSettingsBtn.addEventListener(click, function() { settingsDiv.classList.toggle(hidden); resultDiv.classList.add(hidden); }); // 保存设置 saveSettingsBtn.addEventListener(click, function() { const newUrl apiUrlInput.value.trim(); if (newUrl) { chrome.storage.local.set({modelApiUrl: newUrl}, function() { alert(设置已保存); settingsDiv.classList.add(hidden); // 也可以通知 background.js 更新 API URL chrome.runtime.sendMessage({action: updateApiUrl, url: newUrl}); }); } }); });同时需要在content.js中添加捕获页面截图的功能// 在 content.js 中添加 // 监听来自 popup 的截图请求 chrome.runtime.onMessage.addListener((request, sender, sendResponse) { // ... 之前的 analyzeImage 处理逻辑 ... if (request.action capturePage) { captureVisibleTab(sendResponse); return true; } }); // 捕获当前可见标签页的截图简化版实际需处理权限和滚动 function captureVisibleTab(sendResponse) { // 使用 chrome.tabs.captureVisibleTab API 需要额外的权限声明 // 这里用一个简单的 canvas 绘制当前视口作为示例 html2canvas(document.body, { scrollY: -window.scrollY, windowWidth: document.documentElement.clientWidth, windowHeight: document.documentElement.clientHeight }).then(canvas { const imageData canvas.toDataURL(image/jpeg); sendResponse({success: true, imageData: imageData}); }).catch(err { console.error(截图失败:, err); sendResponse({success: false, error: err.message}); }); }注意html2canvas是一个第三方库需要引入。更正式的做法是使用 Chrome 扩展的chrome.tabs.captureVisibleTabAPI但这需要申请activeTab或all_urls权限并在 manifest 中声明。这里为了简化示例使用了概念性代码。6. 实际使用与效果体验把上面的代码文件都准备好图标也放进去之后你的插件文件夹就齐了。打开 Chrome 浏览器进入chrome://extensions/页面。打开右上角的“开发者模式”然后点击“加载已解压的扩展程序”选择你的ostrakon-vl-helper文件夹。加载成功后你应该能在浏览器工具栏看到插件的图标。现在随便打开一个带有图片的网页在一张图片上点击右键如果看到“使用 Ostrakon-VL 分析图片”的选项就说明插件安装成功了。点击它稍等片刻取决于你的模型服务速度和图片大小一个写着图片描述的小窗口就会弹出来。描述的质量完全取决于 Ostrakon-VL-8B 模型的能力对于常见的物体、场景和图表它通常能给出相当准确和细致的描述。对于无障碍功能你可以故意断开网络让一些图片加载失败观察控制台日志看看插件是否检测到了这些错误。至于页面分析功能点击插件图标在弹出的窗口里点“分析当前页面截图”它就会尝试对当前看到的部分进行总结。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
