-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpopup.js
123 lines (112 loc) · 4.2 KB
/
popup.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
// Initialize button with user's preferred color
let changeColor = document.getElementById("changeColor");
chrome.storage.sync.get("color", ({color}) => {
changeColor.style.backgroundColor = color;
});
// When the button is clicked, inject transFormTimestamps into current page
changeColor.addEventListener("click", async () => {
let [tab] = await chrome.tabs.query({active: true, currentWindow: true});
chrome.scripting.executeScript({
target: {tabId: tab.id},
function: transFormTimestamps,
});
})
var transFormTimestamps = function () {
var getFormattedDate = function (timestamp) {
let intTimestamp = parseInt(timestamp);
// in case of Unix Timestamp in seconds instead of milliseconds
if (intTimestamp <= 9999999999) {
console.warn(intTimestamp);
intTimestamp = intTimestamp * 1000;
}
const date = new Date(intTimestamp);
return date.toLocaleString('de-DE', {
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
year: 'numeric',
month: '2-digit',
day: '2-digit'
});
}
var toolTipCss = '\n' +
'/* Tooltip container */\n' +
'.tooltip {\n' +
' position: relative;\n' +
' display: inline-block;\n' +
' border-bottom: 1px dotted black; /* If you want dots under the hoverable text */\n' +
'}\n' +
'.tooltiptext {\n' +
' font-size: 12px;\n' +
' position: absolute;\n' +
' left: 0;\n' +
' top: 0;\n' +
'}\n' +
'\n' +
'/* Tooltip text */\n' +
'.tooltip .tooltiptext {\n' +
' opacity: 100;\n' +
' visibility: visible;\n' +
' width: 120px;\n' +
' background-color: #555;\n' +
' color: #fff;\n' +
' text-align: center;\n' +
' padding: 5px 0;\n' +
' border-radius: 6px;\n' +
'\n' +
' /* Position the tooltip text */\n' +
' position: absolute;\n' +
' z-index: 1;\n' +
' bottom: 125%;\n' +
' left: 50%;\n' +
' margin-left: -60px;\n' +
'\n' +
' /* Fade in tooltip */\n' +
' transition: opacity 0.3s;\n' +
'}\n' +
'\n' +
'/* Tooltip arrow */\n' +
'.tooltip .tooltiptext::after {\n' +
' content: "";\n' +
' position: absolute;\n' +
' top: 100%;\n' +
' left: 50%;\n' +
' margin-left: -5px;\n' +
' border-width: 5px;\n' +
' border-style: solid;\n' +
' border-color: #555 transparent transparent transparent;\n' +
'}\n' +
'\n' +
'/* Show the tooltip text when you mouse over the tooltip container */\n' +
'.tooltip:hover .tooltiptext {\n' +
' visibility: visible;\n' +
' opacity: 1;\n' +
'}';
const style = document.createElement('style');
style.textContent = toolTipCss;
document.head.append(style);
chrome.storage.sync.get("color", ({color}) => {
document.body.style.backgroundColor = color;
});
const regex = new RegExp('\\d{10,13}')
function textNodesUnder(el) {
var n, a = [], walk = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null, false);
while (n = walk.nextNode()) a.push(n);
return a;
}
const allElementWithKeyword = textNodesUnder(document).filter(
x => x.textContent.match(regex)).map(x => x.parentNode);
const elementStore = [];
for (var i = 0; i < allElementWithKeyword.length; i++) {
const currentElement = allElementWithKeyword[i];
console.warn(elementStore.indexOf(currentElement));
if (elementStore.indexOf(currentElement) === -1) {
const tagContent = currentElement.innerHTML;
const tagText = currentElement.textContent;
const timeStampMatch = tagText.match(regex);
const innerHtml = currentElement.innerHTML.replace(regex, getFormattedDate(timeStampMatch[0]) + ' (' + timeStampMatch[0] + ')');
currentElement.innerHTML = innerHtml;
elementStore.push(currentElement);
}
}
}