User script and bookmarklet for copying current page title and URL as a Markdown link

README.md

Link copying bookmarklets and user scripts

I often want to copy the link to a page I'm viewing in the browser to the clipboard to paste it in a note or document that I'm editing. These are bookmarklets and user scripts to help with this task.

What's in here?

• copy_markdown_link_bookmarklet.js: A bookmarklet that copies the the title and URL of the current page to the clipboard as a Markdown-formatted link. This works in Chrome, but not in Firefox, I think because "Writing to the clipboard is available without permission in secure contexts and browser extensions, but only from user-initiated event callbacks. Browser extensions with the "clipboardWrite" permission can write to the clipboard at any time." (See https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API)
• copy_markdown_link_userscript.js: A user script that copies the the title and URL of the current page to the clipboard as a Markdown-formatted link. I wrote this because Firefox didn't seem to support providing clipboard access to a bookmarklet. I've successfully run this using the Tampermonkey user script manager.
• copy_rendered_link_userscript.js: A user script that copies the title and URL of the current page to the clipboard as an HTML link. This script sets the mime type so if you paste the link into a Google doc or Evernote note, it will be pasted as a rendered link. I've successfully run this using the Tampermonkey user script manager.

copy_markdown_link_bookmarklet.js

(function () {
  function copyToClipboard(text) {
    if (window.clipboardData && window.clipboardData.setData) {
      /*IE specific code path to prevent textarea being shown while dialog is visible.*/
      return clipboardData.setData("Text", text); 
    } else if (document.queryCommandSupported 
        && document.queryCommandSupported("copy")) {
      var textarea = document.createElement("textarea");
      
      textarea.textContent = text; 
      
      /* Prevent scrolling to bottom of page in MS Edge. */
      textarea.style.position = "fixed";
      
      document.body.appendChild(textarea);
      textarea.select();
      
      try {
        navigator.clipboard.writeText(text);
        /* Security exception may be thrown by some browsers.*/ 
      } catch (ex) {
        console.warn("Copy to clipboard failed.", ex);
        return false;
      } finally {
        document.body.removeChild(textarea);
      }
    }
  }

  var markdown = '[' + document.title + '](' + window.location.href + ')';
  copyToClipboard(markdown); 
})();

copy_markdown_link_userscript.js

// ==UserScript==
// @name         Markdown Link
// @namespace    https://github.com/ghing/
// @version      0.1
// @description  Copy the title and URL of the current page to the clipboard.
// @author       Geoff Hing
// @match        http*://*/*
// @grant        GM_setClipboard
// @grant        GM_registerMenuCommand
// ==/UserScript==

(function() {
  'use strict';

  GM_registerMenuCommand('Copy Markdown link', function() {
    const markdown = '[' + document.title + '](' + window.location.href + ')';
    GM_setClipboard(markdown);
  }, 'r');
})();

copy_rendered_link_bookmarklet.js

// This doesn't seem to be working right now. I think it's because the "text/html"
// MIME type is not supported by `navigator.clipboard.write()` currently.
//
// Useful references:
// https://developers.google.com/web/updates/2018/03/clipboardapi
// https://stackoverflow.com/a/57279336
// https://web.dev/image-support-for-async-clipboard/
(function () {
  function copyToClipboard(text) {
    if (document.queryCommandSupported 
        && document.queryCommandSupported("copy")) {
      const textarea = document.createElement("textarea");
      
      textarea.textContent = text; 
      
      /* Prevent scrolling to bottom of page in MS Edge. */
      textarea.style.position = "fixed";
      
      document.body.appendChild(textarea);
      textarea.select();
      
      try {
        let blob = new Blob([text], {type: 'text/html'});
        let item = new ClipboardItem({'text/html': blob});
        navigator.clipboard.write([item]).then(() => {
          console.log("Copied");
        },
        (err) => {
          console.log("Could not copy");
          console.log(err);
        });
        /* Security exception may be thrown by some browsers.*/ 
      } catch (ex) {
        console.warn("Copy to clipboard failed.", ex);
        return false;
      } finally {
        document.body.removeChild(textarea);
      }
    }
  }

  const html = '<a href="' + window.location.href + '">' + document.title + '</a>';
  copyToClipboard(html); 
})();

copy_rendered_link_userscript.js

// ==UserScript==
// @name         Rendered Link
// @namespace    https://github.com/ghing/
// @version      0.1
// @description  Copy the title and URL of the current page to the clipboard.
// @author       Geoff Hing
// @match        http*://*/*
// @grant        GM_setClipboard
// @grant        GM_registerMenuCommand
// ==/UserScript==

(function() {
  'use strict';

  GM_registerMenuCommand('Copy rendered link', function() {
    const linkHtml = '<a href="' + window.location.href + '">' + document.title + '</a>';
    GM_setClipboard(linkHtml, 'html');
  }, 'r');
})();

The copy markdown link user script doesn't seem to work correctly on Google Docs when running under Tampermonkey on Firefox 116.0.2 (64-bit) on macOS. I haven't tested this on Firefox on other platforms. It has been working fine on Chrome. The user script also seems to work fine on pages that are not Google Docs.

Initially, the title would not be copied.

I noticed that the script was triggered multiple times when visiting a Google Docs URL. Adding the @noframes directive caused it only to be triggered on the main page, and the title is able to be accessed in the script via document.title, but then copying to the clipboard doesn't work.

I tried the script under Violentmonkey as well and it had the same issue.

I found the extension Copy as Markdown and it worked, even on Google Docs. I think using that description instead of the user script is the easiest option on Firefox.