Show caret column on GitHub code page.

github-cursor-column.user.js

// ==UserScript==
// @name        GitHub Code Cursor Position
// @namespace   caret.github.hyrious.me
// @match       https://github.com/*
// @grant       none
// @version     1.0
// @author      -
// @description Show current column on caret.
// @require     https://cdn.jsdelivr.net/npm/[email protected]/selector-set.js
// @require     https://cdn.jsdelivr.net/npm/[email protected]/dist/index.umd.js
// ==/UserScript==
const {observe} = SelectorObserver

observe('.code-navigation-cursor', {
  add(cursor) { cursor._ob = new MutationObserver(() => update(cursor)).observe(cursor, { attributes: true }) },
  remove(cursor) { cursor._ob?.disconnect() }
})

const tooltip = document.createElement('style')
const getStyle = content => `.code-navigation-cursor::before {
  content: '${content}';
  position: absolute;
  top: 100%;
  width: max-content;
  padding: 0.25em 0.5em;
  line-height: 1;
  font-size: xx-small;
  background-color: var(--bgColor-default);
  border: 1px solid var(--borderColor-default);
  border-radius: 6px;
  pointer-events: none;
  z-index: 100;
}
`

function update(cursor) {
  cursor.appendChild(tooltip)
  const textarea = document.querySelector('#read-only-cursor-text-area')
  let code = textarea.value
  const before = code.lastIndexOf('\n', textarea.selectionEnd - 1)
  const column = textarea.selectionEnd - before
  tooltip.textContent = getStyle(column)
}