feat: leetcode 업로드 개선 필요 (feat. Chrome extension)

[dusunax]

leetcode 업로드 개선점

상황

• 9월 3일부터 leetcode에서 Daily Question 풀이를 진행 중
• 9월 3일부터 leethub를 통해 dusunax/algorithm 레포에 업로드 하고 있음
  
  

이슈 내용

• 기존 프로그래머스 문제 풀이 업로드를 자동화(백준 허브 사용)한 algorithm 레포지토리에 leethub 익스텐션을 적용하였으나, 폴더 구조 없이 레포지토리에 바로 업로드 형태로 commit 되기 때문에, 365일 후에는 문제풀이 폴더 365개가 메인 루트에 존재하게 된다.
  => 10일차가 되니 해당 이슈가 확연히 보입니다.
• 다른 폴더를 보기 힘들고, 기존 폴더 구조와 다르기 때문에, /leetcode 폴더 내에 업로드 되었으면 함

방법 찾기

• [leethub repo] leetcode를 로컬에서 clone 후, 크롬 익스텐션에서 개발자 모드로 load하여 사용하는 방법 확인 중
• 현재 Manifest version error 확인 중!
  

[dusunax]

버전

• 기존 v1.1.2
  • https://github.com/QasimWani/LeetHub
  • 로컬 clone 후 load 시, Manifest 버전 에러
• v2로 확인!
  • https://github.com/arunbhardwaj/LeetHub-2.0
  • 기존 버전의 manifest.json을 수정하는 것보다, v2를 사용하는 것이 좋을 것이라 생각하여 v2로 변경

코드 수정

• scripts/leetcode.js 내 3군데

// 기존
const URL = `https://api.github.com/repos/${hook}/contents/${problem}/${filename}`;
// 변경 (LeetCode 경로를 추가)
const URL = `https://api.github.com/repos/${hook}/contents/LeetCode/${problem}/${filename}`;

• 코드 기여할 수 있는 방법?
  • authorization할 때 repo이름 뒤에 /dirname 입력 ex) algorithm/LeetCode
  • 받은 값 /가 있으면 split해서 result[1]의 dirname을 저장
  • 그리고 인수 추가... 정도로 구현되는지? => 알아보기

업데이트

• 구글 익스텐션

chrome://extensions

• 개발자 모드에서 다음 버튼으로 로컬 repo 경로 선택
  
• 새로 추가한 익스텐션으로 다시 authorization 진행
• 변경 사항이 있다면, 업데이트 클릭

오류 수정

오류A. button null

• 버튼이 null값
  • null: dom element가 없을 때 반환됨
  1. setTimeout 5000밀리초로 변경 => 해결x
  2. selector 확인 => v2의 버튼 셀렉터와 같은 점 확인
     
  3. 삼항연산이 의심스러으므로 둘 다 listen 진행

  const v1SubmitBtn = document.querySelector('[data-cy="submit-code-btn"]');
  const v2SubmitBtn = document.querySelector('[data-e2e-locator="console-submit-button"]');
  const submitBtn = !isLeetCodeV2 ? v1SubmitBtn : v2SubmitBtn;
  
  v1SubmitBtn !== null && v1SubmitBtn.addEventListener('click', loader);
  v2SubmitBtn !== null && v2SubmitBtn.addEventListener('click', loader);

• 확인 결과: run 버튼을 클릭하고 있었습니다.🥲 sumbit 버튼 클릭 시 해당 오류 없음

오류B. invalidated 에러인 경우

• 익스텐션의 오류가 아님
  • 간단히 말해, 새로 푼 문제가 아니거나, 문제가 통과되지 않은 경우입니다^^
• 문제 통과의 기준:
  • 사용자: leetcode의 submission 탭을 참고하기
  • 익스텐션: Tag에 해당하는 셀렉터에서 'Success' 또는 'Accepted' 텍스트를 찾음
    

  // check success state for a normal problem
  if (
    checkElem(successTag) &&
    successTag[0].className === 'success__3Ai7' &&
    successTag[0].innerText.trim() === 'Success'
  ) {
    console.log(successTag[0]);
    successTag[0].classList.add('marked_as_success');
    return true;
  }
  // check success state for a explore section problem
  else if (
    resultState &&
    resultState.className === 'text-success' &&
    resultState.innerText === 'Accepted'
  ) {
    resultState.classList.add('marked_as_success');
    return true;
  }

[dusunax]

적용 완료! 🎉

• 이미 올라간 폴더를 어떻게 적용할 지 잠시 고민 중입니다.
  1. 데일리 문제풀이 기록을 위해 남겨두기
  2. 통일성을 위해 지우고, 다시 업로드