giao！手把手教你写一个文章总结的浏览器插件，学不会我给你补个蛋！话不多说，先看效果吧！！！文本你将学到一是浏览器

效果

话不多说，先看效果吧

动画.gif

前言

文本你将学到

浏览器插件流程
AI分析文章知识
闭包去封装函数

开发步骤

目录结构

my-extension/
│
├── manifest.json        # 插件配置文件
└── popup/
    ├── popup.html       # 弹出窗口的HTML文件
    ├── popup.js         # 弹出窗口的脚本
    ├── popup.css        # CSS样式文件
    ├── icon/
        └── analyse.png  # 图标

编写 `manifest.json`

当你的文件中带有manifest.json，浏览器就能够将文件识别为插件

manifest.json中定义了浏览器插件的基本信息、权限和功能设置。

name：插件的名称，用户在浏览器中看到的。
version：插件的版本号，便于管理更新。
description：对插件功能的简单描述。
manifest_version：指定使用的清单版本，确保兼容性。
permissions：定义插件所需的权限，这里允许访问当前活动的标签页。
browser_action：配置插件的浏览器按钮，包括鼠标悬停时的提示和点击后的弹出窗口。
content_security_policy：定义脚本和对象的安全策略，保护插件不被恶意代码影响。

{
    "name": "Page Analysis",
    "version": "1.0",
    "description": "页面分析",
    "manifest_version": 2,
    "permissions": [
      "activeTab"
    ],
    "browser_action": {
      "default_title": "分析页面",
      "default_popup": "popup/popup.html"
    },
    "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
  }

icon

随便下载一个

popup.html

这个页面就是我们的插件的显示页面了

.content：整体容器。
.title：显示标题“Page Analysis”。
.analyseBox：包含“开始分析”按钮，按钮内含图标和文本。
.input-content：包含一个禁用的文本区域，预留用于显示分析结果。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>AI Analysis</title>
    <link rel="stylesheet" href="popup.css" />
  </head>
  <body>
    <div class="content">
      <div class="title">
        <span>Page Analysis</span>
      </div>
      <div class="analyseBox">
        <button class="analyseBtn">
          <img src="./icon/analyse.png" alt="" />
          <span> Start Analysis</span>
        </button>
      </div>
      <div class="input-content">
        <textarea
          class="text-area"
          rows="28"
          cols="30"
          placeholder=""
          disabled
        ></textarea>
      </div>
    </div>
    <script src="popup.js"></script>
  </body>
</html>

popup.css

样式也没什么好说的，随便调调就行

body {
  background-color: #efefef;
  border: 0;
}
.content {
  padding-bottom: 15px;
  width: 240px;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #efefef;
}
.title {
  overflow: hidden;
  margin-top: 10px;
  font-size: 20px;
  display: flex;
  align-items: center;
}
img {
  width: 25px;
  margin-right: 5px;
}
.analyseBox {
  display: flex;
  width: 85%;
  margin-top: 20px;
}
.analyseBox > button {
  width: 100%;
  padding: 8px 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-family: "Courier New", monospace;
  font-size: 18px;
}
.analyseBox > button > img {
  margin: 0 10px;
}
.analyseBox > button > span {
  font-size: 16px;
}
button {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  border: 0;
  background-color: #fff;
  padding: 5px;
  box-shadow: 0 8px 10px rgba(0, 0, 0, 0.31);
  transition: all 0.3s ease-in-out;
}

button:hover {
  box-shadow: -4px 10px 10px rgba(0, 0, 0, 0.3);
}
.input-content {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 15px;
  display:none ;
}
.text-area {
  width: 80%;
  border-radius: 10px;
  padding: 10px;
}

popup.js

这个就重要了

主要明白这三个就行，这些都是浏览器自带的api,接受就好

向页面插入脚本

 chrome.tabs.executeScript({
    code: `你要插入的脚本`
    })

发送数据

chrome.runtime.sendMessage(message);

接收数据

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {});

接下来看看popup.js，代码很简单的，多看几遍就明白了，这里用到了闭包去封装函数

页面

动态函数：检查 fetchData 是否已定义，未定义则创建并立即调用。
数据提取：提取当前页面文本并构造请求数据。
API 请求：向指定 URL 发送 POST 请求，处理响应并发送结果到背景脚本。

插件

消息监听：接收来自背景脚本的消息。
显示结果：将结果文本设置到文本区域，并显示输入内容区域。

document.querySelector(".analyseBtn").addEventListener("click", function () {
  chrome.tabs.executeScript({
    code: `
    if (typeof fetchData === "function") {
      fetchData();
    } else {
      const fetchData = (() => {
        const url = "https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash-latest:generateContent?key=AIzaSyBe9wBU2M_B1Moiwo6hadjjmbvpw";
      
        return () => {
          const pageText = document.body.innerText;
          const data = {
            contents: [
              {
                parts: [
                  {
                    text: pageText + "找到文章主题内容，分析文章并总结,总结在200字左右，段落之间需要换行",
                  },
                ],
              },
            ],
          };
          fetch(url, {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify(data),
          })
            .then((response) => {
              if (!response.ok) {
                throw new Error("Network response was not ok " + response.statusText);
              }
              return response.json();
            })
            .then((data) => {
              chrome.runtime.sendMessage({ text: data.candidates[0].content.parts[0].text });
            })
            .catch((error) => {
              console.error("There was a problem with the fetch operation:", error);
            });
        };
      })();
      fetchData();
    }
    `,
  });
});
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  const inputSelector = document.querySelector(".input-content");
  inputSelector.style.display = "flex";
  document.querySelector(".text-area").value = message.text;
});

最后将插件加载到浏览器就可以使用了，具体怎么加载大家直接掘金搜一下就明白了，很容易的，本文就到这咯

giao！ 手把手教你写一个文章总结的浏览器插件，学不会我给你补个蛋！

效果

前言