fix : pagination 될 때마다 리스트 가져옴

#4

src/content/index.ts

@@ -1,33 +1,60 @@
 console.info('pop-filterbubble-client content script');
-const root = document.documentElement;
-let originLength = 0;
-setInterval(() => {
-  const videoList = root.querySelectorAll('#text > a');
-  const linkToArr = Array.from(videoList);
-  let updateLength = 0;
-  if (originLength === 0) {
-    //만약 아예 받아온 데이터가 없으면!
-    updateLength = getChannelIdList(linkToArr);
-  } else if (linkToArr.length > originLength) {
-    //새로운 값이 들어올 때
-    linkToArr.splice(0, originLength); //중복되는 값은 제거
-    updateLength = getChannelIdList(linkToArr);
+
+interface VideoData {
+  channelId: string;
+}
+let videoLength = 0;
+function extractVideoData(): void {
+  const videoList = document.querySelectorAll<HTMLDivElement>('#contents ytd-rich-item-renderer');
+  const videoDataList: VideoData[] = [];
+
+  for (const video of videoList) {
+    const channelElement = video.querySelector<HTMLDivElement>(
+      '#channel-name #text-container a',
+    ) as any;
+    const channelId = channelElement
+      ? new URL(channelElement.href).href.split('/').reverse()[0]
+      : '';
+    if(channelId == '') continue;
+    videoDataList.push({
+      channelId,
+    });
   }
-  originLength += updateLength;
-}, 5000);
-
-function getChannelIdList(linkToArr: Array<Element>): number {
-  const newVideoList = linkToArr.map((a, idx) => {
-    if (a instanceof HTMLAnchorElement) {
-      const href = a.href;
-      const channelId = href.split('/').reverse()[0];
-      return channelId;
+
+  const arr = videoDataList.slice(videoLength);
+  console.log(arr);
+  videoLength = videoDataList.length;
+
+
+}
+
+function observeScrollEnd(): void {
+  const targetNode = document.querySelector<HTMLElement>(
+    '#page-manager ytd-rich-grid-renderer #contents',
+  ) as any;
+  const config = { childList: true, subtree: true };
+
+  if (!targetNode) {
+    console.log('retry');
+    setTimeout(() => observeScrollEnd(), 1000);
+    return;
+  }
+  extractVideoData();
+  let scrollTimeout: ReturnType<typeof setTimeout>;
+
+  const observer = new MutationObserver((mutationsList) => {
+    for (const mutation of mutationsList) {
+      if (mutation.type !== 'childList' || mutation.target.nodeName != 'YTD-RICH-GRID-ROW') {
+        continue;
+      }
+      clearTimeout(scrollTimeout);
+      scrollTimeout = setTimeout(() => {
+        extractVideoData();
+      }, 1000);
     }
   });
-  let updateLength = newVideoList.length;
-  console.log(newVideoList);
-  //여기서 서버에 전송하는 코드넣으면 될 듯?
-  return updateLength;
+
+  observer.observe(targetNode, config);
 }
 
-export {};
+observeScrollEnd();

src/popup/Popup.tsx

@@ -7,11 +7,10 @@ function App() {
 
   return (
     <main>
-      <h3 className="text-blue-500 py-2 font-semibold rounded-lg bg-green-500">Popup Page!</h3>
       <PieChartComponent />
       <VideoList />
     </main>
   );
 }
 
-export default App;
+export default App;