UI

popup

• popup은 크롬 익스텐션 앱의 아이콘(혹은 favicon)을 클릭하면 나오는 화면이다.
• manifest.json 에서 “action” 프로퍼티에 설정해주어야 사용할 수 있다.
  • popup은 꼭 있어야 하는 것이 아니다. 익스텐션의 기능에 따라 popup을 설정하지 않아도 된다(즉 popup.html 파일을 만들지 않는것).
  • popup을 설정하지 않는다면 파비콘을 클릭했을때 다른 동작을 실행시키도록 설정해주는 것이 가능하다.
• 이 화면은 그냥 popup.html 파일의 내용을 그대로 출력한다. (그냥 브라우저 위에 겹쳐지는 웹 화면을 하나 더 만든다고 생각하면 편하다.)
  • 실제로 얘를 inspect하려면 파비콘을 클릭해서 나오는 popup화면에 우클릭을 해서 inspect를 눌러야 된다. (예를 들어서 popup.js에서 콘솔로그를 한 것을 볼려면 이렇게 해야한다는 뜻이다. 일반 브라우저 콘솔에서는 안보인다.)
• 이 popup.html에는 일반 html 문서와 동일하게 뭐 css파일이나 js파일 다 참조할 수 있다. css로 스타일 지정하고 js로 인터랙션하고 다 된다.

Service Workers(background)

• background.js 의 내용을 확인하려면 아래와 같은 화면에서 service worker를 눌러줘야 된다.
  • 즉 background.js 에서 콘솔로그 찍은 내용은 아래 service worker눌러서 나온 inspect화면에서 확인할 수 있다는 뜻이다.

Content Scripts

• content script는 웹 페이지의 DOM 요소와 상호작용할 수 있는 레이어, 또는 기능이다.
  • 따라서 content-script.js에서 콘솔 로그를 하면 일반 브라우저의 콘솔에 찍힌다.
  • content-script.js 안에서는 익스텐션이 작동하고 있는 기존 웹 페이지의 DOM요소를 document.getElementById(); 등으로 가져올 수도 있고, innerHTML 등으로 내용을 수정할수도 있다.
• manifest.json 에서 “content_scripts” 프로퍼티에 설정해주어야 사용할 수 있고, 설정할때 보통 어떤 url을 가진 페이지에서 작동할지 pattern matching을 해줄 수 있다.