[VB.NET] 차근차근 크롬 브라우저 만들기 - 4. 자바스크립트 실행

이번 강좌에서는 내가 만든 크롬 브라우저에 로딩한 페이지에 있는 자바스크립트를 실행해보자. 말이 좀 어렵고, 기능 구현도 새로운 개념이 들어가서 쉽지는 않지만 이걸 알아내야 내 브라우저에 띄운 페이지에서 원하는 작업이 가능하니 차근차근 한번 해보자.

먼저 돌아가는 원리를 간단히 적어보면 페이지 소스를 분석해서 원하는 기능을 구현하는 자바스크립트 생성후 페이지에 삽입후 실행시키면 된다. 이번 강좌에서는 티스토리 메인 페이지 우상단에 있는 "시작하기" 버튼을 누르는 기능을 구현해보자.

자바스크립트의 기본 개념은 알고 있어야 이해가 가능하지만 사실 그리 길지는 않으니 아래 내용을 차근차근 따라해보자.

툴바에 이름 ButtonStart, 텍스트 &Start로 버튼을 하나 추가한다. 그리고 이 버튼 클릭이벤트를 아래와 같이 작성하자. 그앞에 Separator도 하나 추가해서 나름 기본버튼이랑 분리해봤다.

크롬에서 요소검사를 해보면 "시작하기" 버튼을 감싸고 있는 a tag의 class name이 btn_tistory btn_log_info 이니 페이지의 모든 a tag를 루프돌면서 class name이 btn_tistory btn_log_info인 항목을 찾아서 클릭해주면 된다. 아래 소스를 확인해보자.

Private Sub ButtonStart_Click(sender As Object, e As EventArgs) Handles ButtonStart.Click
    Dim script = "var atag = document.getElementsByTagName('a');"
    script &= "for (var i = 0; i < atag.length; i++)"
    script &= "{"
    script &= "  if (atag.item(i).className == 'btn_tistory btn_log_info')"
    script &= "  {"
    script &= "     atag.item(i).click();"
    script &= "     break;"
    script &= "  }"
    script &= "};"
    BrowserMain.ExecuteScriptAsync(script)
End Sub

실행후 아래 화면처럼 로그인 화면으로 넘어가면 성공

자바스크립트로 시작하기 버튼을 클릭한 결과화면

소스는 페이지에 삽입할 자바스크립트 코드를 생성한 후 삽입해주면 된다.

BrowserMain.ExecuteScriptAsync(script)

브라우저 내부 페이지에 자바스크립트를 삽입하는 함수이다. 이 함수를 알게되는 순간부터 페이지내 모든 자바스크립트를 사용할 수 있으니 페이지에 뭔가 기능을 구현하고 싶으면 이제 자바스크립트 공부를 해야 한다. 하지만, 어차피 브라우저내 특정 작업을 위한 스크립트정도의 이해도만 있으면 웬간히 원하는 기능은 구현이 가능하니 위 자바스크립트를 간략히 설명해보자.

var atag = document.getElementsByTagName('a');

페이지내에 있는 모든 a tag 항목을 atag라는 배열에 넣는다. 그 다음줄부터 살펴보면 모든 a tag를 루프돌며 className이 원하는 클래스명일 경우 해당 a tag를 클릭하고 for loop을 빠져나오는 간략한 자바스크립트이다. 원하는 웬만한 기능은 이정도 루프만 있으면 구현할 수 있다. 버튼클릭등의 기능은 이것만 알아도 된다.

여기까지는 자바스크립트를 실행하는 기능을 구현해봤다. 그런데, 어떤때는 자바스크립트의 값을 가져와야 되는 경우가 생긴다. 즉, 내 브라우저와 웹페이지와의 통신(?)을 통해 페이지내 내가 원하는 값을 프로젝트로 가져와야 할 경우가 생긴다.

다음번 강좌에서는 이에 대해 알아보도록 하자.