Notion Enhancer Needs Not DIe After All See UserScript and Note!

Notion-Enhancer-Lives.md

Notion Enhancer Lives

If you are like me, you are not going to start paying some developer to package pieces of the Notion Enhancer Extension in their own extension since Notion Enhancer had stopped working.

Well you don't have thanks to a user script I just found that defeats the means by which the extension had been blocked and must be how the alternatives are able to provide a more limited set of features while desperately trying to get you to upgrade to the pro version to access those old features you knew and loved.

As you can see from the notionDOMLockBypass.userscript.js file associated with this gist, or infer from its name, Notion.so has put in place a DOMLock to prevent changes to the DOM from rendering in the web application after it loads on the client's system. There are great reasons for this and circumventing it does not come without some degree of risk (so backup your workspace, which you should do regardless). The company is likely afraid malicious code picked up from visiting unwholesome sites will use the DOM as an attack surface without the client even knowing what is going on and potentially devestating to the client and the company at large, so they probably weren't being unreasonable in implementing the DOMLock, but personally I will take my chances if it means not having my screen bissected when opening subpages, which is something I really don't like about the default set up of Notion.so.

'Ok blah blah blah, how do I use it though?'

To use the userscript to restore the notion enhancer extension's functionality, you will need a userscript loader extension such as tampermonkey^1. Once you have that installed, then you can either copy and paste the provided script yourself or search for it using a service such as greasy fork that aggregates such scripts and install the script or an alternative of your choosing, just be sure to evaluate the source code yourself.

^1 link assumes you use Firefox or one of its forks compatiable with its Add-Ons store. If you use Chrome the extension can be found here

notion.css

/*************************************************
**  _______         __   __                      **
** |    |  |.-----.|  |_|__|.-----.-----.        **
** |       ||  _  ||   _|  ||  _  |     |        **
** |__|____||_____||____|__||_____|__|__|        **                                       
**   _______                        __           **
**  |_     _|.--.--.--.-----.---.-.|  |--.-----. **
**   |   |  |  |  |  |  -__|  _  ||    <|__ --|  **
**   |___|  |________|_____|___._||__|__|_____|  **
**************************************************/
/* These are the CSS tweaks I used to modify notion.so's browser interface when 
   the extension `notion enhanced` still worked. Since it seems done, I don't
   foresee this being useful but will keep it around for now just in case it is
   useful to someone or notion enhancer comes back from the dead              */
/* -------------------------------------------------------------------------- */
/* --------------------------- Smaller Page Icons --------------------------- */
/* -------------------------------------------------------------------------- */
*
  make
  icon
  relative
  to
  title
  container
  */
  .notion-scroller[style*="display: flex; flex-direction: column"]
  > [style$="z-index: 3; flex-shrink: 0;"]
  > :first-child {
  padding-top: 24px;
  position: relative;
}
/* -------------------------------------------------------------------------- */
/* size icon */
.notion-scroller[style*="display: flex; flex-direction: column"]
  > [style$="z-index: 3; flex-shrink: 0;"]
  > :first-child
  > :first-child
  .notion-record-icon[style*="height: 140px"],
.notion-scroller[style*="display: flex; flex-direction: column"]
  > [style$="z-index: 3; flex-shrink: 0;"]
  > :first-child
  > :first-child
  .notion-record-icon[style*="height: 78px"] {
  width: 24px !important;
  height: 24px !important;
}
.notion-scroller[style*="display: flex; flex-direction: column"]
  > [style$="z-index: 3; flex-shrink: 0;"]
  > :first-child
  > :first-child
  .notion-record-icon[style*="height: 140px"]
  *,
.notion-scroller[style*="display: flex; flex-direction: column"]
  > [style$="z-index: 3; flex-shrink: 0;"]
  > :first-child
  > :first-child
  .notion-record-icon[style*="height: 78px"]
  * {
  width: 100% !important;
  height: 100% !important;
}
/* -------------------------------------------------------------------------- */
/* position icon */
.notion-scroller[style*="display: flex; flex-direction: column"]
  > [style$="z-index: 3; flex-shrink: 0;"]
  > :first-child
  > :first-child
  .notion-record-icon[style*="height: 140px"],
.notion-scroller[style*="display: flex; flex-direction: column"]
  > [style$="z-index: 3; flex-shrink: 0;"]
  > :first-child
  > :first-child
  .notion-record-icon[style*="height: 78px"] {
  margin-top: 16px !important;
  margin-right: 8px !important;
  float: left;
}
.notion-scroller[style*="display: flex; flex-direction: column"]
  > [style$="z-index: 3; flex-shrink: 0;"]
  > :first-child
  > :first-child
  .notion-page-controls {
  position: absolute !important;
  top: -5px;
}
/* emojis */
.notion-scroller[style*="display: flex; flex-direction: column"]
  > [style$="z-index: 3; flex-shrink: 0;"]
  > :first-child
  > :first-child
  .notion-record-icon
  [style*="font-size: 78px"] {
  font-size: 24px !important;
}
/* -------------------------------------------------------------------------- */
/* remove extra space at top when there's no icon or cover */
.notion-page-controls[style*="margin-top: 64px"],
.notion-page-controls[style*="margin-top: 24px"] {
  margin-top: 8px !important;
}
/* -------------------------------------------------------------------------- */
/*Narrow Columns*/

[class*=" notion-collection_view"][data-block-id="TABLE_ID"]
  > div
  > div
  > :nth-child(COLUMN_NUMBER)
  > div
  > .notion-table-view-header-cell,
[class*=" notion-collection_view"][data-block-id="TABLE_ID"]
  > :nth-child(3)
  > div
  > :nth-child(COLUMN_NUMBER) {
  width: 24px !important;
}
/* -------------------------------------------------------------------------- */
/* -------------------------- Minified Bread Crumbs ------------------------- */
/* -------------------------------------------------------------------------- */
/* remove icon margin */
.notion-topbar
  .notranslate[style*="margin-right: 8px"]
  [role="button"]
  .notion-record-icon {
  margin-right: 0 !important;
}
/* -------------------------------------------------------------------------- */
/* position page title */
.notion-topbar
  .notranslate[style*="margin-right: 8px"]
  .notion-selectable:hover {
  z-index: 999;
}
.notion-topbar .notranslate[style*="margin-right: 8px"] [role="button"] {
  position: relative;
}
.notion-topbar
  .notranslate[style*="margin-right: 8px"]
  [role="button"]
  .notion-record-icon
  + div {
  background: var(--theme--ui_interactive-active);
  height: 24px;
  padding: 0 6px;
  border-radius: 3px;
  position: absolute;
  left: 26px;
  display: flex;
  align-items: center;
  pointer-events: none;
}
.notion-topbar
  .notranslate[style*="margin-right: 8px"]
  [role="button"]
  .notion-record-icon
  + div {
  transition: opacity 20ms ease-in, max-width 300ms ease-in !important;
}
/* -------------------------------------------------------------------------- */
/* slide out title on hover */
.notion-topbar
  .notranslate[style*="margin-right: 8px"]
  [role="button"]:not(:hover)
  .notion-record-icon
  + div {
  opacity: 0;
  max-width: 0px !important;
}
.notion-topbar
  .notranslate[style*="margin-right: 8px"]
  [role="button"]:hover
  .notion-record-icon
  + div {
  opacity: 1;
}
.notion-topbar
  .notranslate[style*="margin-right: 8px"]
  [role="button"]:hover
  .notion-record-icon,
.notion-topbar
  .notranslate[style*="margin-right: 8px"]
  [role="button"]:hover
  .notion-record-icon
  + div {
  transition-delay: 200ms !important;
}
/* -------------------------------------------------------------------------- */
/* ------------------------- Centered Table Headers ------------------------- */
/* -------------------------------------------------------------------------- */

.notion-table-view-header-cell > div > div {
  margin: 0px auto;
}
/* -------------------------------------------------------------------------- */
/*compact code blocks*/
.notion-code-block.line-numbers > div {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}
.notion-code-block .code_line_numbers--plain {
  top: 14px !important;
  bottom: 14px !important;
}

notionDOMLockBypass.userscript.js

// ==UserScript==
// @name         Notion.so DOMLock bypass
// @description  Disable notion.so DOMLock, which prevents DOM modification from extensions.
// @namespace    http://tampermonkey.net/
// @version      0.1
// @author       Sophie Saiada (sophies.dev)
// @license MIT
// @include      https://www.notion.so/*
// @grant        none
// ==/UserScript==

(function () {
  const lockAfterRenderRegex =
    /\W+at [a-zA-Z]+\.lockAfterRender \(https:\/\/www.notion.so\/app/;
  // eslint-disable-next-line no-proto
  const mutationObserverPrototype = MutationObserver.prototype;
  const originalObserve = mutationObserverPrototype.observe;
  mutationObserverPrototype.observe = function () {
    const stackLines = new Error().stack.split("\n");
    if (
      stackLines.some(function (line) {
        return line.match(lockAfterRenderRegex) !== null;
      })
    ) {
      return;
    }
    originalObserve.call(this, ...arguments);
  };
})();