[리디저널 제작기] 4. 더보기 버튼을 자동으로 눌러주는 기능 구현

안녕하세요. 박기린 입니다.
본 글은 [ 리디북스의 독서노트 글귀를 복사하는 크롬 확장프로그램 :  RIDI-Journals ]의 제작 과정을 적어놓은 글입니다.

 

리디 독서노트 페이지의 더보기 버튼

리디 독서노트 페이지를 들어가면 형광펜(밑줄)을 친 글귀들이 보입니다. 근데 글귀의 수가 20개를 넘어가게 되면, 사진의 '20개 더보기'버튼이 생깁니다. 다음 20개의 글귀는 위 버튼을 눌러야만 볼 수 있고, 일일이 다 눌러줘야 모든 글귀를 확인할 수 있는 구조입니다.

 

크롬 확장프로그램은 탭의 현재 DOM에 올라온 텍스트만 긁어올 수 있기 때문에, '20개 더보기' 버튼을 전부 누른 후에 글귀를 긁어와야만 모든 글귀를 긁어올 수 있습니다. 만약 버튼을 누르지 않으면, 당장 보이는 몇 개의 글귀만 긁어와집니다.

 

이제부터 이 문제를 해결하기 위해 '자동으로 20개 더보기 버튼'을 눌러주는 기능을 구현할 것입니다.

 

 

 

 

---

파일 생성하기

content scripts 파일을 추가해서, 스크립트를 현재 탭에 밀어넣는 방식으로 기능을 구현할 것입니다.

 

 

pressButton.js라는 스크립트 파일을 생성합니다.

 

 

pressButton.js가 build 폴더에 포함될 수 있도록, webpack 설정파일에 pressButton.js의 경로를 추가합니다.

 

 

 

 

---

Chrome API로 메시지 전달하기

// Popup.tsx
  const clickButtonHandler = async () => {
    await chrome.runtime.sendMessage({ action: "PRESS_REQUEST" });

    chrome.runtime.onMessage.addListener(function (request, sender) {
      if (request.action == "PRESS_FINISHED") {
        setIsFinished(true);
      }
    });
  };

Popup에 버튼을 하나 추가한 후, 이 버튼을 누르면 리디 독서노트의 더보기 버튼을 누르라고 Chrome API로 메시지를 보내는 핸들러 함수를 만듭니다.

 

clickButtonHandler()는 PRESS_REQUEST라는 메시지를 API로 보낸 다음, 실행이 끝나면 PRESS_FINISHED라는 메시지를 받습니다.

 

 

 

 

chrome.runtime.onMessage.addListener(async function (request, sender) {
  if (request.action == "PRESS_REQUEST") {
    let [activeTab] = await chrome.tabs.query({
      active: true,
      currentWindow: true,
    });

    chrome.scripting.executeScript({
      target: { tabId: activeTab.id },
      files: ["pressButton.js"],
    });
  }
});

PRESS_REQUEST 메시지는 background.js로 가서, chrome.scripting.executeScripting()을 이용해서 현재 user가 보고 있는 탭에 pressButton.js를 밀어넣습니다.

 

 

 

 

---

pressButton.js

// pressButton.js
const pressButton = () => {
  let nullCount = 0;

  let interval = setInterval(() => {
    !document.querySelector(".css-pft3kl") && nullCount++;

    if (nullCount > 2) {
      clearInterval(interval);
      chrome.runtime.sendMessage({
        action: "PRESS_FINISHED",
      });
    }

    document.querySelector(".css-pft3kl").click();
  }, 3000);
};

pressButton();

setInterval()을 이용해서 3초 간격으로 리디 독서노트 페이지의 '20개 더보기 버튼'을 누릅니다.

 

 

'20개 더보기 버튼'의 class를 확인한 후 querySelector().click()으로 버튼을 클릭합니다.

 

nullCount라는 변수를 생성해서, 현재 페이지의 DOM에 '20개 더보기 버튼'이 있는지를 확인하고, 만약 없으면 nullCount를 +1 합니다.

3초 간격으로 버튼의 유무를 확인해서 3번이나 페이지에 보이지 않으면 실행을 종료하고, PRESS_FINISHED 메시지를 보냅니다.

 

 

 

 

실제로 리디 독서노트 페이지에서 실행하고 난 후 콘솔창의 모습입니다.

'20개 더보기 버튼'이 3번의 실행동안 보이지 않아서 실행이 종료된 모습입니다.

 

 

 

 

---

실행 확인 문구 띄우기

더보기 버튼이 모두 눌러졌으면, 실행이 완료되었다는 문구를 사용자에게 알려주고자 합니다.

 

// Popup.tsx
  const clickButtonHandler = async () => {
    await chrome.runtime.sendMessage({ action: "PRESS_REQUEST" });

    chrome.runtime.onMessage.addListener(function (request, sender) {
      if (request.action == "PRESS_FINISHED") {
        setIsFinished(true);
      }
    });
  };

Popup.tsx로 돌아와서, PRESS_FINISHED 메시지를 받으면 isFinished state를 true로 만듭니다.

 

 

 

// Popup.tsx
      {isFinshed && <MoreText>더보기 버튼이 전부 눌러졌습니다.</MoreText>}

그리고 isFinished가 true가 되면, 확인 문구가 뜨도록 합니다.

 

 

 

 

(좌) '더보기 누르기' 버튼 누르기 전 / (우) '더보기 누르기' 버튼 누른 후