你好！你是否曾经有过紧急的事情，你真的很想读一篇文章，即使它是一篇很长的文章？在本教程中，您将学习如何创建一个 Google Chrome 扩展程序，它可以让您总结文章并减少阅读时间。让我们开始吧！
本教程需要一些 HTML、CSS、JavaScript 知识，但不是不能快速学习的东西！
🚀 让我们开始吧！
❓ 如何创建 Chrome 扩展程序？
因此，我们将通过创建适当的文件来开始创建扩展。我的文件结构如下所示：
|-popup-/-popup.html| ||-scripts-/-index.js|||-styles-/-index.css||-manifest.json|popup目录包含用于扩展弹出窗口的 .html 文件，我们不会用得太多，我将把扩展名放在这里。
scripts目录包含用于扩展逻辑的 .js 文件 – 生成按钮和摘要。
Styles 目录包含用于扩展样式的 .css 文件。
manifest.json是一个包含有关扩展名的所有信息的文件。我们将从它开始。
📚 清单文件
正如我之前写的，manifest.json是一个包含有关扩展名的所有信息的文件。它是一个 JSON 格式的文件。这将是我们此文件的内容：
{ "name": "Post Summary Generator", "description": "Summary generator using Cohere technology", "version": "1.0", "manifest_version": 3, "permissions": ["storage", "activeTab", "scripting"], "action": { "default_popup": "popup/popup.html" }, "content_scripts": [ { "matches": [ "https://*.medium.com/*", "https://*.towardsai.net/*", "https://*.towardsdatascience.com/*", "https://*.levelup.gitconnected.com/*" ], "css": ["styles/index.css"], "js": [ "scripts/index.js" ] } ]}对我们来说最重要的是什么：
css– 我们的 css 文件的路径js– 我们的 js 文件的路径matches– 我们想要使用我们的扩展的域列表（在我的例子中，我想在 medium.com、towardai.net、towardsdatascience.com、levelup.gitconnected 上使用它。 com，但您可以使用的域更多，请随意添加更多。对我来说就足够了）
🔁 将扩展加载到浏览器
要加载扩展程序，请转到浏览器，然后转到设置 > 扩展程序。使用左上角的按钮打开开发者模式并加载扩展。选择您的扩展文件夹，您就完成了！
📝 让我们来编码吧！
📜 弹出窗口.html
对于这个文件，我将只放置带有扩展名的基本 html 模板。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Cohere powered summarization Chrome Extension</title> <link rel="stylesheet" href="popup.css"></head><body> <p>Cohere powered summarization Chrome Extension</p></body>🎨 索引.css
在这里，我将放置一些我们将用于总结的按钮样式。他们不会很漂亮，但现在他们要履行自己的职责。我将在下一节中解释为什么要使用这些类。
.btn-container { display: flex; justify-content: center; align-items: center;}.btn-summary { display: inline-flex; justify-content: center; align-items: center; border: 1px solid #000000; border-radius: 100%;}.btn-summary:hover { cursor: pointer; background-color: #ededed;}.btn-side { width: 3rem; height: 3rem; margin-bottom: 2rem;}.btn-bottom { width: 2rem; height: 2rem; margin-left: 1rem;}🤖 索引.js
在这里，我们将放置我们的扩展逻辑。首先，我们将创建一个函数来生成用于汇总的按钮。我们将使用它document.createElement来创建按钮并将document.body.appendChild它们附加到页面主体。我们还会给按钮添加事件监听器，所以当我们点击它们时，我们会调用函数进行汇总。
我们想在用户照片旁边放置按钮。为此，我们必须将其附加到两个位置 – 侧边栏，可用于桌面视图，底部栏 – 用于移动视图。为此，我需要翻页并使用开发工具为这些元素选择元素选择器。有两种可能的情况——我们将转到主页并选择一篇文章，或者我们将直接转到文章。两个选项的选择器略有不同，这将包含在指南中。
我们将创建三个将在教程中使用的函数 – loadButtons, prediction, cohereReq。
const loadButtons = () => {}const prediction = e => {}const cohereReq = prompt => {}我们将从加载按钮开始。我们希望在页面加载时加载它们，而不是主页。如果我们转到主页，最好将它们加载到click或scroll– 当我们从主页进入文章时，onload事件不会执行，因此这对我们来说是正确的解决方案。让我们对其进行编码：
const loadButtons = () => { // don't want to add these buttons to main page // so if there is nothing after e.g. 'medium.com/' url we will just return if (window.location.pathname.length < 2) return; // Bottom button // add if there isn't already one (we can performe some events more than once, but don't want to add more than one button) if (!document.querySelector(".btn-bottom")) { const bottomBar = ( document.querySelector("#root > div > div.l.c > div > div > div.v.w.x.y.z.ab.ac.ae.af > nav > div:nth-child(3) > div > div.ec.an.dp.ed > div") || document.querySelector("#root > div > div.y.c > div > div > div.jc.jd.je.jf.jg.jh.ji.jj.jk > nav > div:nth-child(3) > div > div > div") ) // here we are creating structure for button const btnBottom = document.createElement("a") btnBottom.classList.add("btn-bottom") btnBottom.classList.add("btn-summary") btnBottom.textContent = "S" // we will create container for button const btnBottomContainer = document.createElement("div") btnBottomContainer?.classList.add("btn-container") // and then append container with button to the bar btnBottomContainer?.appendChild(btnBottom) bottomBar?.appendChild(btnBottomContainer) } // Side button if (document.querySelector(".btn-side")) return const sideBar = ( document.querySelector("#root > div > div.l.c > div > div > div.v.w.x.y.z.ab.ac.ae.af > nav > div.ag.h.k.j.i.cv > div") || document.querySelector("#root > div > div.y.c > div > div > div.jc.jd.je.jf.jg.jh.ji.jj.jk > nav > div.cx.h.k.j.i.hz > div") ) const btnSide = document.createElement("a") btnSide.classList.add("btn-side") btnSide.classList.add("btn-summary") btnSide.textContent = "SUM" const btnSideContainer = document.createElement("div") btnSideContainer?.classList.add("btn-container") btnSideContainer?.appendChild(btnSide) sideBar?.appendChild(btnSideContainer) // for all buttons we want to add event listener that will call function for summarization const allButtons = document.querySelectorAll(".btn-summary") allButtons.forEach(btn => btn.addEventListener("click", prediction))}要在特定事件上加载按钮，我们将使用window.onload事件：
window.onload = () => { loadButtons() window.addEventListener("scroll", loadButtons) window.addEventListener("click", loadButtons)};现在让我们编写用于汇总的函数。我们将使用cohereReq函数从 Cohere API 获取摘要。
// request to cohere xlarge modelconst cohereReq = async prompt => { const modelSettings = JSON.stringify({ model: "xlarge", prompt, max_tokens: 1024, temperature: 0.6, k: 0, p: 0.75 }) const reqBody = { method: "POST", mode: 'cors', headers: { "Authorization": "BEARER {YOUR_COHERE_API_KEY}", // replace with your API key "Content-Type": "application/json", "Cohere-Version": "2021-11-08", // model version // I added some headers to prevent CORS errors "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Methods": "DELETE, POST, GET, OPTIONS", "Access-Control-Allow-Headers": "Content-Type, Authorization, X-Requested-With" }, body: modelSettings, redirect: "follow" }; // make request let response = await fetch("https://api.cohere.ai/generate", reqBody); response = response.json(); return response;}现在让我们实现从页面中提取数据和调用cohereReq函数的逻辑。我们将为prediction它使用功能。
const prediction = async e => { const articleElement = document.querySelector("section > div > div:nth-child(2)") // extract headings, text, skip images let texts = [] const heading = articleElement.querySelector("h1")?.textContent // get text from each element for (const node of (articleElement.childNodes || [])) if (node.textContent !== heading) texts.push(node.textContent.split(" ")); // flatten array texts = texts.flat() // remove empty strings texts = texts.filter(text => text !== "" && text !== " ") const prompt = `Summarize shortly this article, without code! If you want to finish use '--'. Article:Article heading: ${heading || texts[0]}Article content: ${texts.slice(0, 800).join(" ")}` const response = await cohereReq(prompt) // from response get generations (if response exists), from generations get first element (if generations exist), and from it get text (if theres is element exists) const text = response?.generations?.shift()?.text console.log(text)}好的，现在我们可以使用它了！让我们去 Medium 试试吧！
如您所见，我们只能在控制台中得到答案。我这样做是为了给你留下改进。将其视为挑战！尝试通过编辑提示来提高模型的性能。在 中创建一个漂亮的弹出窗口popup.html，并为收到的回复生成一个弹出窗口。在等待回复期间创建微调器。您还可以编辑主按钮。在教程的文本频道中展示您在我们 Discord 上的工作成果！我迫不及待地想看看你创造了什么！
请继续关注AIHubPro未来百科的教程！
谢谢你！– AI未来百科 ; 探索AI的边界与未来！ 懂您的AI未来站