☰

notion plugin

add notion outline view

当前为 2023-07-25 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         notion plugin
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.4
  5. // @description  add notion outline view
  6. // @author       fengxxc
  7. // @match        https://www.notion.so/*
  8. // @icon         https://www.google.com/s2/favicons?sz=64&domain=notion.so
  9. // @grant        none
  10. // @license MIT
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.     // 内容居左
  16.     document.querySelector('.whenContentEditable > main').style.justifyContent = 'left';
  17.  
  18.     /**
  19. 	 * 一、二、三 级标题的className分别为
  20. 	 * notion-header-block
  21. 	 * notion-sub_header-block
  22. 	 * notion-sub_sub_header-block
  23. 	 */
  24. 	function getOutlineTokens() {
  25. 		const headerBlock = document.querySelectorAll('.notion-header-block,.notion-sub_header-block,.notion-sub_sub_header-block')
  26. 		const tokens = []
  27. 		for (var i = 0; i < headerBlock.length; i++) {
  28. 			const id = headerBlock[i].getAttribute('data-block-id').replaceAll('-', '')
  29. 			// const notranslate = headerBlock[i].querySelector('.notranslate')
  30. 			const level = headerBlock[i].className.split('sub').length
  31. 			const header = headerBlock[i].innerText
  32. 			tokens.push({id, level, header})
  33. 		}
  34. 		return tokens
  35. 	}
  36.  
  37. 	function getOutlineHTMLs(outlineTokens) {
  38. 		const pathname = window.location.pathname
  39. 		return outlineTokens.map(token => (`
  40. 			<a href="${pathname}#${token.id}" rel="noopener noreferrer" style="display: block; color: inherit; text-decoration: none;">
  41. 				<div class="notion-focusable" role="button" tabindex="0" style="user-select: none; transition: background 20ms ease-in 0s; cursor: pointer; width: 100%;">
  42. 					<div style="padding: 6px 2px; font-size: 14px; line-height: 1.3; display: flex; align-items: center; margin-left: ${(token.level-1) * 24}px;">
  43. 						<div class="notranslate" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background-image: linear-gradient(to right, rgba(55, 53, 47, 0.16) 0%, rgba(55, 53, 47, 0.16) 100%); background-repeat: repeat-x; background-position: 0px 100%; background-size: 100% 1px;">
  44. 							${token.header}
  45. 						</div>
  46. 					</div>
  47. 				</div>
  48. 			</a>
  49. 		`))
  50. 	}
  51.  
  52. 	function getOutlineBox(outlineHTMLs) {
  53. 		return `
  54. 			<div id="outline_view" style="position: fixed; top: 47px; right: 16px; z-index: 2; background-color: #f0f8ffcc; padding: 9px; height: calc(100% - 47px); overflow-y: auto; max-width: 33%;">
  55. 				${outlineHTMLs.join('')}
  56. 			</div>
  57. 		`
  58. 	}
  59.  
  60. 	let notionFrame = null
  61. 	let existBox = false
  62. 	let lastTokenStr = ''
  63. 	const initInterval = setInterval(() => {
  64. 		notionFrame = notionFrame || document.querySelector('.notion-frame')
  65. 		if (notionFrame) {
  66. 			// init completed
  67. 			// clearInterval(initInterval)
  68. 			const tokens = getOutlineTokens()
  69. 			const tokenStr = JSON.stringify(tokens)
  70. 			if (!existBox) {
  71. 				notionFrame.insertAdjacentHTML('afterend', getOutlineBox(getOutlineHTMLs(tokens)))
  72. 				existBox = true
  73. 				lastTokenStr = tokenStr
  74. 			} else {
  75. 				if (lastTokenStr != tokenStr) {
  76. 					document.querySelector('#outline_view').innerHTML = getOutlineHTMLs(tokens).join('')
  77. 					lastTokenStr = tokenStr
  78. 				}
  79. 			}
  80. 		}
  81. 	}, 1000)
  82.  
  83. })();