文本网页自由复制-Markdown

自由选择网页区域并复制为 Markdown 格式,按钮可拖动、折叠

目前為 2025-09-17 提交的版本,檢視 最新版本

作者
申方达
評價
0 0 0
版本
3.0.0
建立日期
2025-03-11
更新日期
2025-09-17
尺寸
39.1 KB
授權條款
MIT
腳本執行於
所有網站

更新重点说明:

  1. @grant 声明:

    • 增加了 GM_setValueGM_getValue 权限,用于保存按钮位置和折叠状态。
  2. CSS 样式 (injectStyles 函数):

    • markdown-copy-btn 添加了 display: flex; align-items: center; justify-content: center; gap: 5px; 以便图标和文本能并排显示。
    • .mc-collapsed 类用于折叠状态,固定了宽高,隐藏了文本。
    • .markdown-copy-btn-icon 样式确保 SVG 图标正确显示并继承颜色。
  3. 按钮结构 (createButton 函数):

    • 按钮现在包含一个 <span> 用于 SVG 图标,和一个 <span> 用于文本。
    • copyBtnContentSpan 变量用于引用文本 <span>,这样可以独立地修改文本内容而不影响图标。
    • 增加了 copyBtn.title 属性,提供鼠标悬停提示。
  4. 按钮状态保存与恢复:

    • STORAGE_KEY_BUTTON_POSSTORAGE_KEY_BUTTON_COLLAPSED 定义了 Tampermonkey 存储的键。
    • restoreButtonState():在按钮创建后调用,从存储中读取位置和折叠状态并应用。
    • saveButtonPosition():在按钮拖动结束后调用,保存当前位置。
    • saveButtonCollapsedState(isCollapsed):在按钮折叠/展开时调用,保存状态。
  5. 按钮拖动逻辑 (handleButtonDragStart, handleButtonDragging, handleButtonDragEnd):

    • 实现了标准的鼠标拖动逻辑,包括计算偏移量、更新 left/top 样式,以及在拖动开始/结束时禁用/启用 CSS transition 和保存位置。
  6. handleButtonClick 逻辑调整:

    • 在非选择模式下,点击按钮不再直接进入 Div 选择模式。
    • 现在会优先检查是否是拖动操作(isDragging),如果是则不处理点击事件。
    • 如果按钮在默认文本状态(originalButtonText)或已折叠,点击会调用 toggleButtonCollapsedState() 进行折叠/展开操作。
    • 只有在按钮展开且显示默认文本时,再次点击才会进入 Div 选择模式。这样确保了折叠/展开功能不会被选择功能意外触发。
  7. 折叠/展开逻辑 (toggleButtonCollapsedState, setButtonCollapsedState):

    • setButtonCollapsedState 根据参数添加/移除 mc-collapsed 类,并更新文本 <span> 的内容和按钮的 title 属性。
    • 同时会调用 saveButtonCollapsedState 持久化状态。
  8. UI 文本和状态管理 (showTemporaryMessage, setButtonState, resetButtonAppearance):

    • showTemporaryMessage 在显示复制成功/失败信息时,会临时展开按钮,并在消息消失后通过 resetButtonAppearance 恢复其之前的折叠状态。
    • setButtonState 用于更新按钮的实时文本(例如在选择模式中),同时也会更新 title
    • resetButtonAppearance 是一个新的辅助函数,用于在完成临时消息或取消选择后,根据保存的状态将按钮恢复到折叠或展开的默认文本状态。

使用方法:

  1. 将此代码复制并粘贴到 Tampermonkey 脚本编辑器中。
  2. 保存脚本。
  3. 访问任何网页,你应该会看到右上角有一个绿色的“复制 Markdown”按钮。
  4. 拖动: 按住鼠标左键拖动按钮,可以将其移动到屏幕上你喜欢的任何位置。
  5. 折叠/展开: 在非选择模式下(按钮显示“复制 Markdown”或仅显示图标时),点击按钮可以将其折叠成一个小图标,再次点击展开。
  6. 选择模式: 展开按钮后,第一次点击进入“点击 DIV 复制”模式(鼠标悬停会高亮 DIV 元素),第二次点击进入“自由选择中”模式(鼠标会变成十字形,可以拖动选择区域)。
  7. Esc 键或第三次点击按钮可以取消选择。

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址