8 | 
59 |
60 |
61 | ## 🏠 Homepage
62 |
63 | https://gourav.io/notion-boost
64 |
65 | ### ⬇ Downloads
66 |
67 | - Chrome/Edge/Brave extension - https://chrome.google.com/webstore/detail/notion-boost/eciepnnimnjaojlkcpdpcgbfkpcagahd
68 | - Firefox addon - https://addons.mozilla.org/en-US/firefox/addon/notion-boost/
69 |
70 | ### ⭐ All Features
71 |
72 | https://gourav.io/notion-boost#-currently-added-features
73 |
74 | Missing some feature? [suggest it](https://github.com/GorvGoyl/Notion-Boost-browser-extension/issues)
75 |
76 | See what's new in latest update: https://gourav.io/notion-boost/whats-new
77 |
78 | ---
79 |
80 | #### 👍 Liked this extension? express your love by rating [★★★★★](https://chrome.google.com/webstore/detail/notion-boost/eciepnnimnjaojlkcpdpcgbfkpcagahd) on Chrome/Firefox store.
81 |
82 |
83 |
84 | #### 👨💻 See my other projects: https://gourav.io
85 |
--------------------------------------------------------------------------------
/assets/left-arrow.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/assets/nb.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/assets/notion-boost.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/assets/readme/bmc.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GorvGoyl/Notion-Boost-browser-extension/82691faf557fae2fc918ca4dd87d89605f99ac57/assets/readme/bmc.png
--------------------------------------------------------------------------------
/assets/readme/header.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GorvGoyl/Notion-Boost-browser-extension/82691faf557fae2fc918ca4dd87d89605f99ac57/assets/readme/header.jpg
--------------------------------------------------------------------------------
/assets/twitter.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/components/SettingsTable.tsx:
--------------------------------------------------------------------------------
1 | import { settingDetails } from './settings';
2 | import { getElement, getLatestSettings } from './utils';
3 | import { Fragment } from 'react';
4 |
5 | function isFuncEnabled(func: any) {
6 | const btnToDisable = getElement(`[data-func=${func}]`);
7 |
8 | if (btnToDisable && btnToDisable.classList.contains('enable')) {
9 | return true;
10 | }
11 | return false;
12 | }
13 |
14 | export function SettingsTable() {
15 | const [filterText, setFilterText] = useState('');
16 | const [settings, setSettings] = useState(settingDetails);
17 |
18 | useEffect(() => {
19 | refreshSettings();
20 | }, []);
21 |
22 | const refreshSettings = () => {
23 | console.log('refreshing settings');
24 | const obj = [...settingDetails];
25 |
26 | getLatestSettings()
27 | .then((set: any) => {
28 | console.log('LatestSettings: ', set);
29 |
30 | // add current status to settings object
31 | obj.forEach((e: any) => {
32 | e.status = set[e.func] ? 'enable' : 'disable';
33 | });
34 |
35 | setSettings([...obj]);
36 |
37 | return null;
38 | })
39 | .catch((e) => console.log(e));
40 | };
41 |
42 | const handleFeature = useCallback((obj: any) => {
43 | console.log('obj', obj);
44 |
45 | console.log('clicked: ');
46 |
47 | const func = obj.func;
48 | const funcToDisable = obj.disable_func;
49 |
50 | let toEnable = false;
51 |
52 | if (obj.status === 'enable') {
53 | toEnable = false;
54 | } else {
55 | toEnable = true;
56 | }
57 |
58 | try {
59 | getLatestSettings()
60 | .then((set: any) => {
61 | console.log('getLatestSettings ->', set);
62 | set[func] = toEnable;
63 | set.call_func = {
64 | name: func,
65 | arg: toEnable,
66 | };
67 |
68 | // disable other related func if both are enabled
69 | if (funcToDisable && isFuncEnabled(funcToDisable) && toEnable) {
70 | set[funcToDisable] = false;
71 | }
72 |
73 | browser.storage.sync.set({ nb_settings: set }).then(() => {
74 | refreshSettings();
75 | });
76 | return null;
77 | })
78 | .catch((e) => console.log(e));
79 | } catch (e) {
80 | console.log(e);
81 | }
82 | }, []);
83 |
84 | const filteredItems = settings.filter(
85 | (item) =>
86 | item.name.toLocaleLowerCase().includes(filterText) || item.desc.toLocaleLowerCase().includes(filterText),
87 | );
88 | console.log('filtered items', filteredItems);
89 |
90 | const itemsToDisplay = filterText ? filteredItems : settings;
91 |
92 | const handleOnchange = (e: any) => {
93 | console.log('value changed');
94 | setFilterText(e.target.value.toLocaleLowerCase());
95 | };
96 | return (
97 | <>
98 |
106 |
107 | {!filteredItems.length &&
110 |
137 | ))}
138 |
139 |
140 | );
141 | }
142 |
--------------------------------------------------------------------------------
/components/features/codeLineNumbers.ts:
--------------------------------------------------------------------------------
1 | import { getElement, onElementLoaded, toElement } from '../utils';
2 |
3 | const notionAppInnerCls = '.notion-app-inner';
4 | const notionPageContentCls = '.notion-page-content';
5 | const notionCursorListenerCls = '.notion-cursor-listener';
6 | const codeLineNumbersCls = 'codeLineNumbers';
7 |
8 | const DEBUG = false;
9 |
10 | let docEditObserverObj = {};
11 |
12 | export function codeLineNumbers(isEnabled: boolean) {
13 | try {
14 | console.log(`feature: codeLineNumbers: ${isEnabled}`);
15 |
16 | // triggers on page load
17 | // it waits for doc to be loaded
18 | onElementLoaded(notionPageContentCls)
19 | .then((isPresent) => {
20 | if (isPresent) {
21 | if (isEnabled) {
22 | addCodeLineNumbers();
23 | docEditListener();
24 | } else {
25 | removeCodeLineNumbers();
26 | }
27 | }
28 | return true;
29 | })
30 | .catch((e) => console.log(e));
31 | } catch (e) {
32 | console.log(e);
33 | }
34 | }
35 |
36 | // Internal methods //
37 |
38 | function removeDocEditListener() {
39 | if (isObserverType(docEditObserverObj)) {
40 | DEBUG && console.log('disconnected docEditObserver');
41 | (docEditObserverObj as MutationObserver).disconnect();
42 | }
43 | }
44 |
45 | function isObserverType(obj: any) {
46 | return obj.disconnect !== undefined;
47 | }
48 |
49 | // add/update line if any code block change occurs
50 | // works for page change or window reload
51 | function docEditListener() {
52 | DEBUG && console.log('listening for doc edit changes...');
53 | let isCodeChanged = false;
54 |
55 | let block = '';
56 | docEditObserverObj = new MutationObserver((mutationList, obsrvr) => {
57 | DEBUG && console.log('found changes in doc content');
58 |
59 | for (let i = 0; i < mutationList.length; i++) {
60 | const m = mutationList[i];
61 |
62 | // case: check for text change
63 | if (m.type === 'childList') {
64 | if (
65 | m.target &&
66 | m.target.parentNode &&
67 | // @ts-ignore
68 | m.target.parentNode.classList.contains('line-numbers')
69 | ) {
70 | isCodeChanged = true;
71 | // @ts-ignore
72 | block = m.target.parentNode;
73 | // briefly pause listener to avoid recursive triggers
74 | removeDocEditListener();
75 | updateCodeline(block);
76 | docEditListener();
77 | }
78 | }
79 | }
80 |
81 | if (isCodeChanged) {
82 | console.log('code changed');
83 | isCodeChanged = false;
84 | }
85 | });
86 |
87 | // now add listener for doc text change
88 | const pageContentEl = getElement(notionAppInnerCls);
89 |
90 | (docEditObserverObj as MutationObserver).observe(pageContentEl, {
91 | childList: true,
92 | subtree: true,
93 | });
94 | }
95 |
96 | function addCodeLineNumbers() {
97 | const el1 = getElement(notionCursorListenerCls);
98 |
99 | el1.classList.add(codeLineNumbersCls);
100 |
101 | const el = document.querySelectorAll('div.notion-page-content .notion-code-block.line-numbers');
102 |
103 | el.forEach((x) => {
104 | updateCodeline(x);
105 | return true;
106 | });
107 | }
108 |
109 | function removeCodeLineNumbers() {
110 | console.log('removing removeCodeLineNumbers feature...');
111 |
112 | removeDocEditListener();
113 |
114 | const el = getElement(notionCursorListenerCls);
115 |
116 | el.classList.remove(codeLineNumbersCls);
117 |
118 | document.querySelectorAll('.code-line-numbers').forEach((x) => x.remove());
119 |
120 | // clearOutline();
121 |
122 | console.log('removed removeCodeLineNumbers feature');
123 | }
124 |
125 | // credit @CloudHill
126 | function updateCodeline(block: any) {
127 | let lineNumbers = '';
128 |
129 | let numbers = block.querySelector('.code-line-numbers');
130 | if (!numbers) {
131 | numbers = toElement('');
132 |
133 | const blockStyle = window.getComputedStyle(block.children[0]);
134 | numbers.style.top = blockStyle.paddingTop;
135 | numbers.style.bottom = blockStyle.paddingBottom;
136 |
137 | block.append(numbers);
138 |
139 | const temp = toElement('A');
140 | block.firstChild.append(temp);
141 | block.lineHeight = temp.getBoundingClientRect().height;
142 | temp.remove();
143 | }
144 |
145 | const lines = block.firstChild.innerText.split(/\r\n|\r|\n/);
146 | if (lines[lines.length - 1] === '') lines.pop();
147 | let lineCounter = 0;
148 | const wordWrap = block.firstChild.style.wordBreak === 'break-all';
149 |
150 | for (let i = 0; i < lines.length; i++) {
151 | lineCounter++;
152 | lineNumbers += `${lineCounter}\n`;
153 |
154 | if (wordWrap) {
155 | const temp = document.createElement('span');
156 | temp.innerText = lines[i];
157 | block.firstChild.append(temp);
158 | const lineHeight = temp.getBoundingClientRect().height;
159 | temp.remove();
160 |
161 | for (let j = 1; j < lineHeight / block.lineHeight - 1; j++) {
162 | lineNumbers += '\n';
163 | }
164 | }
165 | }
166 |
167 | if (lineNumbers.length > 2) {
168 | block.firstChild.classList.add('code-numbered');
169 | numbers.innerText = lineNumbers;
170 | } else {
171 | block.firstChild.classList.remove('code-numbered');
172 | numbers.innerText = '';
173 | }
174 | }
175 |
--------------------------------------------------------------------------------
/components/features/openFullPage.ts:
--------------------------------------------------------------------------------
1 | import { isObserverType, onElementLoaded } from '../utils';
2 |
3 | const notionDefaultOverlayCls = '.notion-default-overlay-container';
4 |
5 | const DEBUG = true;
6 |
7 | let docEditObserverObj = {};
8 |
9 | export function openFullPage(isEnabled: boolean) {
10 | try {
11 | console.log(`feature: enableOpenFullPage: ${isEnabled}`);
12 |
13 | // triggers on page load
14 | // it waits for overlay to be loaded
15 | onElementLoaded(notionDefaultOverlayCls)
16 | .then((isPresent) => {
17 | if (isPresent) {
18 | if (isEnabled) {
19 | addOpenFullPage();
20 | } else {
21 | removeOpenFullPage();
22 | }
23 | }
24 | return true;
25 | })
26 | .catch((e) => console.log(e));
27 | } catch (e) {
28 | console.log(e);
29 | }
30 | }
31 |
32 | // Internal methods //
33 |
34 | function removeDocEditListener() {
35 | if (isObserverType(docEditObserverObj)) {
36 | DEBUG && console.log('disconnected docEditObserver');
37 | (docEditObserverObj as MutationObserver).disconnect();
38 | }
39 | }
40 | let lastPageID: any;
41 | let previousUrl = '';
42 | /*
43 | Algo:
44 |
45 | case 1: open page and bypass preview
46 | id -> id?p / id&p -> p
47 |
48 | here lastPageID is id
49 |
50 | case 2: navigate back and bypass preview
51 | id <- id?p / id&p <- p
52 |
53 | here lastPageID is p
54 | */
55 | function docEditListener() {
56 | console.log('listening for doc edit changes for openFullPage...');
57 |
58 | docEditObserverObj = new MutationObserver((mutationList, obsrvr) => {
59 | DEBUG && console.log('found changes in doc content');
60 |
61 | const currentUrl = window.location.href;
62 | if (window.location.href !== previousUrl) {
63 | DEBUG && console.log(`URL changed from ${previousUrl} to ${currentUrl}`);
64 | previousUrl = currentUrl;
65 |
66 | // save last page url
67 | const isPreviewPage = currentUrl.includes('&p=') || currentUrl.includes('?p=');
68 | if (!isPreviewPage) {
69 | // Credits: @dragonwocky
70 | lastPageID = (window.location.search
71 | .slice(1)
72 | .split('&')
73 | .map((opt) => opt.split('='))
74 | .find((opt) => opt[0] === 'p') || ['', ...window.location.pathname.split(/(-|\/)/g).reverse()])[1];
75 | }
76 | // case: check for div change
77 | const fullPageLink = document.querySelector(".notion-peek-renderer [style*='display: grid'] > a");
78 |
79 | if (!fullPageLink) return;
80 |
81 | const href = fullPageLink.getAttribute('href');
82 | const pathname = fullPageLink.getAttribute('pathname');
83 | if (!href || !pathname) return;
84 |
85 | const previewPageID = (href
86 | .slice(1)
87 | .split('&')
88 | .map((opt: any) => opt.split('='))
89 | .find((opt: any) => opt[0] === 'p') || ['', ...pathname.split(/(-|\/)/g).reverse()])[1];
90 |
91 | if (isPreviewPage) {
92 | if (previewPageID === lastPageID) {
93 | DEBUG && console.log('going back', lastPageID);
94 | window.history.back();
95 | } else {
96 | DEBUG && console.log('full page link found', fullPageLink.getAttribute('href'));
97 | (fullPageLink as HTMLElement).click();
98 | }
99 | }
100 | }
101 | });
102 |
103 | // now add listener for doc text change
104 |
105 | (docEditObserverObj as MutationObserver).observe(document, {
106 | childList: true,
107 | subtree: true,
108 | // attributes: true,
109 | });
110 | }
111 | function addOpenFullPage() {
112 | docEditListener();
113 | }
114 |
115 | function removeOpenFullPage() {
116 | console.log('removing removeOpenFullPage feature...');
117 |
118 | removeDocEditListener();
119 |
120 | console.log('openFullPage feature removed');
121 | }
122 |
--------------------------------------------------------------------------------
/components/features/outline.ts:
--------------------------------------------------------------------------------
1 | import {
2 | getElement,
3 | getElements,
4 | isObserverType,
5 | onElementLoaded,
6 | pageChangeListener,
7 | removeChildren,
8 | removePageChangeListener,
9 | toElement,
10 | } from "../utils";
11 |
12 |
13 | let pageChangeObserverObj = {};
14 | let docEditObserverObj = {};
15 |
16 | // ENABLE/DISABLE Console Logs
17 | const DEBUG = false;
18 |
19 | // keep classes in hierarchy of DOM
20 |
21 | // stays on doc change
22 | const notionFrameCls = ".notion-frame";
23 | const outlineFrameCls = ".nb-outline";
24 |
25 | // these gets removed on doc change
26 | const notionScrollerCls = ".notion-frame .notion-scroller.vertical";
27 | const notionPageContentCls = ".notion-page-content";
28 |
29 | // starting point
30 | export function displayOutline(isShow: boolean) {
31 | console.log(`feature: displayOutline: ${isShow}`);
32 |
33 | if (isShow) {
34 | console.log("setting up outline feature");
35 |
36 | // triggers on page load
37 | // it waits for doc to be loaded
38 | onElementLoaded(notionPageContentCls)
39 | .then((isPresent) => {
40 | if (isPresent) {
41 | // addOutlineFrame();
42 |
43 | addOutlineToggleBtn();
44 | addOutline();
45 | docEditListener();
46 | // add listener for page change or window reload
47 | // it detaches old listeners and adds new docEditListener and outline
48 | pageChangeObserverObj = pageChangeListener(
49 | [removeDocEditListener, hideOutline, removeOutlineToggleBtn],
50 | [addOutline, addOutlineToggleBtn, docEditListener]
51 | );
52 | }
53 | return null;
54 | })
55 | .catch((e) => console.log(e));
56 | } else {
57 | removeOutline();
58 | }
59 | }
60 |
61 | function addOutlineToggleBtn() {
62 | try {
63 | const outlineToggleBtn = "outlineToggleBtn";
64 |
65 | const addOutlineToNotion = () => {
66 | const siblingCls = ".notion-topbar-share-menu";
67 | console.log("add outline btn");
68 | onElementLoaded(siblingCls)
69 | .then((isPresent) => {
70 | const pageContent = getElement(notionPageContentCls);
71 | if (!pageContent) {
72 | console.log("no page content class");
73 | return;
74 | }
75 |
76 | // eslint-disable-next-line promise/always-return
77 | if (isPresent) {
78 | if (document.querySelector(`.${outlineToggleBtn}`)) {
79 | // btn already exist somehow
80 | return;
81 | }
82 | const sibling = document.querySelector(siblingCls);
83 | const btnEl = toElement(
84 | `No setting found
}
108 | {itemsToDisplay.map((obj, index) => (
109 | handleFeature(obj)}>
115 |
129 | {/* {index === settingDetails.length - 1 ? (
130 |
131 | ) : (
132 |
116 |
119 | {obj.name}
117 | {obj.desc && {obj.desc}
}
118 |
124 |
128 |
125 |
126 |
127 |
133 |
134 |
135 | )} */}
136 | Outline
`
85 | );
86 |
87 | btnEl.addEventListener("click", () => {
88 | console.log("yup");
89 | const el = document.querySelector(".nb-outline");
90 | if (el) {
91 | el.classList.toggle("disableForPage");
92 | el.classList.toggle("show");
93 | }
94 | });
95 |
96 | sibling?.parentNode?.insertBefore(btnEl, sibling);
97 | }
98 | })
99 | .catch((e) => console.log(e));
100 | };
101 |
102 | const addOutlineToNotionSubdomain = () => {
103 | const siblingCls = ".notion-topbar > div > div.notion-focusable";
104 | console.log("add outline btn");
105 | onElementLoaded(siblingCls)
106 | .then((isPresent) => {
107 | const pageContent = getElement(notionPageContentCls);
108 | if (!pageContent) {
109 | console.log("no page content class");
110 | return;
111 | }
112 |
113 | // eslint-disable-next-line promise/always-return
114 | if (isPresent) {
115 | if (document.querySelector(`.${outlineToggleBtn}`)) {
116 | // btn already exist somehow
117 | return;
118 | }
119 | const sibling = document.querySelectorAll(siblingCls)[2];
120 | const btnEl = toElement(
121 | `Outline
`
122 | );
123 |
124 | btnEl.addEventListener("click", () => {
125 | const el = document.querySelector(".nb-outline");
126 | if (el) {
127 | el.classList.toggle("disableForPage");
128 | el.classList.toggle("show");
129 | }
130 | });
131 |
132 | sibling?.parentNode?.insertBefore(btnEl, sibling);
133 | }
134 | })
135 | .catch((e) => console.log(e));
136 | };
137 |
138 | addOutlineToNotion();
139 | addOutlineToNotionSubdomain();
140 | } catch (e:any) {
141 | console.log("Error: ", e.message);
142 | }
143 | }
144 |
145 | function removeDocEditListener() {
146 | if (isObserverType(docEditObserverObj)) {
147 | console.log("disconnected docEditObserver");
148 | (docEditObserverObj as MutationObserver).disconnect();
149 | }
150 | }
151 |
152 | function removeOutline() {
153 | console.log("removing outline feature...");
154 |
155 | removeDocEditListener();
156 |
157 | removePageChangeListener(pageChangeObserverObj);
158 |
159 | clearOutline();
160 |
161 | removeOutlineToggleBtn();
162 |
163 | console.log("removed outline feature");
164 | }
165 |
166 | function removeOutlineToggleBtn() {
167 | const btn = document.querySelector(".outlineToggleBtn");
168 |
169 | if (btn) {
170 | btn.remove();
171 | }
172 | }
173 | function hideOutline() {
174 | const outline = getElement(outlineFrameCls);
175 |
176 | if (!outline) return;
177 | outline.classList.remove("show");
178 | }
179 |
180 | function clearOutline() {
181 | hideOutline();
182 |
183 | const outline = getElement(outlineFrameCls);
184 | if (outline) {
185 | console.log("removed outline div");
186 | outline.remove();
187 | }
188 | }
189 |
190 | function addOutline() {
191 | DEBUG && console.log("adding/updating OUTLINE");
192 |
193 | try {
194 | const pageContent = getElement(notionPageContentCls);
195 | if (!pageContent) {
196 | console.log("no page content class");
197 | return;
198 | }
199 |
200 | const fullPageTable = getElement(".notion-peek-renderer");
201 | if (fullPageTable && fullPageTable.querySelector(notionPageContentCls)) {
202 | console.log("don't show outline for full page tables");
203 | return;
204 | }
205 |
206 | const notionScrollerEl = getElement(notionScrollerCls);
207 |
208 | // check if it outline exist already
209 | let outlineEl = getElement(outlineFrameCls);
210 |
211 | if (!outlineEl || outlineEl.length === 0) {
212 | // do not add any space between closing and ending of `
213 | outlineEl = toElement(`
214 |
215 |
`);
223 |
224 | // add toc container
225 | notionScrollerEl.parentNode.insertBefore(outlineEl, notionScrollerEl);
226 |
227 | document.getElementById("nbScrollToTop")?.addEventListener("click", () => {
228 | const doc = document.querySelector(".notion-frame > .notion-scroller");
229 | if (doc) {
230 | doc.scroll({ top: 0, left: 0 });
231 | }
232 | });
233 | }
234 |
235 | const blockWrapperEl = outlineEl.querySelector(".block-wrapper");
236 |
237 | // empty any previous headings
238 | removeChildren(blockWrapperEl);
239 |
240 | const tocBlockHTML = `
216 |
222 |
217 |
219 | Outline
218 |
220 |
221 |
241 |
245 |
`;
253 |
254 | let block = "";
255 |
256 | let isHeadingsFound = false;
257 |
258 | // select all divs containing headings
259 | const pageHeadings = getElements(
260 | `${notionPageContentCls} [class$="header-block"]`
261 | );
262 |
263 | isHeadingsFound = pageHeadings.length > 0;
264 |
265 | const contains = {
266 | h1: false,
267 | h2: false,
268 | h3: false,
269 | };
270 | // add headings to outline view
271 | for (let i = 0; i < pageHeadings.length; i++) {
272 | let headingCls = "";
273 | const pageHeading = pageHeadings[i];
274 | if (pageHeading.classList.contains("notion-header-block")) {
275 | headingCls = "nb-h1";
276 | contains.h1 = true;
277 | } else if (pageHeading.classList.contains("notion-sub_header-block")) {
278 | headingCls = "nb-h2";
279 | contains.h2 = true;
280 | } else if (
281 | pageHeading.classList.contains("notion-sub_sub_header-block")
282 | ) {
283 | headingCls = "nb-h3";
284 | contains.h3 = true;
285 | } else {
286 | headingCls = "";
287 | }
288 | // @ts-ignore
289 | block = toElement(tocBlockHTML);
290 | // add text
291 | let text = "";
292 | pageHeading.querySelector("div").childNodes.forEach((hxEl: { nodeName: string; childNodes: any[]; textContent: string; alt: string; }) => {
293 | // heading is inside span
294 | if (["SPAN", "DIV"].includes(hxEl.nodeName)) {
295 | hxEl.childNodes.forEach((el) => {
296 | if (
297 | ["#text", "H1", "H2", "H3", "H4", "H5", "H6"].includes(
298 | el.nodeName
299 | )
300 | ) {
301 | // it's regualar text
302 | text += el.textContent;
303 | } else if (hxEl.nodeName === "A") {
304 | // it's link inside heading
305 | text += hxEl.textContent;
306 | } else if (el.nodeName === "IMG") {
307 | // emojis inside heading
308 | text += el.alt;
309 | }
310 | // handle toggle heading type
311 | else if (el.nodeName === "DIV") {
312 | const heading = el.querySelector("H1,H2,H3,H4,H5,H6");
313 | if (heading) {
314 | text += heading.textContent;
315 | }
316 | }
317 | });
318 | } else if (
319 | ["#text", "H1", "H2", "H3", "H4", "H5", "H6"].includes(hxEl.nodeName)
320 | ) {
321 | // it's regualar text
322 | text += hxEl.textContent;
323 | } else if (hxEl.nodeName === "A") {
324 | // it's link inside heading
325 | text += hxEl.textContent;
326 | } else if (hxEl.nodeName === "IMG") {
327 | // emojis inside heading
328 | text += hxEl.alt;
329 | }
330 | });
331 | // @ts-ignore
332 | block.querySelector(".align").classList.add(headingCls);
333 | // @ts-ignore
334 | block.querySelector(".text").textContent = text;
335 | // if (text.length > 20) {
336 | // block.querySelector(".btn").title = text;
337 | // }
338 |
339 | // add href
340 | const blockId = pageHeading
341 | .getAttribute("data-block-id")
342 | .replace(/-/g, "");
343 | // @ts-ignore
344 | block.setAttribute("hash", blockId);
345 | // evaluate href at runtime cuz notion url is not consistent
346 | // @ts-ignore
347 | block.addEventListener("click", (e) => {
348 | e.currentTarget.querySelector("a").href = `${
349 | window.location.pathname
350 | }#${e.currentTarget.getAttribute("hash")}`;
351 | });
352 |
353 | blockWrapperEl.appendChild(block);
354 | }
355 |
356 | // hide outline if there is no heading
357 | if (!isHeadingsFound) {
358 | console.log("no heading found so removing outline frame");
359 | hideOutline();
360 | } else {
361 | // if there's no h1 then reduce space from left
362 | if (!contains.h1) {
363 | if (contains.h2 && contains.h3) {
364 | // convert h2->h1 and h3->h2
365 | blockWrapperEl.querySelectorAll(".nb-h2").forEach((x:any) => {
366 | x.classList.add("nb-h1");
367 | x.classList.remove("nb-h2");
368 | });
369 | blockWrapperEl.querySelectorAll(".nb-h3").forEach((x:any) => {
370 | x.classList.add("nb-h2");
371 | x.classList.remove("nb-h3");
372 | });
373 | } else {
374 | // all are of same type i.e. h2 or h3 so convert to h1
375 | blockWrapperEl.querySelectorAll(".nb-h2").forEach((x:any) => {
376 | x.classList.add("nb-h1");
377 | x.classList.remove("nb-h2");
378 | });
379 | blockWrapperEl.querySelectorAll(".nb-h3").forEach((x:any) => {
380 | x.classList.add("nb-h1");
381 | x.classList.remove("nb-h3");
382 | });
383 | }
384 | }
385 |
386 | if (!outlineEl.classList.contains("disableForPage")) {
387 | outlineEl.classList.add("show");
388 | }
389 | }
390 | } catch (e:any) {
391 | console.error("Error: ", e.message);
392 | }
393 | }
394 |
395 | // UTILITY FUNCTIONS
396 |
397 | // add/update outline if any heading change occurs
398 | function docEditListener() {
399 | DEBUG && console.log("listening for doc edit changes...");
400 |
401 | docEditObserverObj = new MutationObserver((mutationList, obsrvr) => {
402 | DEBUG && console.log("found changes in doc content");
403 |
404 | let isDocHeadingChanged = false;
405 |
406 | let placeholder = "";
407 | for (let i = 0; i < mutationList.length; i++) {
408 | const m = mutationList[i];
409 |
410 | // case: check for text change in headings
411 | if (!isHeading(placeholder) && m.type === "characterData") {
412 | DEBUG && console.log(`changed text: ${m.target.textContent}`);
413 |
414 | if (!isHeading(placeholder) && m.target.parentNode) {
415 | // @ts-ignore
416 | placeholder = m.target.parentNode.getAttribute("placeholder");
417 | }
418 |
419 | // case: when styling (b/i) is added to heading
420 | if (
421 | !isHeading(placeholder) &&
422 | m.target.parentNode &&
423 | m.target.parentNode.parentNode
424 | ) {
425 | placeholder =
426 | // @ts-ignore
427 | m.target.parentNode.parentNode.getAttribute("placeholder");
428 | }
429 | }
430 | if (!isHeading(placeholder) && m.type === "childList") {
431 | // console.log("childList changed");
432 |
433 | // case: hitting backspace in headings
434 | // @ts-ignore
435 | placeholder = m.target.getAttribute("placeholder");
436 |
437 | // case: when empty heading is being removed
438 | if (
439 | !isHeading(placeholder) &&
440 | m.removedNodes.length > 0 &&
441 | // @ts-ignore
442 | m.removedNodes[0].firstElementChild
443 | ) {
444 | placeholder =
445 | // @ts-ignore
446 | m.removedNodes[0].firstElementChild.getAttribute("placeholder");
447 |
448 | if (placeholder) {
449 | // console.log("empty block got removed");
450 | }
451 |
452 | // case: when select and delete multiple headings
453 | if (
454 | !isHeading(placeholder) &&
455 | m.removedNodes.length > 0 &&
456 | // @ts-ignore
457 | m.removedNodes[0].firstElementChild.firstElementChild
458 | ) {
459 | placeholder =
460 | // @ts-ignore
461 | m.removedNodes[0].firstElementChild.firstElementChild.getAttribute(
462 | "placeholder"
463 | );
464 |
465 | // console.log("empty blocks got removed");
466 | }
467 | }
468 |
469 | // case: when empty heading is being added
470 | if (
471 | !isHeading(placeholder) &&
472 | m.addedNodes.length > 0 &&
473 | // @ts-ignore
474 | m.addedNodes[0].firstElementChild
475 | ) {
476 | placeholder =
477 | // @ts-ignore
478 | m.addedNodes[0].firstElementChild.getAttribute("placeholder");
479 | // console.log("empty block got added");
480 | }
481 | }
482 |
483 | // check if the change was related to headings
484 | if (isHeading(placeholder)) {
485 | DEBUG && console.log("heading changed");
486 |
487 | isDocHeadingChanged = true;
488 | break;
489 | }
490 | }
491 |
492 | if (isDocHeadingChanged) {
493 | addOutline();
494 | }
495 | });
496 |
497 | // now add listener for doc text change
498 | const pageContentEl = getElement(notionPageContentCls);
499 |
500 | if (pageContentEl && docEditObserverObj) {
501 | (docEditObserverObj as MutationObserver).observe(pageContentEl, {
502 | childList: true,
503 | characterData: true,
504 | subtree: true,
505 | });
506 | }
507 | }
508 |
509 | function isHeading(placeholder:string) {
510 | // check if the change was related to headings
511 |
512 | if (!placeholder || !placeholder.trim()) {
513 | return true;
514 | }
515 | const headings = ["Heading", "제목"];
516 | headings.forEach((x) => {
517 | if (placeholder.includes(x)) {
518 | return true;
519 | }
520 | });
521 |
522 | return false;
523 | }
524 |
--------------------------------------------------------------------------------
/components/features/pageElements.ts:
--------------------------------------------------------------------------------
1 | import { getElement, isObserverType, onElementLoaded, simulateKey } from '../utils';
2 |
3 | const notionAiBtnCls = '[role=button].notion-ai-button';
4 | const notionAppId = '#notion-app';
5 |
6 | // To add theme based color: check indentationLines sass class
7 |
8 | const notionCursorListenerCls = '.notion-cursor-listener';
9 | let titleObserver = {};
10 | export function hideComments(isEnabled: boolean) {
11 | try {
12 | console.log(`feature: hideComments: ${isEnabled}`);
13 |
14 | onElementLoaded(notionAppId)
15 | .then((isPresent) => {
16 | if (isPresent) {
17 | const el = getElement(notionAppId);
18 | if (isEnabled) {
19 | el.classList.add('hideComments-nb');
20 | } else {
21 | el.classList.remove('hideComments-nb');
22 | }
23 | }
24 | return null;
25 | })
26 | .catch((e) => console.error(e));
27 | } catch (e) {
28 | console.error(e);
29 | }
30 | }
31 |
32 | export function hideBacklinks(isEnabled: boolean) {
33 | try {
34 | console.log(`feature: hideBacklinks: ${isEnabled}`);
35 |
36 | onElementLoaded(notionAppId)
37 | .then((isPresent) => {
38 | if (isPresent) {
39 | const el = getElement(notionAppId);
40 | if (isEnabled) {
41 | el.classList.add('hideBacklinks');
42 | } else {
43 | el.classList.remove('hideBacklinks');
44 | }
45 | }
46 | return null;
47 | })
48 | .catch((e) => console.error(e));
49 | } catch (e) {
50 | console.error(e);
51 | }
52 | }
53 |
54 | export function disableSlashCommandPlaceholder(isEnabled: boolean) {
55 | try {
56 | console.log(`feature: disableSlashCommandPlaceholder: ${isEnabled}`);
57 |
58 | onElementLoaded(notionAppId)
59 | .then((isPresent) => {
60 | if (isPresent) {
61 | const el = getElement(notionAppId);
62 | if (isEnabled) {
63 | el.classList.add('disableSlashCommandPlaceholder');
64 | } else {
65 | el.classList.remove('disableSlashCommandPlaceholder');
66 | }
67 | }
68 | return null;
69 | })
70 | .catch((e) => console.error(e));
71 | } catch (e) {
72 | console.error(e);
73 | }
74 | }
75 |
76 | export function smallText(isEnabled: boolean) {
77 | try {
78 | console.log(`feature: smallText: ${isEnabled}`);
79 |
80 | onElementLoaded(notionAppId)
81 | .then((isPresent) => {
82 | if (isPresent) {
83 | const el = getElement(notionAppId);
84 | if (isEnabled) {
85 | el.classList.add('smallText');
86 | } else {
87 | el.classList.remove('smallText');
88 | }
89 | }
90 | return null;
91 | })
92 | .catch((e) => console.error(e));
93 | } catch (e) {
94 | console.error(e);
95 | }
96 | }
97 |
98 | export function fullWidth(isEnabled: boolean) {
99 | try {
100 | console.log(`feature: fullWidth: ${isEnabled}`);
101 |
102 | onElementLoaded(notionAppId)
103 | .then((isPresent) => {
104 | if (isPresent) {
105 | const el = getElement(notionAppId);
106 | if (isEnabled) {
107 | el.classList.add('fullWidth');
108 | } else {
109 | el.classList.remove('fullWidth');
110 | }
111 | }
112 | return null;
113 | })
114 | .catch((e) => console.log(e));
115 | } catch (e) {
116 | console.log(e);
117 | }
118 | }
119 |
120 | export function borderOnImages(isEnabled: boolean) {
121 | try {
122 | console.log(`feature: borderOnImages: ${isEnabled}`);
123 |
124 | onElementLoaded(notionAppId)
125 | .then((isPresent) => {
126 | if (isPresent) {
127 | const el = getElement(notionAppId);
128 | if (isEnabled) {
129 | el.classList.add('borderOnImages');
130 | } else {
131 | el.classList.remove('borderOnImages');
132 | }
133 | }
134 | })
135 | .catch((e) => console.log(e));
136 | } catch (e) {
137 | console.log(e);
138 | }
139 | }
140 |
141 | export function bolderTextInDark(isEnabled: boolean) {
142 | try {
143 | console.log(`feature: bolderTextInDark: ${isEnabled}`);
144 |
145 | onElementLoaded(notionAppId)
146 | .then((isPresent) => {
147 | if (isPresent) {
148 | const el = getElement(notionAppId);
149 | if (isEnabled) {
150 | el.classList.add('bolder');
151 | } else {
152 | el.classList.remove('bolder');
153 | }
154 | // console.log(`${notionAppInner} style is ${el.style.display}`);
155 | }
156 | return null;
157 | })
158 | .catch((e) => console.log(e));
159 | } catch (e) {
160 | console.log(e);
161 | }
162 | }
163 |
164 | export function hideAiBtn(isHidden: boolean) {
165 | try {
166 | console.debug(`feature: hideAiBtn: ${isHidden}`);
167 |
168 | onElementLoaded(notionAiBtnCls)
169 | .then((isPresent) => {
170 | if (isPresent) {
171 | const el = getElement(notionAiBtnCls);
172 | if (isHidden) {
173 | el.style.display = 'none';
174 | } else {
175 | el.style.display = 'flex';
176 | }
177 | console.log(`${notionAiBtnCls} style is ${el.style.display}`);
178 | }
179 | return null;
180 | })
181 | .catch((e) => console.log(e));
182 | } catch (e) {
183 | console.log(e);
184 | }
185 | }
186 |
187 | export function hideSlashMenuAfterSpace(isEnabled: boolean) {
188 | try {
189 | console.log(`feature: hideSlashMenuAfterSpace: ${isEnabled}`);
190 |
191 | onElementLoaded(notionAppId)
192 | .then((isPresent) => {
193 | if (isPresent) {
194 | if (isEnabled) {
195 | getElement(notionAppId).addEventListener('keydown', hideSlashMenuAfterSpaceEvent);
196 | } else {
197 | getElement(notionAppId).removeEventListener('keydown', hideSlashMenuAfterSpaceEvent);
198 | }
199 | }
200 | return null;
201 | })
202 | .catch((e) => console.log(e));
203 | } catch (e) {
204 | console.log(e);
205 | }
206 | }
207 |
208 | export function disableSlashMenu(isEnabled: boolean) {
209 | try {
210 | console.log(`feature: disableSlashMenu: ${isEnabled}`);
211 |
212 | onElementLoaded(notionAppId)
213 | .then((isPresent) => {
214 | if (isPresent) {
215 | if (isEnabled) {
216 | // this preceeds 'hideSlashMenuAfterSpaceEvent' so remove that first
217 | getElement(notionAppId).removeEventListener('keydown', hideSlashMenuAfterSpaceEvent);
218 |
219 | window.addEventListener('keyup', disableSlashMenuEvent, {});
220 | } else {
221 | window.removeEventListener('keyup', disableSlashMenuEvent, {});
222 | }
223 | }
224 | return null;
225 | })
226 | .catch((e) => console.log(e));
227 | } catch (e) {
228 | console.log(e);
229 | }
230 | }
231 |
232 | export function disableAiAfterSpaceKey(isEnabled: boolean) {
233 | try {
234 | console.log(`feature: disableAiAfterSpaceKey: ${isEnabled}`);
235 |
236 | onElementLoaded(notionAppId)
237 | .then((isPresent) => {
238 | if (isPresent) {
239 | if (isEnabled) {
240 | // simulate esc key to prevent menu from appearing
241 | window.addEventListener('keydown', disableAiAfterSpaceKeyHandler);
242 | } else {
243 | window.removeEventListener('keydown', disableAiAfterSpaceKeyHandler);
244 | }
245 | }
246 | return null;
247 | })
248 | .catch((e) => console.log(e));
249 | } catch (e) {
250 | console.log(e);
251 | }
252 | }
253 |
254 | export function hideNotification(isEnabled: boolean) {
255 | try {
256 | console.log(`feature: hideNotification: ${isEnabled}`);
257 |
258 | const removeBadgeFromTitle = () => {
259 | if (document.title.indexOf(')') > -1) {
260 | document.title = document.title.substring(document.title.indexOf(')') + 2);
261 | }
262 | };
263 | onElementLoaded(notionAppId)
264 | .then((isPresent) => {
265 | if (isPresent) {
266 | const el = getElement(notionAppId);
267 | if (isEnabled) {
268 | el.classList.add('hideNotification');
269 | removeBadgeFromTitle();
270 | // select the target node
271 | const target = document.querySelector('title') as Node;
272 |
273 | // create an observer instance
274 | titleObserver = new MutationObserver((mutations) => {
275 | removeBadgeFromTitle();
276 | });
277 |
278 | // configuration of the observer:
279 | const config = {
280 | subtree: true,
281 | characterData: true,
282 | childList: true,
283 | };
284 |
285 | // pass in the target node, as well as the observer options
286 | (titleObserver as MutationObserver).observe(target, config);
287 | } else {
288 | el.classList.remove('hideNotification');
289 | if (isObserverType(titleObserver)) {
290 | console.log('disconnected docEditObserver');
291 | (titleObserver as MutationObserver).disconnect();
292 | }
293 | }
294 | // console.log(`${notionBodyCls} style is ${el.style.display}`);
295 | }
296 | return null;
297 | })
298 | .catch((e) => console.log(e));
299 | } catch (e) {
300 | console.log(e);
301 | }
302 | }
303 |
304 | export function leftAlignMedia(isEnabled: boolean) {
305 | try {
306 | console.log(`feature: leftAlignMedia: ${isEnabled}`);
307 |
308 | onElementLoaded(notionAppId)
309 | .then((isPresent) => {
310 | if (isPresent) {
311 | const el = getElement(notionAppId);
312 | if (isEnabled) {
313 | el.classList.add('leftAlignMedia');
314 | } else {
315 | el.classList.remove('leftAlignMedia');
316 | }
317 | // console.log(`${notionBodyCls} style is ${el.style.display}`);
318 | }
319 | return null;
320 | })
321 | .catch((e) => console.log(e));
322 | } catch (e) {
323 | console.log(e);
324 | }
325 | }
326 |
327 | export function addMoreHeightToPage(isEnabled: boolean) {
328 | try {
329 | console.log(`feature: addMoreHeightToPage: ${isEnabled}`);
330 |
331 | onElementLoaded(notionAppId)
332 | .then((isPresent) => {
333 | if (isPresent) {
334 | const el = getElement(notionAppId);
335 | if (isEnabled) {
336 | el.classList.add('addMoreHeightToPage');
337 | } else {
338 | el.classList.remove('addMoreHeightToPage');
339 | }
340 | // console.log(`${notionBodyCls} style is ${el.style.display}`);
341 | }
342 | return null;
343 | })
344 | .catch((e) => console.log(e));
345 | } catch (e) {
346 | console.log(e);
347 | }
348 | }
349 |
350 | export function narrowListItems(isEnabled: boolean) {
351 | try {
352 | console.log(`feature: narrowListItems: ${isEnabled}`);
353 |
354 | onElementLoaded(notionAppId)
355 | .then((isPresent) => {
356 | if (isPresent) {
357 | const el = getElement(notionAppId);
358 | if (isEnabled) {
359 | el.classList.add('narrowListItems');
360 | } else {
361 | el.classList.remove('narrowListItems');
362 | }
363 | // console.log(`${notionBodyCls} style is ${el.style.display}`);
364 | }
365 | return null;
366 | })
367 | .catch((e) => console.log(e));
368 | } catch (e) {
369 | console.log(e);
370 | }
371 | }
372 |
373 | // export function enableSpellcheckForCode(isEnabled) {
374 | // try {
375 | // console.log(`feature: enableSpellcheckForCode: ${isEnabled}`);
376 |
377 | // onElementLoaded(notionAppInnerCls)
378 | // .then((isPresent) => {
379 | // if (isPresent) {
380 | // const codeDivs = document.querySelectorAll(
381 | // "div.notion-page-content > div.notion-selectable.notion-code-block div.notion-code-block > div"
382 | // );
383 |
384 | // if (isEnabled) {
385 | // codeDivs.forEach((x) => {
386 | // x.setAttribute("spellcheck", "true");
387 | // });
388 | // } else {
389 | // codeDivs.forEach((x) => {
390 | // x.setAttribute("spellcheck", "false");
391 | // });
392 | // }
393 | // }
394 | // return null;
395 | // })
396 | // .catch((e) => console.log(e));
397 | // } catch (e) {
398 | // console.log(e);
399 | // }
400 | // }
401 |
402 | export function showHoverText(isEnabled: boolean) {
403 | try {
404 | console.log(`feature: showHoverText: ${isEnabled}`);
405 |
406 | // TODO: replace notionCursorListener with notionAppInner after fixing theme bug
407 | onElementLoaded(notionCursorListenerCls)
408 | .then((isPresent) => {
409 | if (isPresent) {
410 | const el = getElement(notionCursorListenerCls);
411 | if (isEnabled) {
412 | el.classList.add('showHoverText');
413 | } else {
414 | el.classList.remove('showHoverText');
415 | }
416 | // console.log(`${notionCursorListener} style is ${el.style.display}`);
417 | }
418 | return null;
419 | })
420 | .catch((e) => console.log(e));
421 | } catch (e) {
422 | console.log(e);
423 | }
424 | }
425 |
426 | export function hideHiddenColumns(isHidden: boolean) {
427 | try {
428 | console.log(`feature: hideHiddenColumns: ${isHidden}`);
429 |
430 | onElementLoaded(notionAppId)
431 | .then((isPresent) => {
432 | if (isPresent) {
433 | const el = getElement(notionAppId);
434 | if (isHidden) {
435 | el.classList.add('hideHiddenColumns');
436 | } else {
437 | el.classList.remove('hideHiddenColumns');
438 | }
439 | // console.log(`${notionBodyCls} style is ${el.style.display}`);
440 | }
441 | return null;
442 | })
443 | .catch((e) => console.log(e));
444 | } catch (e) {
445 | console.log(e);
446 | }
447 | }
448 |
449 | export function disablePopupOnURLPaste(isEnabled: boolean) {
450 | try {
451 | console.log(`feature: disablePopupOnURLPaste: ${isEnabled}`);
452 |
453 | onElementLoaded(notionAppId)
454 | .then((isPresent) => {
455 | if (isPresent) {
456 | if (isEnabled) {
457 | getElement(notionAppId).addEventListener('paste', disablePopupOnURLPasteEvent);
458 | } else {
459 | getElement(notionAppId).removeEventListener('paste', disablePopupOnURLPasteEvent);
460 | }
461 | }
462 | return null;
463 | })
464 | .catch((e) => console.log(e));
465 | } catch (e) {
466 | console.log(e);
467 | }
468 | }
469 |
470 | export function indentationLines(isHidden: boolean) {
471 | try {
472 | console.log(`feature: indentationLines: ${isHidden}`);
473 |
474 | onElementLoaded(notionAppId)
475 | .then((isPresent) => {
476 | if (isPresent) {
477 | const el = getElement(notionAppId);
478 | if (isHidden) {
479 | el.classList.add('indentationLines');
480 | } else {
481 | el.classList.remove('indentationLines');
482 | }
483 | // console.log(`${notionBodyCls} style is ${el.style.display}`);
484 | }
485 | return null;
486 | })
487 | .catch((e) => console.log(e));
488 | } catch (e) {
489 | console.log(e);
490 | }
491 | }
492 |
493 | // #region ## ----------------- internal methods ----------------- ##
494 |
495 | function disablePopupOnURLPasteEvent(e: any) {
496 | const content = e.clipboardData.getData('text/plain');
497 |
498 | // hide popup for external urls matching "xx.yy "
499 | if (
500 | (!content.includes(' ') || content.slice(-1) === ' ') &&
501 | !content.includes('notion.so') &&
502 | content.includes('.')
503 | ) {
504 | console.log('inside disablePopupOnURLPasteEvent');
505 | const dismissBtn =
506 | '#notion-app .notion-overlay-container.notion-default-overlay-container .notion-embed-menu .notion-scroller.vertical > div > div > div:nth-child(1)';
507 | onElementLoaded(dismissBtn)
508 | .then((ex) => {
509 | simulateKey('esc');
510 | })
511 | .catch((ex) => {
512 | console.log(ex);
513 | });
514 | }
515 | }
516 |
517 | function isSlashMenuVisible() {
518 | // this selector covers both scenario of slash menu when it appears in main doc or inside popup doc
519 | const slashMenuCls =
520 | '#notion-app > div > div.notion-overlay-container.notion-default-overlay-container > div > div > div > div:nth-child(2) > div > div > div > div > div.notion-scroller.vertical';
521 | const isVisible = getElement(slashMenuCls) !== null;
522 | return isVisible;
523 | }
524 |
525 | function hideSlashMenuAfterSpaceEvent(e: any) {
526 | try {
527 | const spaceKey = ' ';
528 | // console.log(e);
529 | if (e.key === spaceKey) {
530 | if (e.target.textContent.includes('/')) {
531 | if (isSlashMenuVisible()) {
532 | // hide slash menu by simulating ESC key
533 | simulateKey('esc');
534 | console.info('slash menu hid');
535 | }
536 | }
537 | }
538 | } catch (x) {
539 | console.error(e);
540 | }
541 | }
542 |
543 | function disableAiAfterSpaceKeyHandler(e: any) {
544 | if (e.code === 'Space') {
545 | e.preventDefault();
546 | document.execCommand('insertText', false, ' ');
547 | }
548 | }
549 |
550 | function disableSlashMenuEvent(e: any) {
551 | const slashKey = '/';
552 |
553 | const insideTable = e?.path?.some((x: any) => {
554 | if (
555 | e?.target?.classList?.contains('notranslate') && // select only cells and not preview window
556 | x?.classList?.contains('notion-default-overlay-container') &&
557 | x?.classList?.contains('notion-overlay-container')
558 | ) {
559 | return true;
560 | }
561 | return false;
562 | });
563 |
564 | // don't simulate esc when using slash key inside table cell becuz it'll exit the table
565 | // If the slash key is pressed, without the ctrl/cmd key (would be intent to modify selected block)
566 | // https://notion.notion.site/Learn-the-shortcuts-66e28cec810548c3a4061513126766b0#5c679ece35ee4e81b1217333a4cf35b3
567 | if (e.code === 'Slash' && !insideTable && !(e.ctrlKey || e.metaKey)) {
568 | // hide popup menu as soon as it's added to DOM
569 | onElementLoaded(
570 | 'div.notion-scroller.vertical',
571 | // @ts-ignore
572 | 'div.notion-overlay-container.notion-default-overlay-container',
573 | )
574 | .then(() => {
575 | console.log('popup found');
576 | simulateKey('esc');
577 | console.log('hid menu');
578 | })
579 | .catch((e2) => {
580 | console.error(e2);
581 | });
582 | }
583 | }
584 |
585 | export function hideTableOfContents(isEnabled: boolean) {
586 | try {
587 | console.debug(`feature: hideTableOfContents: ${isEnabled}`);
588 |
589 | onElementLoaded(notionAppId)
590 | .then((isPresent) => {
591 | if (isPresent) {
592 | const el = getElement(notionAppId);
593 | if (isEnabled) {
594 | el.classList.add('hideTableOfContents');
595 | } else {
596 | el.classList.remove('hideTableOfContents');
597 | }
598 | }
599 | return null;
600 | })
601 | .catch((e) => console.error(e));
602 | } catch (e) {
603 | console.error(e);
604 | }
605 | }
606 |
--------------------------------------------------------------------------------
/components/features/rollupUrlClickable.ts:
--------------------------------------------------------------------------------
1 | import { isObserverType, onElementLoaded, pageChangeListener, removePageChangeListener, toElement } from '../utils';
2 |
3 | const notionAppInnerCls = '.notion-app-inner';
4 |
5 | // this works for both full page table and full page content
6 | const notionPresenceContainerCls = '.notion-presence-container';
7 |
8 | const DEBUG = true;
9 |
10 | const docEditObserverObj = {};
11 | let pageChangeObserverObj = {};
12 |
13 | export function rollupUrlClickable(isEnabled: boolean) {
14 | try {
15 | console.log(`feature: enablerollupUrlClickable: ${isEnabled}`);
16 |
17 | // triggers on page load
18 | // it waits for doc to be loaded
19 | onElementLoaded(notionPresenceContainerCls)
20 | .then((isPresent) => {
21 | if (isPresent) {
22 | if (isEnabled) {
23 | console.log('calling addrollupUrlClickable');
24 | bindRollupClickableEvent();
25 | // docEditListener();
26 | } else {
27 | removerollupUrlClickable();
28 | }
29 | }
30 | return true;
31 | })
32 | .catch((e) => console.error(e));
33 | } catch (e) {
34 | console.error(e);
35 | }
36 | }
37 |
38 | // Internal methods //
39 |
40 | function removeDocEditListener() {
41 | if (isObserverType(docEditObserverObj)) {
42 | DEBUG && console.log('disconnected docEditObserver');
43 | (docEditObserverObj as MutationObserver).disconnect();
44 | }
45 | }
46 |
47 | function bindRollupClickableEvent() {
48 | // add event
49 | addrollupUrlClickable();
50 |
51 | // re-add event on page change
52 | pageChangeObserverObj = pageChangeListener([], [addrollupUrlClickable]);
53 | }
54 |
55 | function getUrl(textParam: string) {
56 | if (!textParam) {
57 | return null;
58 | }
59 | let text = textParam.trim();
60 |
61 | if (text.indexOf(' ') === -1 && text.indexOf('.') > 0 && text.length > 3) {
62 | // href needs http(s) in url
63 | if (!/^https?:\/\//i.test(text)) {
64 | text = `http://${text}`;
65 | }
66 | return text;
67 | }
68 | return null;
69 | }
70 |
71 | let linkComponentEl: any = null;
72 | let rollupCellEl: any = null;
73 |
74 | function createLinkComponent(url: string) {
75 | return toElement(
76 | `
246 |
251 |
252 |
247 |
250 |
248 |
249 |
77 |
100 | `,
101 | );
102 | }
103 |
104 | function handleTableHover(e: any) {
105 | // console.log("hover over table", e.target);
106 | let nestedLevel = 0;
107 | const path = e.composedPath();
108 | for (let i = 0; i < path.length; i++) {
109 | const x = path[i];
110 | // console.log(x);
111 | nestedLevel++;
112 | // return if hovering over link component
113 | if (x.className === 'linkComponent') {
114 | return;
115 | }
116 | if (nestedLevel > 5) {
117 | // linkComponent not found
118 | break;
119 | }
120 | }
121 | if (linkComponentEl) {
122 | linkComponentEl.remove();
123 | }
124 | if (rollupCellEl) {
125 | rollupCellEl.style.position = null;
126 | rollupCellEl = null;
127 | }
128 | // onhover: background: rgb(239, 239, 238)
129 |
130 | let urlSpan = null;
131 | const rollupCellStyle = 'display: flex;';
132 |
133 | for (const x of path) {
134 | if (x.getAttribute('style') === rollupCellStyle) {
135 | // console.log(x.getAttribute("style"));
136 | urlSpan = x.querySelector(
137 | 'div[style*="display: block;"] div[style*="display: flex; flex-wrap: nowrap;"] span',
138 | );
139 | if (urlSpan) {
140 | // console.log("it's rollup cell");
141 | rollupCellEl = x;
142 | break;
143 | }
144 | }
145 |
146 | // break if it reaches original eventListener element
147 | if (x === e.currentTarget) {
148 | break;
149 | }
150 | }
151 |
152 | if (rollupCellEl) {
153 | // debugger;
154 | // console.log("inside rollupcell");
155 | let text = '';
156 | // see if it contains actual link
157 | const anchor = urlSpan.querySelector('a');
158 | if (anchor) {
159 | text = anchor.href;
160 | } else {
161 | // nope it's just a span
162 | text = urlSpan.textContent;
163 | }
164 | const url = getUrl(text);
165 | if (url) {
166 | rollupCellEl.style.position = 'relative';
167 |
168 | linkComponentEl = createLinkComponent(url);
169 |
170 | rollupCellEl.appendChild(linkComponentEl);
171 |
172 | // console.log(url);
173 | } else {
174 | // console.log("empty text");
175 | }
176 | }
177 | }
178 |
179 | function handletableRowAsPageHover(e: any) {
180 | // console.log("relatedTarget", e.relatedTarget);
181 |
182 | let nestedLevel = 0;
183 | const path = e.composedPath();
184 |
185 | for (const x of path) {
186 | nestedLevel++;
187 | // return if hovering over link component
188 | if (x.className === 'linkComponent') {
189 | // console.log("ignoring link hover");
190 | return;
191 | }
192 | if (nestedLevel > 5) {
193 | // linkComponent not found
194 | break;
195 | }
196 | }
197 | if (linkComponentEl) {
198 | linkComponentEl.remove();
199 | }
200 | if (rollupCellEl) {
201 | rollupCellEl.style.position = null;
202 | rollupCellEl = null;
203 | }
204 | // onhover: background: rgb(239, 239, 238)
205 |
206 | let urlSpan = null;
207 | const rollupCellStyle = 'display: flex; flex: 1 1 0%; min-width: 0px;';
208 |
209 | for (let i = 0; i < path.length; i++) {
210 | const x = path[i];
211 | if (x.getAttribute('style') === rollupCellStyle) {
212 | urlSpan = x.querySelector(
213 | 'div.notion-focusable div[style*="display: flex; flex-wrap:"] > span[style*="word-break: break-word;"]',
214 | );
215 | console.log(urlSpan);
216 | if (urlSpan) {
217 | rollupCellEl = x;
218 | break;
219 | }
220 | }
221 |
222 | // break if it reaches original eventListener element
223 | if (x === e.currentTarget) {
224 | break;
225 | }
226 | }
227 |
228 | if (rollupCellEl) {
229 | // debugger;
230 | let text = '';
231 | // see if it contains actual link
232 | const anchor = urlSpan.querySelector('a');
233 | if (anchor) {
234 | text = anchor.href;
235 | } else {
236 | // nope it's just a span
237 | text = urlSpan.textContent;
238 | }
239 | const url = getUrl(text);
240 | if (url) {
241 | rollupCellEl.style.position = 'relative';
242 |
243 | linkComponentEl = createLinkComponent(url);
244 |
245 | rollupCellEl.appendChild(linkComponentEl);
246 | }
247 | }
248 | }
249 |
250 | function addrollupUrlClickable() {
251 | console.log('adding addrollupUrlClickable feature...');
252 |
253 | // console.log(
254 | // "notion-table-view count",
255 | // document.querySelectorAll(".notion-table-view").length
256 | // );
257 |
258 | const tables = document.querySelectorAll('.notion-table-view');
259 | if (tables) {
260 | tables.forEach((x) => {
261 | x.addEventListener('mouseover', handleTableHover);
262 | });
263 | }
264 |
265 | const tableRowAsPage = document.querySelector(
266 | '.notion-scroller.vertical > div:nth-of-type(2)[style*="display: flex;"] div[style="margin: 0px;"]',
267 | );
268 | if (tableRowAsPage) {
269 | tableRowAsPage.addEventListener('mouseover', handletableRowAsPageHover);
270 | }
271 | }
272 |
273 | function removerollupUrlClickable() {
274 | console.log('removing removerollupUrlClickable feature...');
275 |
276 | removePageChangeListener(pageChangeObserverObj);
277 |
278 | // removeDocEditListener();
279 | const tables = document.querySelectorAll('.notion-table-view');
280 | if (tables) {
281 | tables.forEach((x) => {
282 | x.removeEventListener('mouseover', handleTableHover);
283 | });
284 | }
285 |
286 | const tableRowAsPage = document.querySelector(
287 | '.notion-scroller.vertical > div:nth-of-type(2)[style*="width: 100%; display: flex; flex-direction: column;"] div[style="margin: 0px;"]',
288 | );
289 | if (tableRowAsPage) {
290 | tableRowAsPage.removeEventListener('mouseover', handletableRowAsPageHover);
291 | }
292 |
293 | console.log('removerollupUrlClickable feature done');
294 | }
295 |
--------------------------------------------------------------------------------
/components/features/scrollToTopBtn.ts:
--------------------------------------------------------------------------------
1 | import {
2 | getElement,
3 | onElementLoaded,
4 | toElement,
5 | pageChangeListener,
6 | removePageChangeListener,
7 | } from '../utils';
8 |
9 | const notionFrameCls = '.notion-frame';
10 | let pageChangeObserverObj = {};
11 | let ticking = false;
12 | let isBtnVisible = false;
13 | let scrollBtn: HTMLElement;
14 | let docElement: HTMLElement;
15 |
16 | export function scrollTopBtn(isEnabled: boolean) {
17 | try {
18 | console.log(`feature: scrollTopBtn: ${isEnabled}`);
19 |
20 | onElementLoaded(notionFrameCls)
21 | .then((isPresent) => {
22 | if (isPresent) {
23 | if (isEnabled) {
24 | addScrollTopBtn();
25 | } else {
26 | removeScrollTopBtn();
27 | }
28 | }
29 | return null;
30 | })
31 |
32 | .catch((e) => console.log(e));
33 | } catch (e) {
34 | console.log(e);
35 | }
36 | }
37 |
38 | // Internal methods //
39 |
40 | function bindScrollEventToDoc() {
41 | docElement = getElement('.notion-frame > .notion-scroller');
42 | docElement.addEventListener('scroll', handleScrollEvent);
43 | adjustBtnVisibilty();
44 | console.log('added bindScrollEventToDoc');
45 | }
46 | function scrollToTop() {
47 | docElement.scroll({
48 | top: 0,
49 | left: 0,
50 | // behavior: "auto",
51 | });
52 | }
53 | function addScrollTopBtn() {
54 | // add btn div to HTML
55 | const btnHTML = `
78 |
85 |
97 |
98 |
99 | ⭡
`;
56 | getElement(notionFrameCls).after(toElement(btnHTML));
57 | console.log('inserted scroll btn div');
58 | scrollBtn = getElement('.scroll-top-btn');
59 | // scrollTopBtn.classList.add(btnCls);
60 | // add onclick event
61 | scrollBtn.addEventListener('click', scrollToTop);
62 | adjustBtnVisibilty();
63 |
64 | // add scroll event to doc
65 | bindScrollEventToDoc();
66 |
67 | // re-add scroll event on page change
68 | pageChangeObserverObj = pageChangeListener([bindScrollEventToDoc], []);
69 | }
70 |
71 | function handleScrollEvent() {
72 | // console.log("scroll event fired");
73 |
74 | if (!ticking) {
75 | // optimizing scroll event
76 | window.requestAnimationFrame(() => {
77 | // console.log("requestAnimationFrame fired");
78 | adjustBtnVisibilty();
79 | });
80 |
81 | ticking = true;
82 | }
83 | }
84 |
85 | function adjustBtnVisibilty() {
86 | // show scroll btn when user scroll down 100% of window height
87 | const didUserScrollDown = docElement.scrollTop >= docElement.clientHeight;
88 |
89 | if (didUserScrollDown) {
90 | // Show button if it's not shown
91 | if (!isBtnVisible) {
92 | scrollBtn.classList.add('show');
93 | isBtnVisible = true;
94 | console.log('btn shown');
95 | }
96 | } else if (isBtnVisible) {
97 | // Hide button if it's not hidden
98 | scrollBtn.classList.remove('show');
99 | isBtnVisible = false;
100 | console.log('btn hidden');
101 | }
102 | ticking = false;
103 | }
104 | function removeScrollTopBtn() {
105 | removePageChangeListener(pageChangeObserverObj);
106 |
107 | isBtnVisible = false;
108 | if (scrollBtn) {
109 | scrollBtn.remove();
110 | console.log('scrollTopBtn removed');
111 | }
112 | }
113 |
--------------------------------------------------------------------------------
/components/features/spellCheckForCode.ts:
--------------------------------------------------------------------------------
1 | import { getElement, onElementLoaded, isObserverType } from '../utils';
2 |
3 | const notionAppInnerCls = '.notion-app-inner';
4 | const notionPageContentCls = '.notion-page-content';
5 |
6 | const DEBUG = false;
7 |
8 | let docEditObserverObj = {};
9 |
10 | export function spellcheckForCode(isEnabled: boolean) {
11 | try {
12 | console.log(`feature: enableSpellcheckForCode: ${isEnabled}`);
13 |
14 | // triggers on page load
15 | // it waits for doc to be loaded
16 | onElementLoaded(notionPageContentCls)
17 | .then((isPresent) => {
18 | if (isPresent) {
19 | if (isEnabled) {
20 | addSpellCheckForCode();
21 | docEditListener();
22 | } else {
23 | removeSpellCheckForCode();
24 | }
25 | }
26 | return true;
27 | })
28 | .catch((e) => console.log(e));
29 | } catch (e) {
30 | console.log(e);
31 | }
32 | }
33 |
34 | // Internal methods //
35 |
36 | function removeDocEditListener() {
37 | if (isObserverType(docEditObserverObj)) {
38 | DEBUG && console.log('disconnected docEditObserver');
39 | (docEditObserverObj as MutationObserver).disconnect();
40 | }
41 | }
42 |
43 | // works for page change or window reload
44 | function docEditListener() {
45 | console.log('listening for doc edit changes: enableSpellcheckForCode...');
46 | let isSpellcheckEnabled = false;
47 |
48 | // @ts-ignore
49 | docEditObserverObj = new MutationObserver((mutationList, obsrvr) => {
50 | DEBUG && console.log('found changes in doc content');
51 |
52 | for (let i = 0; i < mutationList.length; i++) {
53 | const m = mutationList[i];
54 |
55 | // case: check for div change
56 | if (m.type === 'childList') {
57 | if (
58 | m.target &&
59 | m.addedNodes.length > 0 &&
60 | // @ts-ignore
61 | m.target.classList.contains('notion-code-block') &&
62 | // @ts-ignore
63 | m.target.querySelector('div[spellcheck]')
64 | ) {
65 | console.log('codeblok');
66 | isSpellcheckEnabled = true;
67 | // briefly pause listener to avoid recursive triggers
68 | // removeDocEditListener();
69 |
70 | m.target
71 | // @ts-ignore
72 | .querySelector('div[spellcheck]')
73 | .setAttribute('spellcheck', 'true');
74 | // updateCodeline(block);
75 | // docEditListener();
76 | }
77 | }
78 | }
79 |
80 | if (isSpellcheckEnabled) {
81 | console.log('spellcheck enabled');
82 | isSpellcheckEnabled = false;
83 | }
84 | });
85 |
86 | // now add listener for doc text change
87 | const pageContentEl = getElement(notionAppInnerCls);
88 |
89 | (docEditObserverObj as MutationObserver).observe(pageContentEl, {
90 | childList: true,
91 | subtree: true,
92 | });
93 | }
94 | function addSpellCheckForCode() {
95 | const codeDivs = document.querySelectorAll(
96 | 'div.notion-page-content > div.notion-selectable.notion-code-block div.notion-code-block > div'
97 | );
98 | codeDivs.forEach((x) => {
99 | x.setAttribute('spellcheck', 'true');
100 | });
101 | }
102 |
103 | function removeSpellCheckForCode() {
104 | console.log('removing removeSpellCheckForCode feature...');
105 |
106 | removeDocEditListener();
107 |
108 | const codeDivs = document.querySelectorAll(
109 | 'div.notion-page-content > div.notion-selectable.notion-code-block div.notion-code-block > div'
110 | );
111 |
112 | codeDivs.forEach((x) => {
113 | x.setAttribute('spellcheck', 'false');
114 | });
115 |
116 | console.log('removeCodeLineNumbers feature done');
117 | }
118 |
--------------------------------------------------------------------------------
/components/settings.ts:
--------------------------------------------------------------------------------
1 | // settings and their default value
2 | export const defaultSettings = {
3 | displayOutline: true,
4 | hideAiBtn: false,
5 | hideTableOfContents: false,
6 | bolderTextInDark: false,
7 | smallText: false,
8 | fullWidth: false,
9 | hideComments: false,
10 | hideBacklinks: false,
11 | scrollTopBtn: false,
12 | hideSlashMenuAfterSpace: false,
13 | disableSlashMenu: false,
14 | leftAlignMedia: false,
15 | hideNotification: false,
16 | showHoverText: false,
17 | hideHiddenColumns: false,
18 | disablePopupOnURLPaste: false,
19 | addMoreHeightToPage: false,
20 | spellcheckForCode: false,
21 | codeLineNumbers: false,
22 | // step 1 of 2: add function name
23 | openFullPage: false,
24 | narrowListItems: false,
25 | indentationLines: false,
26 | rollupUrlClickable: false,
27 | borderOnImages: false,
28 | disableSlashCommandPlaceholder: false,
29 | disableAiAfterSpaceKey: false,
30 | };
31 |
32 | export const settingDetails = [
33 | {
34 | func: 'displayOutline',
35 | name: 'Show Outline',
36 | desc: 'Show sticky outline (table of contents) for pages that have headings',
37 | },
38 | {
39 | func: 'hideTableOfContents',
40 | name: 'Hide Table of contents',
41 | desc: "Hide Notion's default 'Table of contents' feature",
42 | },
43 | {
44 | func: 'hideAiBtn',
45 | name: 'Hide AI button from pages',
46 | desc: 'Hide floating AI button (bottom-right corner) from pages',
47 | },
48 | {
49 | func: 'disableAiAfterSpaceKey',
50 | name: 'Disable AI menu when pressing space',
51 | desc: "Don't show AI command menu when pressing space key",
52 | disable_func: 'disableAiAfterSpaceKey',
53 | },
54 | {
55 | func: 'fullWidth',
56 | name: 'Full width for all pages',
57 | desc: 'Set full width for all pages by default',
58 | },
59 | {
60 | func: 'smallText',
61 | name: 'Small text for all pages',
62 | desc: 'Set small text for all pages by default',
63 | },
64 |
65 | {
66 | func: 'leftAlignMedia',
67 | name: 'Left align media',
68 | desc: 'Align document images and videos to the left instead of center',
69 | },
70 |
71 | {
72 | func: 'addMoreHeightToPage',
73 | name: 'Add more height to page',
74 | desc: 'Add more height to page by hiding top padding, image cover, & icon',
75 | pf: true,
76 | },
77 | {
78 | func: 'openFullPage',
79 | name: 'Open full page instead of preview',
80 | desc: 'Bypass preview and open full page of table, board, etc',
81 | },
82 | {
83 | func: 'rollupUrlClickable',
84 | name: 'Make Rollup URLs clickable',
85 | desc: 'Make URLs in Rollup property clickable',
86 | },
87 | {
88 | func: 'scrollTopBtn',
89 | name: "'Scroll to top' button",
90 | desc: 'Add button at bottom-right corner for scrolling back to top',
91 | },
92 | {
93 | func: 'hideSlashMenuAfterSpace',
94 | name: 'Close slash command menu after space',
95 | desc: "Close slash command popup menu '/' by pressing space key",
96 | disable_func: 'disableSlashMenu',
97 | },
98 | {
99 | func: 'disableSlashMenu',
100 | name: "Don't show slash command menu when pressing '/'",
101 | desc: "Don't show slash command popup menu when pressing '/'",
102 | disable_func: 'hideSlashMenuAfterSpace',
103 | },
104 | {
105 | func: 'disableSlashCommandPlaceholder',
106 | name: 'Hide slash command placeholder',
107 | desc: "Hide placeholder: Press '/' for commands…",
108 | },
109 | {
110 | func: 'showHoverText',
111 | name: 'Show full text on hover',
112 | desc: 'Show full text in table cells on mouse hover',
113 | },
114 | {
115 | func: 'codeLineNumbers',
116 | name: 'Show code line numbers',
117 | desc: 'Show line numbers for code blocks',
118 | },
119 | {
120 | func: 'spellcheckForCode',
121 | name: 'Enable spellcheck inside code blocks',
122 | desc: 'Show squiggly red lines for any spelling mistakes inside code blocks',
123 | },
124 | {
125 | func: 'disablePopupOnURLPaste',
126 | name: "Don't show popup menu when pasting external links",
127 | desc: "Don't show popup menu (i.e. dismiss, create bookmark, create embed) when pasting external URLs",
128 | },
129 |
130 | {
131 | func: 'hideNotification',
132 | name: 'Hide notification icon',
133 | desc: "Hide red notification icon from sidebar when it's in closed state and hide notification number from tab title",
134 | },
135 | {
136 | func: 'narrowListItems',
137 | name: 'Narrow spacing between items',
138 | desc: 'Fit more content on screen by reducing space between items i.e. headings, lists, etc.',
139 | },
140 | {
141 | func: 'indentationLines',
142 | name: 'Add indentation lines to lists',
143 | desc: 'Add vertical indentation lines to bullet and to-do lists',
144 | },
145 | {
146 | func: 'bolderTextInDark',
147 | name: 'Bolder text in dark mode',
148 | desc: 'Fix poorly recognizable bold text in dark mode',
149 | },
150 | {
151 | func: 'hideHiddenColumns',
152 | name: "Hide 'Hidden columns' in board view",
153 | desc: "Truly hide 'Hidden columns' in Kanban board view",
154 | },
155 | {
156 | func: 'hideComments',
157 | name: 'Hide comments section from all pages',
158 | desc: '',
159 | },
160 | {
161 | func: 'hideBacklinks',
162 | name: 'Hide backlinks section from all pages',
163 | desc: '',
164 | },
165 | {
166 | func: 'borderOnImages',
167 | name: 'Add frame to images',
168 | desc: 'Add frame around images to make them easily noticeable on page',
169 | },
170 |
171 | // step 2 of 2: add function name and description
172 | ];
173 |
--------------------------------------------------------------------------------
/components/utils.ts:
--------------------------------------------------------------------------------
1 | import { defaultSettings } from './settings';
2 |
3 | export const twitterShareTxt =
4 | 'https://twitter.com/intent/tweet?url=&text=%40NotionBoost%20by%20%40GorvGoyl%20adds%20tons%20of%20capabilities%20to%20%40NotionHQ%20like%20outline%2C%20scroll%20top%20button%2C%20hide%20slash%20command%20menu%20and%20many%20more!';
5 | // stays on doc change
6 | const notionFrameCls = '.notion-frame';
7 | const DEBUG = false;
8 | // these gets removed on doc change
9 | const notionScrollerCls = '.notion-frame .notion-scroller.vertical';
10 | const notionPageContentCls = '.notion-page-content';
11 | const notionPresenceContainerCls = '.notion-presence-container';
12 |
13 | /**
14 | * add listener for page change or window reload event
15 | *
16 | * accepts array of functions
17 | * @param {*} callbacksAfterDocReady call any function after notion doc is ready
18 | * @param {*} callbacksAfterContentReady call any function after notion doc content is loaded (async)
19 | * @return {*} observer object which can be used to disconnect pageChangeListener
20 | */
21 | export function pageChangeListener(callbacksAfterDocReady: any, callbacksAfterContentReady: any) {
22 | console.log(`listening to page change events`);
23 |
24 | const pageChangeObserverObj = new MutationObserver((mutationList, obsrvr) => {
25 | console.log('new page opened');
26 |
27 | // check if scroller class is loaded
28 | if (getElement(notionScrollerCls)) {
29 | for (let i = 0; i < callbacksAfterDocReady.length; i++) {
30 | callbacksAfterDocReady[i]();
31 | }
32 | // now wait for notionPresenceContainerCls to be loaded
33 | onElementLoaded(notionPresenceContainerCls, notionScrollerCls as any)
34 | .then((isPresent) => {
35 | if (isPresent) {
36 | for (let i = 0; i < callbacksAfterContentReady.length; i++) {
37 | callbacksAfterContentReady[i]();
38 | }
39 | }
40 | return null;
41 | })
42 | .catch((e) => console.log(e));
43 | }
44 | });
45 |
46 | const docFrameEl = getElement(notionFrameCls);
47 |
48 | pageChangeObserverObj.observe(docFrameEl, {
49 | childList: true,
50 | });
51 | return pageChangeObserverObj;
52 | }
53 |
54 | export function removePageChangeListener(pageChangeObserverObj: any) {
55 | if (isObserverType(pageChangeObserverObj)) {
56 | console.log('disconnected pageChangeObserver');
57 | pageChangeObserverObj.disconnect();
58 | }
59 | }
60 |
61 | export function isObserverType(obj: any) {
62 | return obj.disconnect !== undefined;
63 | }
64 |
65 | /**
66 | *
67 | * Wait for an HTML element to be loaded like `div`, `span`, `img`, etc.
68 | * ex: `onElementLoaded("div.some_class").then(()=>{}).catch(()=>{})`
69 | * @param {*} elementToObserve wait for this element to load
70 | * @param {*} parentStaticElement (optional) if parent element is not passed then `document` is used
71 | * @return {*} Promise - return promise when `elementToObserve` is loaded
72 | */
73 | export function onElementLoaded(elementToObserve: any, parentStaticElement = undefined) {
74 | DEBUG && console.log(`waiting for element: ${elementToObserve}`);
75 | const promise = new Promise((resolve, reject) => {
76 | try {
77 | if (getElement(elementToObserve)) {
78 | DEBUG && console.log(`element already present: ${elementToObserve}`);
79 | resolve(true);
80 | return;
81 | }
82 | const parentElement = parentStaticElement ? getElement(parentStaticElement) : document;
83 |
84 | const observer = new MutationObserver((mutationList, obsrvr) => {
85 | const divToCheck = getElement(elementToObserve);
86 | // console.log("checking for div...");
87 |
88 | if (divToCheck) {
89 | console.log(`element loaded: ${elementToObserve}`);
90 | obsrvr.disconnect(); // stop observing
91 | resolve(true);
92 | }
93 | });
94 |
95 | // start observing for dynamic div
96 | observer.observe(parentElement, {
97 | childList: true,
98 | subtree: true,
99 | });
100 | } catch (e) {
101 | console.log(e);
102 | reject(Error('some issue... promise rejected'));
103 | }
104 | });
105 | return promise;
106 | }
107 |
108 | // detect if css is changed for a div (once)
109 | export function onElementCSSChanged(divClassToObserve: any, timeOut: any) {
110 | DEBUG && console.log(`waiting for element: ${divClassToObserve}`);
111 | const promise = new Promise((resolve, reject) => {
112 | try {
113 | const observer = new MutationObserver((mutationList, obsrvr) => {
114 | mutationList.forEach((mutation) => {
115 | if (mutation.attributeName === 'style') {
116 | console.log('style change');
117 | obsrvr.disconnect(); // stop observing
118 | resolve(true);
119 | }
120 | });
121 | });
122 |
123 | // start observing for dynamic div
124 | observer.observe(divClassToObserve, {
125 | attributes: true,
126 | attributeFilter: ['style'],
127 | });
128 |
129 | if (timeOut) {
130 | setTimeout(() => {
131 | observer.disconnect();
132 | console.log(`observer disconnected after ${timeOut}`);
133 | }, timeOut);
134 | }
135 | } catch (e) {
136 | console.log(e);
137 | reject(Error('some issue... promise rejected'));
138 | }
139 | });
140 | return promise;
141 | }
142 |
143 | // create html node from string like $('div')
144 | export function toElement(s: any) {
145 | let e = document.createElement('div');
146 | const r = document.createRange();
147 | r.selectNodeContents(e);
148 | const f = r.createContextualFragment(s);
149 | e.appendChild(f);
150 | // @ts-ignore
151 | e = e.firstElementChild;
152 | return e;
153 | }
154 | // export function toElement(
155 | // s = "",
156 | // c,
157 | // t = document.createElement("template"),
158 | // l = "length"
159 | // ) {
160 | // t.innerHTML = s.trim();
161 | // c = [...t.content.childNodes];
162 | // return c[l] > 1 ? c : c[0] || "";
163 | // }
164 |
165 | // run func every x millisec and stop after y millisec
166 | export function runMethod(func: any, runEvery: any, stopAfter: any) {
167 | const process = setInterval(func, runEvery);
168 |
169 | setTimeout(() => {
170 | console.log('stopped');
171 | clearInterval(process);
172 | }, stopAfter);
173 | }
174 |
175 | export function removeChildren(el: any) {
176 | while (el.firstChild) el.removeChild(el.firstChild);
177 | }
178 | export function getElement(selector: any) {
179 | return document.querySelector(selector);
180 | }
181 | export function getElements(selector: any) {
182 | return document.querySelectorAll(selector);
183 | }
184 | // ugly method to check for empty
185 | export function isEmpty(obj: any) {
186 | // boolean like false = non-empty
187 | if (obj === false || obj === true) return false;
188 |
189 | // empty string, null is empty
190 | if (!obj) return true;
191 |
192 | // empty object = empty
193 | if (Object.keys(obj).length === 0) return true;
194 | return false;
195 | }
196 |
197 | // 1. get from default settings 2. update it with saved settings 3. return
198 | export function getLatestSettings() {
199 | const promise = new Promise((resolve, reject) => {
200 | try {
201 | const latestSet = { ...defaultSettings };
202 |
203 | browser.storage.sync.get(['nb_settings']).then((result) => {
204 | const savedSet = result.nb_settings;
205 | if (!isEmpty(savedSet)) {
206 | for (const k of Object.keys(defaultSettings)) {
207 | if (!isEmpty(savedSet[k])) {
208 | (latestSet as any)[k] = savedSet[k];
209 | }
210 | }
211 | }
212 | resolve(latestSet);
213 | });
214 | } catch (e) {
215 | console.log(e);
216 | reject(Error('some issue... promise rejected'));
217 | }
218 | });
219 | return promise;
220 | }
221 |
222 | export function simulateKey(key: any) {
223 | switch (key) {
224 | case 'esc': {
225 | window.dispatchEvent(
226 | new KeyboardEvent('keydown', {
227 | altKey: false,
228 | code: 'Escape',
229 | ctrlKey: false,
230 | isComposing: false,
231 | key: 'Escape',
232 | location: 0,
233 | metaKey: false,
234 | repeat: false,
235 | shiftKey: false,
236 | which: 27,
237 | charCode: 0,
238 | keyCode: 27,
239 | })
240 | );
241 | break;
242 | }
243 | default:
244 | console.error('key not implemented', key);
245 | }
246 | }
247 |
--------------------------------------------------------------------------------
/entrypoints/content.ts:
--------------------------------------------------------------------------------
1 | import '../styles/content.scss';
2 | import { codeLineNumbers } from '../components/features/codeLineNumbers';
3 | import { openFullPage } from '../components/features/openFullPage';
4 | import { displayOutline } from '../components/features/outline';
5 | import * as features from '../components/features/pageElements';
6 | import { rollupUrlClickable } from '../components/features/rollupUrlClickable';
7 | import { scrollTopBtn } from '../components/features/scrollToTopBtn';
8 | // step 1 of 2: import feature
9 | import { spellcheckForCode } from '../components/features/spellCheckForCode';
10 | import { defaultSettings } from '../components/settings';
11 | import { getLatestSettings, isEmpty } from '../components/utils';
12 | import { hideAiBtn, hideTableOfContents } from '../components/features/pageElements';
13 |
14 | let featureList: any = {};
15 |
16 | featureList = { ...features };
17 |
18 | // step 2 of 2: add that feature to featureList object
19 | featureList.displayOutline = displayOutline;
20 | featureList.scrollTopBtn = scrollTopBtn;
21 | featureList.codeLineNumbers = codeLineNumbers;
22 | featureList.spellcheckForCode = spellcheckForCode;
23 | featureList.openFullPage = openFullPage;
24 | featureList.rollupUrlClickable = rollupUrlClickable;
25 | featureList.hideAiBtn = hideAiBtn;
26 | featureList.hideTableOfContents = hideTableOfContents;
27 |
28 | export default defineContentScript({
29 | matches: ['*://*.notion.so/*', '*://*.notion.site/*'],
30 | main() {
31 | init();
32 |
33 | browser.storage.onChanged.addListener((changes, namespace) => {
34 | console.debug(changes);
35 | console.debug(namespace);
36 | const func = changes.nb_settings.newValue.call_func;
37 | featureList[func.name](func.arg);
38 | });
39 |
40 | if (document.readyState !== 'loading') {
41 | console.debug('document is already ready');
42 | } else {
43 | document.addEventListener('DOMContentLoaded', () => {
44 | console.debug('document was not ready');
45 | });
46 | }
47 |
48 | window.onload = () => {
49 | // same as window.addEventListener('load', (event) => {
50 | console.debug('window is ready');
51 | };
52 | },
53 | });
54 |
55 | function init() {
56 | let syncSet: any = {};
57 | const updatedSet = { ...defaultSettings };
58 |
59 | getLatestSettings()
60 | .then((set: any) => {
61 | console.debug('LatestSettings: ', set);
62 |
63 | console.debug('enabling features...');
64 | // on page load, execute only enabled features
65 | for (const func of Object.keys(set)) {
66 | const isEnabled = set[func];
67 | if (isEnabled) {
68 | featureList[func](isEnabled);
69 | }
70 | }
71 | return null;
72 | })
73 | .catch((e) => console.debug(e));
74 |
75 | browser.storage.sync.get(['nb_settings']).then((result) => {
76 | syncSet = result;
77 |
78 | // merge synced settings with default settings and then apply updated settings
79 | if (!isEmpty(syncSet)) {
80 | for (const k of Object.keys(defaultSettings)) {
81 | if (
82 | k in syncSet &&
83 | !isEmpty(syncSet[k as keyof typeof syncSet]) &&
84 | syncSet[k as keyof typeof syncSet] !== defaultSettings[k as keyof typeof defaultSettings]
85 | ) {
86 | updatedSet[k as keyof typeof updatedSet] = syncSet[k as keyof typeof syncSet];
87 | }
88 | }
89 | }
90 | });
91 | }
92 |
--------------------------------------------------------------------------------
/entrypoints/popup/About.tsx:
--------------------------------------------------------------------------------
1 | import { Dispatch, SetStateAction } from 'react';
2 | import { Page } from './main';
3 |
4 | export function About({ setPageToShow }: { setPageToShow: Dispatch
7 | what's new}
48 | url="https://gourav.io/notion-boost/whats-new"
49 | txtE=" in this update"
50 | /> */}
51 | {/*
55 | @NotionBoost
56 |
57 | }
58 | url="https://twitter.com/notionboost"
59 | txtE=" for unique tips, tricks, and free goodies."
60 | /> */}
61 |
62 | {/* hey@gourav.io}
65 | // url="hey@gourav.io"
66 | /> */}
67 | Gourav Goyal}
71 | url="https://gourav.io"
72 | />
73 |
80 | );
81 | }
82 |
83 | function Bullet({ txtS, url, urlTxt, txtE }: { txtS: any; url: any; urlTxt: any; txtE: any }) {
84 | return (
85 | {
11 | setPageToShow('main');
12 | }}
13 | tabIndex={0}>
14 |
15 |
16 |
19 |
20 | Notion Boost
21 |
22 | Make Notion more productive and less distractive
23 |
24 |
92 |
151 | );
152 | }
153 |
--------------------------------------------------------------------------------
/entrypoints/popup/App.tsx:
--------------------------------------------------------------------------------
1 | import { Dispatch, SetStateAction } from 'react';
2 |
3 | import { Page } from './main';
4 | import { SettingsTable } from '@/components/SettingsTable';
5 |
6 | function Home({ setPageToShow }: { setPageToShow: Dispatch
101 |
150 |
111 |
113 | •
112 |
120 |
149 |
121 |
148 |
134 | {txtS}
135 | {url && (
136 |
142 | {urlTxt}
143 |
144 | )}
145 | {txtE}{' '}
146 |
147 |
9 |
72 | );
73 | }
74 |
75 | export default Home;
76 |
77 | // #endregion
78 |
79 | // #region ## ----------------- ICONS ----------------- ##
80 |
81 | function NewTabIcon() {
82 | return (
83 |
93 | );
94 | }
95 |
96 | // #endregion
97 |
98 | export const styles = {
99 | link: {
100 | textDecoration: 'underline',
101 | color: '#37352f80',
102 | lineHeight: '1.2',
103 | fontSize: '13px',
104 | cursor: 'pointer',
105 | },
106 | smallGreyText: {
107 | color: '#37352f80',
108 | lineHeight: '1.2',
109 | fontSize: '12px',
110 | },
111 | };
112 |
--------------------------------------------------------------------------------
/entrypoints/popup/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
10 |
71 |
11 |
21 |
22 | {
16 | window.open('https://gourav.io/notion-boost', '_blank');
17 | }}>
18 | Notion Boost
19 |
20 |
24 |
29 |
54 |
33 | Features info
35 |
36 | {/*
37 |
38 | Share
39 |
40 |
41 | */}
42 | setPageToShow('about')}>
45 |
53 |
49 | About
50 | {/*
52 |
60 |
66 | ChatGPT Writer
67 |
68 | - Let AI write emails and messages for you
69 |
70 |