(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
improve performance of annotation fetching and add DOM mutation observer
+25
-2
+25
-2
extension/src/entrypoints/content.ts
+25
-2
extension/src/entrypoints/content.ts
···
724
724
CSS.highlights.clear();
725
725
}
726
726
activeItems = [];
727
+
cachedMatcher = null;
727
728
sendMessage('updateBadge', { count: 0 });
728
729
if (overlayEnabled) {
729
-
fetchAnnotations();
730
+
setTimeout(() => fetchAnnotations(), 300);
730
731
}
731
732
}
732
733
···
745
746
checkUrlChange();
746
747
};
747
748
748
-
setInterval(checkUrlChange, 1000);
749
+
setInterval(checkUrlChange, 500);
750
+
751
+
let domChangeTimeout: ReturnType<typeof setTimeout> | null = null;
752
+
const observer = new MutationObserver((mutations) => {
753
+
const hasSignificantChange = mutations.some(
754
+
(m) => m.type === 'childList' && (m.addedNodes.length > 3 || m.removedNodes.length > 3)
755
+
);
756
+
if (hasSignificantChange && overlayEnabled && activeItems.length === 0) {
757
+
if (domChangeTimeout) clearTimeout(domChangeTimeout);
758
+
domChangeTimeout = setTimeout(() => {
759
+
cachedMatcher = null;
760
+
fetchAnnotations();
761
+
}, 500);
762
+
}
763
+
});
764
+
observer.observe(document.body || document.documentElement, {
765
+
childList: true,
766
+
subtree: true,
767
+
});
768
+
769
+
ctx.onInvalidated(() => {
770
+
observer.disconnect();
771
+
});
749
772
750
773
window.addEventListener('load', () => {
751
774
setTimeout(() => fetchAnnotations(), 500);