Chrome Extension

ddiyoung 2021. 8. 15. 22:30

안녕하세요! 이번에 Chrome Extension을 하나 개발하게 됐습니다. 크롬 확장프로그램을 개발하면서 여러가지 삽질 했던 것들을 적어 놓으려고 합니다. 대략 2달동안의 개발이였는데, 삽질도 많이 하고 JS로 개발도 처음 해보다 보니 코드들도 깨끗하지 않았습니다... 나중에 시간이 된다면 리팩토링 해보고 싶네요..! 암튼 시작해보겠습니다.

1. 개요

내앞에 놓인 문제점

전 COVID-19로 비대면 수업을 하게된 쓸쓸한 20학번입니다,,,,,,,

저희 학교는 BlackBoard 라는 LMS 사이트를 사용하고 있습니다. 해당 LMS 서비스를 사용하면서 너무 큰 불편함이 있었습니다.

바로 매주 출석을 확인하려면 과목별로 하나하나 들어가야 했던 것입니다.

holly....... 진짜 너무 불편하네요....

매일매일 성실하게 출석을 했는지 확인하라는 학교의 의도일까요......

해결방안

이런 귀찮음의 문제를 직면한 저는 생각을 했습니다. 💇‍♂️

1. URL 분석부터 해보자

https://blackboard.sejong.ac.kr/ultra/courses/_65176_1/cl/outline

해당 URL은 여러 과목중 한 과목에 들어갔을 때 입니다.

그 다음 우리는 온라인 출석 조회를 눌러야 합니다. 온라인 출석 조회를 누를 시 URL은 변하지 않고 페이지만 변하게 됩니다. 즉, <iframe> 상태의 느낌으로 메뉴 UI 같은 경우는 그대로, 안의 내용 부분만 새로 렌더링 되는 것입니다.

그렇다면 새롭게 렌더링 되는 페이지도 분명하게 URL이 있을 태니 개발자 도구를 사용해서 정확한 온라인 출석 조회의 URL을 얻어봅시다.

https://blackboard.sejong.ac.kr/webapps/bbgs-OnlineAttendance-BB5cf774ff89eaf/app/atdView?custom_course_id=202110209005008913001&custom_user_id=20011656&course_id=_65176_1

해당 URL에 GET 파라미터로 custom_course_id, custom_ser_id, course_id 이 3가지의 파라미터를 넘기면 출석 정보를 얻을 수 있다는 것을 알게 됐습니다.

하지만 여기서 문제점이 발생했습니다. 바로 아래 사진과 같이 출석해야할 영상들이 많아 페이지가 넘어가게 될 경우입니다.

이런 경우 "모두 표시" 버튼을 누르게 되면 모든 영상의 출석을 확인할 수 있습니다.

해당 페이지의 URL은 아래와 같습니다

https://blackboard.sejong.ac.kr/webapps/bbgs-OnlineAttendance-BB5cf774ff89eaf/app/atdView?sortDir=ASCENDING&showAll=true&editPaging=false&course_id=_65178_1&custom_course_id=202110209005008914001&custom_user_id=20011656&startIndex=0

이 URL의 경우는 많은 파라미터를 요청하고 있습니다. 하나씩 지워가면서 어떤 파라미터의 값이 유의미한지에 대해서 분석을 해본 결과

showAll, custom_course_id, custom_user_id 이 3가지의 파라미터였습니다.

ShowAll의 경우는 true를, custom_course_id는 과목의 고유 번호를, custom_user_id는 user의 id를 입력해줘야 합니다.

custom_user_id의 경우는 사실 빈값만 아니면 정상적으로 데이터를 얻을 수 있다는 것을 확인했습니다.

$.get(`https://blackboard.sejong.ac.kr/webapps/bbgs-OnlineAttendance-BB5cf774ff89eaf/app/atdView?custom_user_id=1234&showAll=true&custom_course_id=${course_id}`,

따라서 위와 같이 과목별로 get 요청을 하면 출석데이터를 얻을 수 있습니다.

2. 과목별 course_id는 어떻게 얻을건데?

처음 생각한 방식은 사용자 화면에서 받아오는 방법을 생각했습니다.

이런식으로 사용자의 화면에 course_id값이 찍혀 있었으며 이것을 파싱해오면 될 것이라고 코드를 짜려고 했습니다.

여기서 문제점이 발생합니다. 바로 과목별 카드가 렌더링 되는 시점이 사용자가 해당 카드를 봤을 때 라는 것입니다.

즉 첫 화면에서 모든 과목이 보이지 않으면 아래 보이지 않은 과목들은 렌더링 되어 있지 않아서 파싱할 수 없습니다.

하지만 분명 서버에서 데이터를 넘겨줬을테고, 그 데이터를 받아와서 사용자가 파싱에 어렵도록 만든 것이라고 생각을 하고 API들을 조금 찾아봤습니다.

좋습니다. 여기서 과목들의 course_id값을 갖고와서 get 요청하고 데이터 정제해서 뿌려주면 될 거 같습니다.

3. GET 요청하고, 돔 그려줘야 하는데 이런것들 어떻게 해결할건데?

GET요청도 해줘야하고 잘 정제한 데이터들도 돔에 이쁘게 그려줘야합니다. 그러기 위해서는 JS를 작동시켜야 하는데 해당 JS들을 어떻게 인젝션 시켜주고 실행시켜줄지에 대한 문제가 있습니다.

해당 문제를 저는 크롬 확장프로그램(Chrome Extension)을 이용해서 해결하기로 했습니다.

크롬 확장프로그램의 경우 사용자가 머물고 있는 페이지에 JS를 인젝션 시켜서 여러 부가적인 기능들을 수행할 수 있도록 도와줍니다.

저에게 필요한 기능이 딱 여기에 알맞게 있어서 사용하게 됐습니다.