조각난 코드를 재건축해보자! (익스텐션 마무리 + 서버에서 자연어처리하기)

↑ 지금까지 구현해놓은 내 익스텐션 상태 ㅎㅎ

↑ 프로젝트 중인 내 상태 ㅎㅎ

Javascript 개미지옥에서 몇날몇일을 허우적 허우적 댔다.
이제 조각조각 구현했던 코드들을 하나로 잘 통합해보자!

프로토타입 만들기

머릿속에서 자꾸 기능의 방향이 헷갈리면서 코드 짜다보면 길을 잃게 되는 경우가 많다.

내가 지금까지 만든 기능들

지금까지는 기능별로 따로 익스텐션을 만들었다.

• 익스텐션 누르면 ON / OFF 배지
  

• 활성화된 탭에서 머무르는 시간 카운팅
  

• 탭 목록 보여주는 팝업창
  

• 나의 최초 키워드를 해당 페이지 body의 innerText 의 띄어쓰기 기준으로 split 한 단어 집합 중에서 몇 개가 match 되는지 -> 퍼센트로 표현.
  

• 익스텐션을 클릭하면 보고있는 페이지에 DOM 삽입하기.

• 익스텐션을 클릭하면 'www.google.com' 으로 이동하며 ON 배지가 되고 현재 페이지에 DOM 삽입.
  

이걸 잘 조합해보면

내가 결국 원하는 이런 이미지로 구상되지 않을까?

코드를 짜보자.

1. 익스텐션을 누르면 기능이 시작된다. 배지는 'ON'이 되고, 집중 키워드 검색 페이지로 이동한다.
   이때, manifest.json 에 action 에서 popup.html 이 존재하면, 배지에 대한 액션은 service-worker에서 제어할 수가 없다.

(생략..)

그래서 한것들.

1. 배지 ON -OFF 에 따라서 서비스 시작 여부
2. input keyword 와 body text 긁어오기
3. 화면에 이모티콘 띄우기
4. 방문한 탭 노드화 시키기.
5. 서버에 텍스트 데이터 넘겨서 확인하기

아직 안된 것.

1. 추출한 텍스트 데이터를 서버에 넘겨서 형태소 분석 및 word2vec 하는 것.
2. 컴퓨터를 껐다 켜도 ON 상태로 남아있음을 확인.... (storage 재설정이 필요하다..ㅠㅠ)
3. 전처리 과정 파이프라인 만들기
   이 외에도 너~무 많다!