☰

Base64小助手

选中文本后自动弹窗可编码/解码Base64

// ==UserScript==
// @name         Base64小助手
// @namespace    https://github.com/soyadokio/UserScript
// @version      20250109
// @description  选中文本后自动弹窗可编码/解码Base64
// @author       SoyaDokio
// @license      MIT
// @match        *://*/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=v2ex.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    let popupIframe = null;

    // 监听鼠标抬起事件
    document.addEventListener('mouseup', function (e) {
        const selectedText = window.getSelection().toString().trim();
        // 创建 iframe 悬浮框
        if (selectedText) {
            createIframePopup(e.pageX, e.pageY, selectedText);
        }
        // 移除 iframe 悬浮框
        else {
            removePopup();
        }
    });

    // 创建 iframe 悬浮框
    function createIframePopup(x, y, selectedText) {
        // 先移除已存在的悬浮框
        removePopup();

        popupIframe = document.createElement('iframe');
        popupIframe.style.position = 'absolute';
        popupIframe.style.left = `${x + 10}px`;
        popupIframe.style.top = `${y + 10}px`;
        popupIframe.style.width = '235px';
        popupIframe.style.height = '65px';
        popupIframe.style.border = '1px solid #ddd';
        popupIframe.style.borderRadius = '5px';
        popupIframe.style.backgroundColor = 'white';
        popupIframe.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.2)';
        popupIframe.style.zIndex = '9999';

        // 加载 iframe 内容
        document.body.appendChild(popupIframe);
        const iframeDoc = popupIframe.contentDocument || popupIframe.contentWindow.document;
        iframeDoc.open();
        iframeDoc.write(generateIframeContent(selectedText));
        iframeDoc.close();
    }

    // 生成 iframe 内部的 HTML 内容
    function generateIframeContent(selectedText) {
        return `
      <!DOCTYPE html>
      <html>
      <head>
        <style>
          body {
              margin: 0;
              padding: 4px;
              font-family: Arial, sans-serif;
              font-size: 12px;
          }

          .button-container {
              margin-bottom: 4px;
          }

          button {
              margin: 0 4px 0 0;
              padding: 2px 8px;
              font-size: 12px;
              cursor: pointer;
          }

          .output-container {
              display: flex;
              align-items: center;
          }

          input {
              width: 170px;
              height: 20px;
              font-size: 12px;
              margin-right: 4px;
              padding: 2px;
          }

          .copy-btn {
              cursor: pointer;
              font-size: 12px;
              color: #007bff;
              text-decoration: underline;
          }

          .copy-btn:hover {
              color: #0056b3;
          }
          .checkmark {
              display: none;
              color: green;
              font-size: 20px;
              transform: scale(0.9);
              transform-origin: center;
          }
        </style>
      </head>
      <body>
        <div class="button-container">
          <button id="atob-btn">atob</button>
          <button id="btoa-btn">btoa</button>
        </div>
        <div class="output-container">
          <input type="text" id="output" readonly />
          <span class="copy-btn" id="copy-btn">复制</span>
          <span class="checkmark" id="checkmark">✔</span>
        </div>
        <script>
          (function () {
            const atobBtn = document.getElementById('atob-btn');
            const btoaBtn = document.getElementById('btoa-btn');
            const outputField = document.getElementById('output');
            const copyBtn = document.getElementById('copy-btn');
            const cmIcon = document.getElementById('checkmark');

            let selectedText = ${JSON.stringify(selectedText)};

            // atob 按钮点击事件
            atobBtn.addEventListener('click', function () {
              try {
                outputField.value = atob(selectedText);
              } catch (e) {
                outputField.value = '错误: 无效输入';
              }
            });

            // btoa 按钮点击事件
            btoaBtn.addEventListener('click', function () {
              try {
                outputField.value = btoa(selectedText);
              } catch (e) {
                outputField.value = '错误: 无效输入';
              }
            });

            // 复制按钮点击事件
            copyBtn.addEventListener('click', function () {
              if (outputField.value) {
                navigator.clipboard.writeText(outputField.value).then(() => {
                  copyBtn.style.display = 'none';
                  cmIcon.style.display = 'inline';

                  setTimeout(() => {
                      cmIcon.style.display = 'none';
                      copyBtn.style.display = 'inline';
                  }, 2000);
                });
              }
            });
          })();
        </script>
      </body>
      </html>
    `;
  }

    // 移除悬浮框
    function removePopup() {
        if (popupIframe) {
            document.body.removeChild(popupIframe);
            popupIframe = null;
        }
    }
})();