如何编写一个chrome插件调用本地ollama大模型实现网页划词ai总结?
网友回复
我们以chatgpt为例,ollama的api也是兼容chatgpt的。
创建一个 Chrome 插件来实现网页中选择文本进行 AI 问答,并调用 ChatGPT 的 API 接口,涉及以下步骤:
步骤概述:创建 Chrome 插件结构:包括 manifest.json、popup.html、popup.js 等文件。设置权限:确保插件有权限访问当前页面的内容和调用外部 API。与页面交互:允许用户选择页面上的文本。调用 ChatGPT API:使用 HTTP 请求发送选择的文本,并获取 AI 回答。显示结果:将 AI 回答显示在插件的弹出窗口中。具体实现步骤:1. 创建 manifest.json 文件{
"manifest_version": 3,
"name": "ChatGPT Q&A Plugin",
"version": "1.0",
"description": "Select text on a webpage and get AI answers using ChatGPT API.",
"permissions": [
"activeTab",
"storage",
"http://*/*",
"https://*/*"
],
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
}
},
"icons": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
},
"background": {
"service_worker": "background.js"
},
"permissions": [
"activeTab"
]
} 2. 创建 popup.html 文件 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ChatGPT Q&A</title>
<script src="popup.js"></script>
<style>
body {
width: 300px;
padding: 10px;
}
button {
margin-top: 10px;
}
</style>
</head>
<body>
<h2>ChatGPT Q&A</h2>
<textarea id="selectedText" rows="4" cols="30" placeholder="Select text on the webpage"></textarea>
<button id="askButton">Ask</button>
<div id="answer"></div>
</body>
</html> 3. 创建 popup.js 文件 document.addEventListener('DOMContentLoaded', function () {
const askButton = document.getElementById('askBu...点击查看剩余70%
如何将linux服务器的文件目录映射到windows电脑磁盘?
Docling 与 MarkItDown 两个库有啥不同?
豆包收费后国产其他ai软件也会跟进收费吗?
JPEG 与 HEIF图片格式区别?
centos7版本太旧无法安装python3.11,如何在docker中运行python3.11?
python如何做个RPA按键精灵的程序?
写一个windows的cmd的python代码如何在命令行中捕获获取复制粘贴的图片?
如何将别人爆款的抖音短视频短剧文案提取为seedance2的提示词?
阿里云域名dns云解析10万次日限额如何应对?
windows电脑如何提交上架ipa苹果应用?


