Mac Chrome 复制内容和 URL (油猴脚本)

目录

背景工具脚本操作总结

背景

    使用 Windows 复制浏览器内容到 OneNote / Typora 等笔记工具时，会同时生成内容 url 地址。而 Mac 则缺失了此功能，原因是 Windows 的剪贴板会附带浏览器地址来源，而Mac 只针对 Safari 提供此功能，OneNote 干脆统一没支持¹ （╯‵□′）╯︵┴─┴     而作为 Chrome 重度使用患者，在经历了无数次 手动复制文本 → 返回浏览器 → 复制地址，和寻求插件未果后，终于趁着国庆肥宅期自己造轮子了，撒花 ✿ ҉٩(´︶`)۶҉ ✿??

工具

项目名称备注操作系统MacWindows / Linux 应该也可以，按注释修改快捷键即可，未做兼容性测试浏览器Chrome基于 Chrumium 内核应该都可以，未做兼容性测试Chrome 插件TamperMonkey语言JavaScript

脚本

// ==UserScript== // @name Copy With Title and Text // @namespace http://tampermonkey.net/ // @version 0.1 // @description Unlike Windows OS, Mac doesn't support copy content with url.So, the major pupose is to copy content along with title and text. // 因 Mac Chrome 未提供复制文本时同时复制 url 功能，故编写此脚本以实现并进一步增强。兼容性未测试。 // @author Victor // @match http://*/* // @match https://*/* // ==/UserScript== (function() { 'use strict'; document.addEventListener( "keydown", event => { const keyName = event.key; if (keyName == "c" && event.ctrlKey) { // 如果使用 Windows，或不想覆盖 Mac ⌘ + b 键，也可以自定义组合键 } else if (keyName == "g" && event.metaKey) { // ⌘ + g 除循环搜索外与 ⌘ + f 无异，顺手替换 event.preventDefault(); copyWithTextAndUrl(); } }, false ); /** * 复制文本 / 标题 / URL */ function copyWithTextAndUrl() { // 获取 URL 标题 var title = document.title; // 获取 URL 地址 var url = document.location.href; // 换行、标题、地址组成新元素 (添加样式复制到 OneNote / Typora 无效) var urlHtml = `<p id="urlSuffixEle"><a href="${url}">${title}</a></p>`; // 插入原选中内容后方同时选中 insertHtmlAfterSelection(urlHtml); document.execCommand("copy"); console.log(urlHtml); // 上面的做法会在原选中区域添加内容，复制后需移除 // TODO: 也可以尝试复制原选中内容到新的 Range，但可以用就不继续搞了 removeElement("urlSuffixEle"); } /** * 插入元素并添加选中 * * @param html 待添加到选中区域末尾并选中的 html 文本 * @see https://stackoverflow.com/questions/3597116/insert-html-after-a-selection */ function insertHtmlAfterSelection(html) { var sel, range, expandedSelRange, node; if (window.getSelection) { sel = window.getSelection(); if (sel.getRangeAt && sel.rangeCount) { range = window.getSelection().getRangeAt(0); expandedSelRange = range.cloneRange(); range.collapse(false); // Range.createContextualFragment() would be useful here but is // non-standard and not supported in all browsers (IE9, for one) var el = document.createElement("div"); el.innerHTML = html; var frag = document.createDocumentFragment(), lastNode; while ((node = el.firstChild)) { lastNode = frag.appendChild(node); } range.insertNode(frag); // Preserve the selection if (lastNode) { expandedSelRange.setEndAfter(lastNode); sel.removeAllRanges(); sel.addRange(expandedSelRange); } } } else if (document.selection && document.selection.createRange) { range = document.selection.createRange(); expandedSelRange = range.duplicate(); range.collapse(false); range.pasteHTML(html); expandedSelRange.setEndPoint("EndToEnd", range); expandedSelRange.select(); } } /** * 根据 id 删除元素 * * @param id 元素 Id */ function removeElement(id) { var ele = document.getElementById(id); return ele.parentNode.removeChild(ele); } })();

操作

既然会看此文章，那应该至少已经使用 Chrome 了，因此主要介绍以下流程：

安装油猴²安装脚本³ / 复制脚本内容自行添加新脚本如需兼容或更改快捷键，可打开管理面版 自行修改欢迎评论或前往 Greasy Fork 交流

总结

    祝用餐?愉快，希望此脚本能帮你提升效率 φ(≧ω≦*)♪

    开源这种事，只有第一次和无数次，vv 好自为之 (,•́ . •̀,)

---

Mac Chrome 不支持复制内容时附带 URL ↩︎

TamperMonkey ↩︎

Greasy Fork: Copy With Title and Text ↩︎