2. qnn24 진행퍼센트 알려주는 크롬 확장프로그램 만들기 - 버그 패치

 저번에 만들었던 qnn 확장 프로그램이 어느 순간 제대로 작동하지 않기 시작했다. 분명 qnn 사이트에서 기사를 보고 있는대도 퍼센트가 올라갔다는 알림이 오지 않았다. 새로고침을 해도 다시 주소를 입력해도 반응이 없었다. f12로 콘솔 로그를 찍어도 아무련 변화가 없었다. 결국 manifest.json의 matches의 인식해야 하는 주소를 더 추가해서 어떻게든 이 프로그램이 qnn사이트를 인식하기를 빌었다.

 

 

일단 관련있는 주소는 모두 넣어보았다.

  그러자 잠깐 인식이 되는가 싶었더니 페이지를 이동하자 다시 제대로 작동하지 못하고 멈춰버렸다. 그러다 알게 된 건데, 인식이 실패한 상태에서 새로고침을 한번 눌러주면 인식이 되는 것이었다. 단순히 페이지 이동하는 것으로는 사이트의 주소가 바뀐 것을 제대로 알지 못하는 것 같았다. 예전에 특정 사이트를 위한 확장 프로그램들을 찾아보니 주의사항에 실행 전 새로고침을 눌러주세요 라는 안내 문구가 적혀 있었다. 이제야 왜 그런 귀찮은 과정이 필요한 것인지 알게 되었다. 이런 수동적인 새로고침을 하고싶지 않다면 app.js에 SetInterval에 현제 페이지 주소를 계속 받아서 특정 주소에서만 작동하도록 만들면 될 것이다. 그러면 아마 브라우저에서는 일정 시간마다 프로그램을 작동시켜야한다는 것 같은데 그건 왠지 자원낭비같고.. 이건 나중에 좀 더 구상해서 업데이트해야겠다.

 

 그리고 저번의 prev와 percent를 비교해서 진행도가 올라가는 것을 인식하는 코드도 js의 getter setter를 이용해서 다시 만들었다. 이게 훨씬 더 깔끔해서 마음에 든다. setter에서 값을 받으면 원래 있던 값과 비교하고 더 큰 값을 받으면 알림을 띄우고 값을 적용한다. 같으면 그냥 적용한다. (값을 무시하면 처음 사이트에 접속할 때 값을 넣지 못한다.)

 

Javascript Getter와 Setter

let data = {    			//사용할 데이터 프로퍼티
  get percent() {    			//getter 접근자 프로퍼티 메서드
    return this._percent;		//원하는 작업 가능
  },

  set percent(value) { 			//setter 접근자 프로퍼티 메서드
    if (parseInt(value) > parseInt(this._percent)) {  //조건을 넣어서 원하는 작업 가능
      this._percent = value;
      chrome.runtime.sendMessage('', {
        type: 'notification',
        options: {
          title: '완료',
          message: value + "%",
          iconUrl: '/logo.png',
          type: 'basic'
        }
      });
      location.reload();
    }
    else{
      this._percent = value;
    }
  }
};

//데이터 프로퍼티 사용법 예시
data.percent = 20;			//set
console.log(data.percent);		//get