[Chrome Extension 크롬 확장프로그램] Background Script 사용하기와 메세지 전달 실습 (2)

지난 게시물

https://pokpung-ganji.tistory.com/entry/Chrome-Extension-%ED%81%AC%EB%A1%AC-%ED%99%95%EC%9E%A5%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8-Background-Script-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0%EC%99%80-%EB%A9%94%EC%84%B8%EC%A7%80-%EC%A0%84%EB%8B%AC-%EC%8B%A4%EC%8A%B5-1

[Chrome Extension 크롬 확장프로그램] Background Script 사용하기와 메세지 전달 실습 (1)

---

복습

Content Script

웹페이지(확장 프로그램이 실행된) 내에서 동작하며, DOM에 접근할 수 있는 스크립트

Background Script

확장 프로그램 전체에서 공통으로 동작하는 스크립트

항상 (혹은 이벤트 발생시) 실행되고, 브라우저 전체를 대상으로 API를 사용할 수 있음

탭이나 네트워크 요청을 제어

Popup Script

브라우저 오른쪽 상단에 아이콘을 클릭해 열리는 팝업 창 안에서 동작하는 스크립트

팝업이 닫히면 언마운트됨

---

 

지난 게시물에서 문제가 생겼었다!

내가 만들려던 간단한 프로그램은 아래와 같다.

1. content.js에서 웹페이지의 title을 가져온다.
2. content.js에서 background.js에 title을 전달한다.
3. background.js에서 popup.js에 title을 전달한다.
4. popup.js에서 title을 띄운다.

순조롭게 진행되는 줄 알았으나...!!!

popup.js는 팝업이 열려있는 동안에만 실행이 되는 프로그램이어서, 3번에서 막힘!

 

해결 방법은 생각보다 더 간단했다!

기존 코드의 작동 방식은 background가 popup에 요청을 보내고, 그 과정에서 popup이 title 데이터를 받는 방식 (PUSH 방식) 이었다.

여기서 그냥 바로 반대로 생각해서, popup이 background에게 요청을 보내 데이터를 받아가는 방식 (PULL 방식)으로 바꾸면 됐다.

 

아래는 문제가 해결된 수정된 코드들이다.

---

background.js

// Content Script로부터 메세지를 받음
chrome.runtime.onMessage.addListener((message,sender,sendResponse)=>{

  if (message.type == "saveTitle"){ // Content Script로부터 온 요청이라면
    pageTitle = message.title;
    sendResponse({status:'제목 저장 완료'});
    return true;
  }
  else if (message.type=="getTitle"){ // Popup Script로부터 온 요청이라면
    sendResponse({title:pageTitle});
    return true;
  }

});

content.js

// 웹 페이지의 제목을 가져옴
const pageTitle = document.title;

console.log('웹페이지 제목',pageTitle);

// Background Script로 메세지 전송
chrome.runtime.sendMessage({ type:"saveTitle", title:pageTitle },(response)=>{
  console.log('백그라운드로부터의 응답: ', response);
});

 

popup.js

window.onload = () =>{ // 팝업창이 열렸을 때만 실행하라는 뜻

  chrome.runtime.sendMessage({type:"getTitle"},(response)=>{
    console.log("Background로부터 받은 제목 : ",response.title);
    document.getElementById("title").textContent = response.title || '제목 없음';
  });
}

 

---

🔥 해결 방법

☝️ push 방식에서 pull 방식으로 변경

✌️ 변경하기 위해 Content Script와 Popup을 구분할 수 있게 하는 type을 설정

 

생각보다 너무 허무하게 해결할 수 있어서 아직도 나는 웹개발에 관해서 정말 무지하고 아는게 없다는 것을 깨달았다...

고등학교 수업시간에 조금씩 배운 것들은 전부 까먹고, 따로 공부도 안하다 보니 당연한 결과 같다

이번에 chrome extension을 사용하면서 기초들에 대해서도 다시 훑어보면서 진행할 필요가 있는 것 같다!