[mini project] Drag typing (chromeExtension, getSelection(), Hangul.js)

 

 

타이핑 연습을 하다가 시작한 미니 프로젝트입니다.

 

얼마 전 새로운 키보드가 생겼습니다. 맥북 에어 키보드에 적응되어있는 손가락이 갈 길을 찾지 못하고 엉뚱한 곳으로 가서 타이핑 연습을 해야 했습니다. 연습하던 중 지금 보고 있는 페이지의 단어들을 타이핑하면 재미있겠다는 생각과 틈틈이 연습하고 싶은 마음이 들어서 프로젝트를 시작했습니다. 타이핑 연습을 하는데 굳이 연습하는 페이지를 찾아 들어가야 한다는 불편함과 그 페이지에서 제공하는 단어가 적어서 같은 단어를 반복해서 타이핑하는 지루함이 있었습니다. 그래서 직접 원하는 문장을 드래그하여 타이핑 연습할 수 있는 크롬 확장 프로그램을 만들어야겠다는 생각이 든 겁니다. 

 

만들기 위한 준비

1. 구글 크롬 확장 프로그램을 만드는 방법

2. 페이지에서 드래그하여 선택된 텍스트를 가져오는 방법

 

 

구글 크롬 확장 프로그램을 만드는 방법

생활코딩 [크롬 확장 기능 만들기]

 

크롬 확장 프로그램은 보통의 웹페이지를 구성하는 방식과 비슷합니다. 하지만 다른점이 있습니다. 현재 페이지에서 '확장'된 페이지라는 점입니다. 그렇기 때문에 현재 페이지의 데이터를 가져오기 위한 메서드가 필요합니다.

chrome.tabs.executeScript({
  // 현재 페이지에서 실행될 코드
  code: 'document.querySelector("body").innerText'
}, function (result) {
  // 위의 코드가 실행된 후 호출되는 함수
  // 실행된 코드의 결과값은 result
})


// 팝업된 확장 프로그램의 화면에서 실행될 코드
document.querySelector("body").innerText

 

chrome.tabs.executeScript의 첫 번째 인자로 현재 페이지에서 실행할 코드를 보내고, 두 번째 인자의 콜백을 통해 결과값을 가져올 수 있습니다. 이 메서드 밖에서 작성되는 코드는 모두 팝업된 확장 프로그램의 화면을 대상으로 실행되니 구별이 필요합니다.

 

그리고 이번 프로젝트에서 사용하지 않았지만 크롬 스토리지에 값을 저장할 수 있다고 합니다. 

// 크롬 스토리지에 입력값을 저장
chrome.storage.sync.set({
  userData: {
    name: 'steven'
  }
});

// 크롬 스토리지에 저장된 값을 가져옴
chrome.storage.sync.get(function (data) {
  console.log(data.userData)   // {name: 'steven'}
});

 

 

 

페이지에서 드래그하여 선택된 텍스트를 가져오는 방법

mdn [Selection.getRangeAt()]

// 드래그하여 선택한 텍스트를 문자열로 받습니다.
window.getSelection().toString()

window.getSelection()을 호출하면 Selection 객체를 반환합니다. 이 객체를 문자열로 사용하여 선택한 텍스트를 문자열로 받고 싶다면 toString()을 호출하여 문자열로 받으면 됩니다. 

 

이 코드는 팝업 페이지가 아닌 현재 페이지에서 실행되어야하는 코드이므로 다음과 같이 코드가 작성되었습니다.

chrome.tabs.executeScript({
  code: 'window.getSelection().toString()'
}, function (result) {
  // 현재 페이지에서 선택한 텍스트를 출력합니다.
  console.log(result)    
})

 

 

Hangul.js

이외에 한글에 대한 라이브러리도 사용하였습니다. 영문은 입력하는 문자를 이전의 문자열에 더하며 음절을 만들 수 있지만, 한글은 입력되는 문자를 결합해야 합니다. 이 문제를 해결한 라이브러리가 있었습니다. 초성, 중성, 종성으로 이루어진 배열을 결합하여 음절로 만들거나 음절을 분해하기도 합니다. 만약에 영문이 중간이 있더라도 상관없이 한글만 결합되어 출력됩니다. 

 

// 한글을 자음/모음으로 분해
Hangul.disassemble('가나다'); // ['ㄱ','ㅏ','ㄴ','ㅏ','ㄷ','ㅏ'];

// 자음/모음 배열을 받아서 결합
Hangul.assemble(['ㄱ','ㅏ','ㄴ','ㅏ','ㄷ','ㅏ']); // '가나다'

 

 

 

 

Mini project repo

#1 DragTyping