[크롬 익스텐션 개발기] - 이벤트관련 문제

문제

크롬 익스텐션 앱을 개발하는 도중 발생한 문제이다.

앱의 익스텐션 로고를 클릭했을 때, 앱이 꺼지고 켜져야하는 과정에서 이벤트 리스너를 부착하고 있다.

summarizeZip.js

  if (isWrapperExisted($summarizeZipWrapper)) {
    closeWidget();
    // console.dir(document.body);
    document.body.removeEventListener('mouseover', log, true);

    // document.body.onmouseover = null;
  } else {
    getWidget();

    // click시 이벤트
    document.querySelector('.closeButton').addEventListener('click', () => {
      closeWidget();
    });

    // document.body.onmouseover = log;
    document.body.addEventListener('mouseover', log);
    console.log('event');

    console.dir(document.body);
  }

이 과정에서 addEventListener와 removeEventListner 를 이용하여 이벤트를 크롬 익스텐션이 비활성화 되었을 때, 제거하려고 하였지만 동작이 제대로 되지 않았다.

원인 분석

이 과정에서 익스텐션을 누르고 다시 누르면 이 summarizeZip.js의 코드가 다시 실행된다는 것을 발견하였는데 이와 관련한 문제라고 추측된다.

즉 코드 재실행으로 익스텐션이 켜진 상태에서 끄려고 눌렀을 때

document.body.removeEventListener('mouseover', log, true);

이것이 정상적으로 작동되어야 하지만 코드가 재실행되므로 다른 document.body를 가리키고 있다고 생각되어 addEventListener가 어디에 저장되는지 알아보고 싶어졌다.

addEventListener의 등록 위치?

따라서 아래의 stackoverflow를 살펴보았는데, 방법으로 getEventListeners 혹은 prototype을 변경시키는 방법으로 찾을 수 있다고 하여 해보았지만 웹이아닌 익스텐션 자체의 코드에서 실행되다 보니까 정상적으로 원인 분석이 되지 않았다..

https://stackoverflow.com/questions/13156096/where-is-an-event-registered-with-addeventlistener-stored

https://stackoverflow.com/questions/446892/how-to-find-event-listeners-on-a-dom-node-in-javascript-or-in-debugging

해결방법

addEventListener가 아닌 이벤트 프로퍼티에다 등록하는 방식으로 앱이 켜질때는 이벤트를 달아주고 앱이 꺼질때는 이벤트 프로퍼티에 null값을 주는 방식으로 해결