보편적이지 않은 코딩

웹페이지에서 공부한 단어의 수를 세기 (크롬 확장 기능 만들기)

수업소개

웹페이지를 소비하는 입장에서도 웹페이지를 대상으로 여러가지 프로그래밍을 할 수 있는 방법이 많습니다. 최근의 웹브라우저들은 대부분 개발자 도구를 제공합니다. 이것을 이용하면 웹페이지의 소비자도 분석작업을 비롯한 여러가지 일을 할 수 있습니다. 여기서는 이것을 이용해 자신이 쓰기 위한 간단한 프로그램을 만드는 방법을 소개해드립니다. 이렇게 만들어진 개인적 프로그램을 구글 확장 프로그램으로 만들어서 누구나 사용할 수 있는 프로그램으로 승화시키는 방법도 함께 알아봅니다. 

수업의 효과

  • 개인적 코딩의 사례
  • 구글 크롬 확장 기능 만들기
  • 탈웹화 (웹이 아닌 분야에서 웹기술의 활용)

미리보기

수업

google developer console

//이 문서에서 body  태그 아래에 있는 모든 텍스를 가져온다. 그 결과를 bodyText라는 변수에 담는다.
var bodyText = document.querySelector('body').innerText;
//bodyText의 모든 단어를 추출하고, 그 단어의 숫자를 센다. 그 결과를 bodyNum이라는 변수에 담는다.
var bodyNum = bodyText.split(' ').length;
//bodyText에서 자신이 알고 있는 단어(the)가 몇번 등장하는지를 알아본다. 그 결과를 myNum이라는 변수에 담는다.
var myNum = bodyText.match(new RegExp('\\b(the|is|was|of)\\b', 'gi')).length;
myNum+'/'+bodyNum +'('+ (myNum/bodyNum*100)+'%)';

예제

manifest.json

{
  "manifest_version": 2,

  "name": "FrequencyOf",
  "description": "My lovely words",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab"
  ]
}

popup.html

<!doctype html>
<html>
  <head>
    
  </head>
  <body>
    <h1>FrequencyOf</h1>
  </body>
</html>

script.js

//컨텐츠 페이지를 대상으로 코드를 실행해주세요. 
chrome.tabs.executeScript({
  code:'var bodyText = document.querySelector("body").innerText;alert(bodyText);'
});

popup.html 

<!doctype html>
<html>
  <head>
    
    <style>
      body{
        width:400px;
        padding:1rem;
      }
      textarea{
        width:100%;
        font-size:2rem;
      }
      #result{
        font-size:2.5rem;
      }
    </style>
  </head>
  <body>
    <h1>FrequencyOf</h1>
    <textarea id="user" rows="3"></textarea>
    <div id="result"></div>
    <script src="script.js"></script>
  </body>
</html>

script.js 

//컨텐츠 페이지의 #user 입력된 값이 변경 되었을 '때'
document.querySelector('#user').addEventListener('change', function () {
  //컨텐츠 페이지에 몇개의 단어가 등장하는지 계산해주세요. 
  var user = document.querySelector('#user').value;

  //컨텐츠 페이지를 대상으로 코드를 실행해주세요. 
  chrome.tabs.executeScript({
    code: 'document.querySelector("body").innerText'
  }, function (result) {
    // 위의 코드가 실행된 후에 이 함수를 호출해주세요. 그 때 result에 담아주세요. 

    //이 문서에서 body  태그 아래에 있는 모든 텍스를 가져온다. 그 결과를 bodyText라는 변수에 담는다.
    var bodyText = result[0];
    //bodyText의 모든 단어를 추출하고, 그 단어의 숫자를 센다. 그 결과를 bodyNum이라는 변수에 담는다. 
    var bodyNum = bodyText.split(' ').length;
    //bodyText에서 자신이 알고 있는 단어(the)가 몇번 등장하는지를 알아본다. 그 결과를 myNum이라는 변수에 담는다.
    var myNum = bodyText.match(new RegExp('\\b(' + user + ')\\b', 'gi')).length;

    var per = myNum / bodyNum * 100;
    per = per.toFixed(1);
    // id값이 result인 태그에 결과를 추가한다. 
    document.querySelector('#result').innerText = myNum + '/' + bodyNum + '(' + (per) + '%)';


  });

});

manifest.json 

{
  "manifest_version": 2,

  "name": "FrequencyOf",
  "description": "My lovely words",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab",
    "storage"
  ]
}

script.js

function matching(user){
  chrome.tabs.executeScript({
    code: 'document.querySelector("body").innerText'
  }, function (result) {
    // 위의 코드가 실행된 후에 이 함수를 호출해주세요. 그 때 result에 담아주세요. 
    //이 문서에서 body  태그 아래에 있는 모든 텍스를 가져온다. 그 결과를 bodyText라는 변수에 담는다.
    var bodyText = result[0];
    //bodyText의 모든 단어를 추출하고, 그 단어의 숫자를 센다. 그 결과를 bodyNum이라는 변수에 담는다. 
    var bodyNum = bodyText.split(' ').length;
    //bodyText에서 자신이 알고 있는 단어(the)가 몇번 등장하는지를 알아본다. 그 결과를 myNum이라는 변수에 담는다.
    var myNum = bodyText.match(new RegExp('\\b(' + user + ')\\b', 'gi')).length;
    var per = myNum / bodyNum * 100;
    per = per.toFixed(1);
    // id값이 result인 태그에 결과를 추가한다. 
    document.querySelector('#result').innerText = myNum + '/' + bodyNum + '(' + (per) + '%)';
  });
}


//크롬 스토리지에 저장된 값을 가져오세요. 
chrome.storage.sync.get(function (data) {
  // #user의 값으로 data의 값을 입력해주세요. 
  document.querySelector('#user').value = data.userWords;

  //분석해서 그 결과를 #result에 넣어주세요. 
  matching(data.userWords);

});

//컨텐츠 페이지의 #user 입력된 값이 변경 되었을 '때'
document.querySelector('#user').addEventListener('change', function () {
  //컨텐츠 페이지에 몇개의 단어가 등장하는지 계산해주세요. 
  var user = document.querySelector('#user').value;

  // 크롬 스토리지에 입력값을 저장한다. 
  chrome.storage.sync.set({
    userWords: user
  });

  //컨텐츠 페이지를 대상으로 코드를 실행해주세요. 
  matching(user);

});

댓글

댓글 본문
  1. 코딩두
    23.07.29 다음에 들어보기
  2. 호랸
    안녕하세요. 너무 좋은 수업 감사합니다. 아직 자바스크립트에 초보단계라 많이 배우고 있습니다. 이 코드를 사용하여 취미삼아 따라해 봤는데 extension은 크롬에 뜨지만 단어들을 쳐봐도 퍼센트나 결과가 나오지 않는 상황입니다. 문제가 무엇인지 모르겠는데 도데체 뭘까요,,ㅠ
  3. 한수호
    너무 좋은 강의 잘 듣고 갑니다!
  4. loozy5331
    강의 잘 들었습니다!
    이런 개발자를 위한 툴을 만드는 것도 재미있네요!

    저는 강의 내용을 복습할 겸 북마크 랜덤 추출기를 만들어 봤습니다.(매일 링크만 저장하고 안 보는 저를 위해...)
    https://chrome.google.com......=ko

    그리고 코드는 깃허브에 올려놨으니 이용하실 분은 편하게 이용하시면 될 것 같습니다!
    https://github.com......ark
  5. dockidocki
    강좌 감사합니다!
  6. 수풀
    감사합니다.
    정말 유용한 강좌였습니다.
  7. blackway
    오~ 이고잉님의 동영상 끝 부분에 철학에 대한 이야기도 많은 공감이 가는군요.
  8. Barcelona
    강의 들을 수 있게 해주셔서 감사합니다.
    한 단계 한 단계가 고비네요.

    Os 도 관련이 있는 것인지 모르겠네요
    Mac Os 에서 Atom 프로그램을 통해서 따라해보는 중입니다.

    90%까지는 똑같이 따라가다가 마지막이 이유를 알 수 없는 에러들이 납니다.

    egoing 님께서 올려주신 파일로 실행해봐도 단어를 쓰고 탭키를 누르거나 마우스로 다른 곳을 눌러야 계산이 됩니다.
    Mac os와의 연동 문제일까요..

    첫째는 검색어를 쓰고 그 검색창을 마우스로 누르던가 탭키를 눌러서 나와야 계산이 된다는 것.
    둘째는 스토리지에 저장하고 불러오는 기능이 구현되지 않았다는 점.

    이런 오류 문구와 함께
    popup.html:1 Error in response to storage.get: ReferenceError: data is not defined
    at Object.callback (chrome-extension://abelkbaeheoihaaamejlonbjfnhjmjih/script.js:4:41)
    at chrome-extension://......id로 추정되는 영문...../script.js:2:21

    그리고 Popup.Html:1 이라고 떠서 봤더니 <!doctype html> 이 녀석이네요.

    하지만 첫 술에 배부를 수 없고, 첫 수업에 이정도까지 따라가리라고는 생각도 못했는데
    소화하기 힘든 보폭이지만 힘내서 다음 수업도 따라가보겠습니다.

    따라하는 예제라서 반드시 성공하면 좋겠지만 그렇지 않아도 해본다는 것에 의미가 있는것이겠지요?

    추운날 식은 땀이 납니다.

    p.s 이걸 첫 수업으로 삼는 것이 무리인듯 싶은데 입구를 잘못 찾은 것일까요?
    어디로 가야할까요?
  9. tnals
    이고잉님..ㅜㅜ
    위의 동영상 웹페이지에서 공부한 단어의 수를 세기 2,4,8 3개가
    유튜브에서 뱅글뱅글 돌기만하고 동영상 시작을 안하는데요...
    혹시 다시올려주실수는 없으신가요?ㅠㅠ
  10. boxresin
    Brackets 이라는 에디터인 것 같습니다~
    대화보기
    • helloTM
      항상 처음에 어떻게 해야 할지 모를때
      이고잉님의 강의를 보고
      감을 잡고는 하는데 이번에도 그렇네요.
      항상 좋은 강의 너무 감사합니다.
    • 제노
      필요했던 강좌인데 딱 있네요 :) 감사합니다.
    • 조한선닮은이
      넵ㅋㅋ 이고잉님 덕분에 저런것도 만들어보고 항상 감사합니다^^
      이런강의 너무 좋은것 같아요 ㅋㅋ
      많이많이 올려주세요^^ㅎㅎ
      대화보기
      • egoing
        와우 저희 동네 날씨가 따악! 나오네요
        대화보기
        • 조한선닮은이
          안녕하세요 ㅎ
          이고잉님 강의 잘 보고 있습니다^^

          이 강의 다 듣고 하나 만들어보았어요 ㅎㅎ
          네이버 날씨검색을 활용해서 현재 위치의 날씨를 보여주는 아주 간단한 확장프로그램ㅋㅋ
          자랑할곳이없어 여기에 올려봅니다 ㅎㅎ

          https://chrome.google.com......ail
        • illliilllliillliii
          감사합니다 !
        • 곰젤리
          사용하시는 에디터가 sublime 맞나요? chrome에 관련된 것들을 자동완성되게 하려면 어떻게 해야되나요?
        버전 관리
        egoing
        현재 버전
        선택 버전
        graphittie 자세히 보기