制作一个简单的浏览器插件

一、需求分析

二、准备工作

生成插件图标，我是在favicon官网生成的

网址：Favicon Generator - Text to Favicon - favicon.io

下载完成后，这里有很多种形式选择，我们选择16x16和192x192的

三、代码开发

插件相关代码目录

mainifest.json代码

{
  "manifest_version": 3,
  "name": "小叮当",
  "version": "1.0",
  "description": "实现任何你能想到和不能想到的功能",

  "permissions": ["contextMenus", "activeTab", "scripting"],
  "host_permissions": ["<all_urls>"],
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "icon16.png",
    "192": "icon192.png"
  }
}

mainifest.json代码解释

//contextMenus:允许插件在右键菜单中，添加自定义选项

//activeTab:允许插件访问当前标签页

//scripting:允许插件在当前标签页执行脚本

//<all_urls>:允许插件访问所有网站

//background.js:指定处理后台业务的脚本文件，比如监听业务，管理API调用等

//icons小程序不同比例的图标

background.js代码,注意更换大模型API，我这里用的是BigModel的大模型

chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: "summarizeText",
    title: "总结选中的文本",
    contexts: ["selection"],
  });
});
chrome.contextMenus.onClicked.addListener(async (info, tab) => {
  if (info.menuItemId === "summarizeText") {
    const selectionText = info.selectionText;
    const summary = await callGLMAPI(selectionText);

    chrome.scripting.executeScript({
      target: { tabId: tab.id },
      args: [summary],
      func: displayPopup,
    });
  }
});

async function callGLMAPI(text) {
  const res = await fetch(
    "https://open.bigmodel.cn/api/paas/v4/chat/completions",
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization:
          "Bearer 这里是你的大模型API",
      },
      body: JSON.stringify({
        model: "glm-4-plus",
        messages: [
          {
            role: "user",
            content:
              `请提取一下文本中的中文大纲，使用清晰的分级标题和子标题（如I、II、III或1、1.1、1.2等），标题间用换行符分隔，如果文本逻辑清晰，请保留文本的结构层级，内容要点尽量覆盖完整。\n文本内容\n` +
              text,
          },
        ],
      }),
    }
  );
  const data = await res.json();
  return data.choices[0].message.content;
}

function displayPopup(summary) {
  const popup = document.createElement("div");
  popup.id = "ai-response";
  popup.style.cssText = `
   position:fixed;
   top:10px;
   right:10px;
   z-index:10000;
   padding:10px;
   max-width:350px;
    max-height:600px;
    background-color:white;
    border-radius:8px;
    overflow-y:auto;
    box-shadow:0 2px 4px rgba(0,0,0,0.1);
    font-size:14px;
    font-family:Arial, sans-serif;
   `;

  popup.innerHTML = `
<strong>文本总结如下</strong>
<pre style="margin:10px 0;white-space:pre-wrap">
${summary}
</pre>
<button id="glm-close-btn" style="
border:none;
padding:8px 12px;
margin-top:10px;
border-radius:5px;
color:white;
background-color:#007bff;
cursor:pointer
">
关闭
</button>
`;
  document.body.appendChild(popup);
  document.getElementById("glm-close-btn").addEventListener("click", () => {
    popup.remove();
  });
}

保存之后刷新插件

成功使用了自己开发的插件