☰

求职魔法师 - 求职神器｜智能填充工作信息｜免去输入烦恼

点击输入框时请求ChatGPT，并显示智能建议供选择，点击一键填充输入框

// ==UserScript==
// @name         求职魔法师 - 求职神器｜智能填充工作信息｜免去输入烦恼
// @namespace    http://t.net/1
// @version      0.91
// @description  点击输入框时请求ChatGPT，并显示智能建议供选择，点击一键填充输入框
// @author       jiguang
// @match        *://*/*
// @grant        GM_xmlhttpRequest
// @license MIT
// ==/UserScript==

(function () {
  "use strict";

  // OpenAI API 的密钥
  const API_KEY = "sk-XXXXXXX"; // 请替换为你的 OpenAI API 密钥

  // 向 OpenAI API 发送请求
  const fetchSuggestions = async (inputHTML, isTextarea) => {
    // 获取 body 的 innerText
    let text = document.body.innerText;

    // 截取前 1000 个字符或全部内容（如果少于 1000 个字符）
    let first1000Chars = text.length > 1000 ? text.slice(0, 1000) : text;
    const response = await fetch(
      "https://api.openai.com/v1/chat/completions",
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${API_KEY}`,
        },
        body: JSON.stringify({
          model: "gpt-4o-mini",
          messages: [
            {
              role: "user",
              content: `我的名字：张三
        手机号：13111112222
        身份证号：111211199012011111
        生日：1991年1月1日
        地址：北京市
        邮箱(密码可以是邮箱)：1@foxmail.com
        求职意向：Web 开发

        教育背景：

        - 2016.9-2020.6 清华大学软件工程专业，专业排名年级前 10%
        - 主修课程：操作系统、计算机组成原理、计算机网络、数据结构与算法、C 语言程序设计、Java 语言程序设计、JavaWeb 开发与框架开发、Python 程序开发、嵌入式开发、Linux 操作系统、软件工程、软件测试、项目管理等

        工作经历：

        - 2022.02-2022.05 XXX有限公司 Python 后端工程师
          - XXXXX
        - 2022.06-2023.12 XXX公司 Java后端工程师
          - XXXXX
        - 2024.2 至今 XXXX公司 技术总监
          - 负责技术管理工作

        技能荣誉：

        - 校级奖学金 2019-6

        自我评价：
        我具备较强的问题解决能力。在面对挑战时，我能够冷静分析情况，快速找出解决方案并付诸实施。这使我在项目进程中能够保持高效运作，并不断推动工作向前发展。在专业技能方面，我不断学习和提升自己，通过参加培训和阅读相关书籍，积累了丰富的知识和经验。我对新事物保持开放的态度，乐于尝试新的工作方法，力求在工作中寻求创新和突破。
        。`,
            },
            {
              role: "user",
              content: `网页信息： ${first1000Chars}`,
              //content: `网页信息： ${document.body.innerHTML}`,
            },
            {
              role: "user",
              content: `要填充的元素： ${inputHTML}`,
            },
            {
              role: "user",
              content: `请基于以上HTML内容和我的个人信息，推测3-6条我要需要填充进去的内容${
                isTextarea ? "(每条不少于200字)" : ""
              }，一行一个，请你只回复推测结果的内容，不要有其他内容，也不要有序号`,
            },
          ],
          max_tokens: isTextarea ? 3000 : 300,
        }),
      }
    );

    if (!response.ok) {
      throw new Error(`Error: ${response.statusText}`);
    }

    const data = await response.json();
    return data.choices[0]?.message?.content?.trim()?.split("\n") || [];
  };

  // 创建下拉框
  const createDropdown = () => {
    const dropdown = document.createElement("div");
    dropdown.style.position = "absolute";
    dropdown.style.display = "none";
    dropdown.style.backgroundColor = "white";
    dropdown.style.border = "1px solid #ccc";
    dropdown.style.zIndex = "1000";
    dropdown.style.maxHeight = "150px";
    dropdown.style.overflowY = "auto";
    dropdown.style.boxShadow = "0px 0px 5px rgba(0, 0, 0, 0.3)";
    return dropdown;
  };

  // 创建加载动画
  const createLoadingSpinner = () => {
    const spinner = document.createElement("div");
    spinner.className = "loading-spinner";
    spinner.style.position = "absolute";
    spinner.style.border = "4px solid #f3f3f3";
    spinner.style.borderTop = "4px solid #3498db";
    spinner.style.borderRadius = "50%";
    spinner.style.width = "20px";
    spinner.style.height = "20px";
    spinner.style.animation = "spin 1s linear infinite";
    spinner.style.zIndex = "1001"; // 确保加载动画在最上层
    return spinner;
  };

  // 在输入框上点击时显示下拉列表
  const attachDropdownToInput = (input) => {
    let dropdown = createDropdown(); // 创建下拉框
    let spinner = createLoadingSpinner(); // 创建加载动画
    document.body.appendChild(dropdown); // 将下拉框添加到DOM
    document.body.appendChild(spinner); // 将加载动画添加到DOM
    let isDropdownVisible = false; // 下拉框是否可见的标记

    input.addEventListener("focus", async (event) => {
      const rect = event.target.getBoundingClientRect();
      dropdown.style.left = `${rect.left + window.scrollX}px`;
      dropdown.style.top = `${rect.bottom + window.scrollY}px`;
      spinner.style.left = `${rect.left + window.scrollX}px`; // 移动到左上角
      spinner.style.top = `${rect.top + window.scrollY - 30}px`; // 移动到左上角
      spinner.style.display = "block"; // 显示加载动画

      // 请求 OpenAI API 获取建议
      try {
        const isTextarea = input.tagName.toLowerCase() === "textarea";
        const suggestions = await fetchSuggestions(input.outerHTML, isTextarea);
        dropdown.innerHTML = ""; // 清空之前的选项

        suggestions.forEach((optionValue) => {
          const option = document.createElement("div");
          option.textContent = optionValue;
          option.style.padding = "5px 10px";
          option.style.cursor = "pointer";

          option.addEventListener("click", () => {
            input.value = ""; // 先清空输入框
            const inputEvent = new Event("input", { bubbles: true }); // 创建输入事件
            for (let char of optionValue.replace(/\s+/g, "")) {
              input.value += char; // 模拟逐字符输入
              input.dispatchEvent(inputEvent); // 触发输入事件
            }
            dropdown.style.display = "none"; // 选择后隐藏下拉列表
            isDropdownVisible = false; // 更新标记
          });

          option.addEventListener("mouseenter", () => {
            option.style.backgroundColor = "#f0f0f0"; // 高亮显示
          });

          option.addEventListener("mouseleave", () => {
            option.style.backgroundColor = "white"; // 恢复颜色
          });

          dropdown.appendChild(option);
        });

        dropdown.style.display = "block"; // 显示下拉列表
        isDropdownVisible = true; // 更新标记
      } catch (error) {
        console.error("Error fetching suggestions:", error);
        dropdown.innerHTML = '<div style="padding:10px;">无法获取建议</div>';
        dropdown.style.display = "block"; // 显示错误信息
        isDropdownVisible = true; // 更新标记
      } finally {
        spinner.style.display = "none"; // 隐藏加载动画
      }
    });

    input.addEventListener("blur", () => {
      setTimeout(() => {
        if (!isDropdownVisible) {
          dropdown.style.display = "none"; // 隐藏下拉框
        }
      }, 150); // 延迟以容许选择下拉框选项
    });

    // 在下拉框聚焦时，用户交互时更改标记
    dropdown.addEventListener("mouseenter", () => {
      isDropdownVisible = true; // 进入下拉框时标记为可见
    });

    dropdown.addEventListener("mouseleave", () => {
      isDropdownVisible = false; // 离开下拉框时标记为不可见
      dropdown.style.display = "none"; // 隐藏下拉框
    });
  };

  // 查找所有的输入框和文本区域并嵌入下拉列表
  const updateInputs = () => {
    const inputs = document.querySelectorAll(
      "input:not([updated]), textarea:not([updated])"
    );

    inputs.forEach((input) => {
      if (
        input.tagName.toLowerCase() === "textarea" ||
        ["text", "password", "email", "search", "url", "tel"].includes(
          input.type
        )
      ) {
        attachDropdownToInput(input);
        input.setAttribute("updated", "true");
      }
    });
  };

  // 每隔3秒执行一次
  setInterval(updateInputs, 3000);

  // 添加 CSS 动画
  const style = document.createElement("style");
  style.innerHTML = `
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
      .loading-spinner {
        display: none;
      }
    `;
  document.head.appendChild(style);
})();