[크롬 익스텐션] chrome extension 설치 유무 확인

자신의 크롬익스텐션이 설치되었는지 확인하는 방법 두 가지.

 

1. cookie 를 이용한 방법

 

content-script.js

// 익스텐션 설치 여부 구분자를 쿠키로 생성
if (document.cookie.indexOf('extension_downloaded') === -1){ // 익스텐션 설치안됨
    document.cookie = "extension_downloaded=true";
}

 

익스텐션설치 여부를 구분할 페이지

if (document.cookie.indexOf('extension_downloaded') != -1){
  alert("익스텐션이 설치되었습니다.");
} else {
  alert("익스텐션이 설치되지 않았습니다.");
}

 

 

2. DOM으로 태그삽입을 이용한 방법ㅇ

 

content-script.js

var isInstalled = document.documentElement.getAttribute('chromeextensioninstalled');

if (!isInstalled) {
    document.documentElement.setAttribute('chromeextensioninstalled', true);
}

 

 

익스텐션설치 여부를 구분할 페이지

var isInstalled = document.documentElement.getAttribute('chromeextensioninstalled');

if (isInstalled) {
  alert("익스텐션이 설치되었습니다.");
} else {
  alert("익스텐션이 설치되지 않았습니다.");
}

DOM을 이용한 방법의 단점은, react 같은 SPA 를 사용할 때, 

componentDidMount() 메소드 에 인식 코드를 넣어도 화면 렌더링 직후에 인식이 잘 안된다는 점.

그래서 쿠키로 구분하는 방법을 추천함.