구현했던 크롬 확장 프로그램 추상화 및 기능들 정리

• manifest v2를 기준으로 만든
• 나, 그리고 같은 귀찮은 일을 해야했던 지인과 사용한 간단한 확장 프로그램들
• 추상화 및 구현한 기능 정리

내가 구현한 크롬 확장프로그램의 파일 구조

• /images
  • 필요한 이미지들
• manifest.json
  • 확장 프로그램 정보를 나타내는 json 파일
  • 사용하는 API에 맞춰 permission을 등록해야 제대로 기능한다
• popup: popup.html, popup.js, popup.css
  • 확장 프로그램 실행 시 나오는 화면과 기능에 관련된 파일들
  • 파일 이름을 변경하고 싶다면 manifest도 수정해야 한다
• [background.js]
  • 프로그램 최초 설치 시 storage setting과 event listener 등록을 위해 만들었다.
  • manifest에 등록해야 한다
• [options.js], [options.html]
  • 유저의 입력에 따른 동적 프로그램을 만들기 위해
  • 유저의 입력을 받고 저장하는 화면 및 기능
• [...other.js]
  • 그 밖에 필요한 일부 함수들을 모듈화

확장프로그램 구현 기능 정리

• 프로그램 별 기능
  • 확장프로그램의 버튼을 누르면 task의 subTask를 수행한다.
    • sub task는 브라우저 제어 등이 있다. (클릭 등)
  • 프로그램 1
    • task A 이후 task B를 n회 수행 후, 다시 task A부터 반복한다
      • ABB...B ABB...B ...
      • 프로그램 팝업에 카운터를 구현해 task B를 몇 회 했는지 확인할 수 있도록 만든다.
      • 계속해서 바뀌어야 하며, 브라우저가 종료된 후에도 유지되어야 한다. 간단한 데이터이므로 window의 localStorage 활용
  • 이 외에는
    • 클릭, 새 탭으로 특정 주소 열기, 탭 끄기, input node의 textContent 수정, 복사 및 붙여넣기 등을 수행한다
• 구현한 기능들
  • chrome.storage를 이용해 유저의 input을 저장
  • 유저가 옵션에서 저장한 url을 storage에서 가져온 후 파싱
  • 탭 관련 기능
    • 현재 탭을 새로운 주소로 리다이렉트
    • 특정 주소를 새로운 탭으로 연다
    • 현재 활성화된 탭을 닫는다
  • excuteScript를 이용해 현재 화면을 제어
    • file: 특정 js파일에 작성된 코드를 실행
    • code: 코드 list string을 인자로 넘기면 해당 코드 실행
    • 현재 탭이 아닌 다른 탭에서 js 실행
    • selector로 노드 특정 후
      • 클릭
      • 특정값 입력하기(set)
      • 클립보드에 저장된 값 입력하기
      • textContent 값 가져오기
      • 노드의 값 클립 보드에 저장
      • 브라우저 개발자 콘솔에 출력
  • 이벤트 리스너 등록 및 리스너에 메세지 보내기
  • 랜덤한 값 생성 및 클립보드에 저장
  • 오류나 안내 사항 생기면 토스트 메세지 띄우기
• 확장프로그램의 버튼 하나에 매핑된 최대 이벤트 갯수: 12

정리하면서 느낀 점

• 구현 동기가 간단히 나만 쓰려고 만들기라 그런가
• 정리하며 공부하니 내 확장 프로그램이 파일 구조부터 정석에서 벗어나 있음을 깨달았다.
  • 가령, 나는 popup.js에 브라우저 관련 제어를 구현했는데,
  • 정석대로면 web page의 context와 관련한 코드 구현은 Content scripts에서 해야 한다.
• 다음에 또 다른 확장 프로그램을 제작하게 된다면, 정석적 구조로,
• 이벤트 리스너를 적극적으로 활용해서 만들어보고 싶다.