-
Notifications
You must be signed in to change notification settings - Fork 0
/
content.js
90 lines (76 loc) · 2.73 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
const createWebVital = (document) => {
const APP_PAGE_URL_REGEX = /^https:\/\/admin\.shopify\.com\/store\/.+\/apps\/.+$/;
let card, vitals, appName;
let previousUrl = document.___location.href;
const formatMetric = (metricName, value) =>
`${metricName}: ${value?.toFixed(2) ?? "?"} ${metricName === "CLS" ? "" : "ms"}`;
const getAppNameFromURL = () => document.___location.href.split("/")[6];
const isAppPage = () => APP_PAGE_URL_REGEX.test(document.___location.href);
const isSameApp = () => appName === getAppNameFromURL();
const showCard = () => {
card.style.opacity = 1;
};
const hideCard = () => {
card.style.opacity = 0;
};
const resetCard = () =>
vitals.forEach((vital) => {
vital.list.innerText = formatMetric(vital.name);
});
const initializeCard = () => {
card = document.createElement("div");
card.style.position = "fixed";
card.style.right = "15px";
card.style.bottom = "15px";
card.style.background = "#fff";
card.style.boxShadow = "0rem 0.125rem 0.25rem rgba(31,33,36,.1), 0rem 0.0625rem 0.375rem rgba(31,33,36,.05)";
card.style.padding = "16px";
card.style.borderRadius = "0.5rem";
const ul = document.createElement("ul");
ul.style.margin = 0;
ul.style.padding = 0;
ul.style.listStyleType = "none";
vitals = ["LCP", "FID", "CLS"].map((name) => {
const list = document.createElement("li");
list.style.color = "#1f2124";
list.innerText = formatMetric(name);
ul.appendChild(list);
return { name, list };
});
card.appendChild(ul);
document.body.appendChild(card);
appName = getAppNameFromURL();
isAppPage() ? showCard() : hideCard();
};
const observeChanges = () => {
if (previousUrl === document.___location.href) return;
previousUrl = document.___location.href;
if (!isAppPage()) {
resetCard();
hideCard();
return;
}
if (isSameApp()) return;
appName = getAppNameFromURL();
resetCard();
showCard();
};
const handleWebVitalsMessage = (event) => {
const webVitalTypes = [
"APP::WEB_VITALS::LARGEST_CONTENTFUL_PAINT",
"APP::WEB_VITALS::FIRST_INPUT_DELAY",
"APP::WEB_VITALS::CUMULATIVE_LAYOUT_SHIFT",
];
if (!webVitalTypes.includes(event.data.payload?.type)) return;
const { metricName, value } = event.data.payload.payload;
vitals.find(({ name }) => name === metricName).list.innerText = formatMetric(metricName, value);
};
return { initializeCard, observeChanges, handleWebVitalsMessage };
};
const vital = createWebVital(document);
vital.initializeCard();
new MutationObserver(vital.observeChanges).observe(document.body, {
childList: true,
subtree: true,
});
window.addEventListener("message", vital.handleWebVitalsMessage);