-
Notifications
You must be signed in to change notification settings - Fork 0
/
content.js
136 lines (122 loc) · 3.7 KB
/
content.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
// Helper function to save the themer info
function persist(key, value) {
let theme = JSON.parse(localStorage.getItem("@notionThemer"));
if (theme) {
theme[key] = value;
} else {
theme = {};
theme[key] = value;
}
localStorage.setItem("@notionThemer", JSON.stringify(theme));
}
// Helper function to add DOM observers based on a array of elements to keep track of
const observeDOM = (() => {
let MutationObserver =
window.MutationObserver || window.WebKitMutationObserver;
return (obj, callback) => {
if (!obj || obj.nodeType !== 1) {
return;
}
if (MutationObserver) {
let mutationObserver = new MutationObserver(callback);
mutationObserver.observe(obj, { childList: true, subtree: true });
return mutationObserver;
} else if (window.addEventListener) {
obj.addEventListener("DOMNodeInserted", callback, false);
obj.addEventListener("DOMNodeRemoved", callback, false);
}
};
})();
window.onload = () => {
let themeInfo = localStorage.getItem("@notionThemer");
if (themeInfo) {
gotMessage(JSON.parse(themeInfo));
}
};
// Script Listener to modify theme
function gotMessage(message, sender, sendResponse) {
let keys = Object.keys(message);
keys.forEach((key) => {
switch (key) {
case "setPageBGColor":
changeBGColor(message[key]);
persist(key, message[key]);
break;
case "setAllFontsColors":
changeAllFontsColors(message[key]);
persist(key, message[key]);
break;
case "setIconsColor":
changeIconsColor(message[key]);
persist(key, message[key]);
break;
default:
// alert("Found No Function");
}
});
}
chrome.runtime.onMessage.addListener(gotMessage);
// FUNCTIONS TO MODIFY NOTION'S WEBSITE THEME
function changeBGColor(color) {
observeDOM(document.querySelector("body"), (m) => {
let addedNodes = [];
let removedNodes = [];
m.forEach(
(record) =>
record.addedNodes.length & addedNodes.push(...record.addedNodes)
);
m.forEach(
(record) =>
record.removedNodes.length & removedNodes.push(...record.removedNodes)
);
let divs = document.querySelectorAll("div");
divs.forEach((div) => {
if (
div.style.backgroundColor === "rgb(47, 52, 55)" ||
div.style.backgroundColor === "rgb(63, 68, 71)" ||
div.style.backgroundColor === "rgb(55, 60, 63)" ||
div.style.backgroundColor === "rgb(64, 68, 71)" ||
div.style.background === "white" ||
div.style.backgroundColor === "white" ||
div.style.backgroundColor === "rgb(247, 246, 243)" ||
div.style.backgroundColor === "rgb(251, 250, 249)"
) {
div.style.backgroundColor = color;
}
});
});
}
function changeAllFontsColors(color) {
observeDOM(document.querySelector("body"), (m) => {
let addedNodes = [];
let removedNodes = [];
m.forEach(
(record) =>
record.addedNodes.length & addedNodes.push(...record.addedNodes)
);
m.forEach(
(record) =>
record.removedNodes.length & removedNodes.push(...record.removedNodes)
);
let divs = document.querySelectorAll("div");
divs.forEach((div) => {
div.style.color = color;
});
});
}
function changeIconsColor(color) {
observeDOM(document.querySelector("body"), (m) => {
let addedNodes = [];
let removedNodes = [];
m.forEach(
(record) =>
record.addedNodes.length & addedNodes.push(...record.addedNodes)
);
m.forEach(
(record) =>
record.removedNodes.length & removedNodes.push(...record.removedNodes)
);
let icons = document.querySelectorAll("svg");
icons.forEach((icon) => (icon.style.fill = color));
});
}