외부활동 참여 기록/공개 SW 개발자 대회

[Javascript] Chrome extension 메시지 통신

시데브 2024. 8. 8. 18:27

1. popup.html

<body>
  <button id="extract">Extract Text</button>
  <pre id="output"></pre>
  <script src="popup.js"></script>
</body>

-> 위와 같이 "extract" id를 가진 버튼 html 상에 생성

 

2. popup.js

document.getElementById('extract').addEventListener('click', () => {

...

});

-> popup.js에서 getElementById() method로 해당 버튼을 클릭했을 때 반응할 수 있도록함

 

3. server.js

function sendTextToServer(textData) {
  fetch('http://localhost:3000/api/submit', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ textData: textData })
  })
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log('Success:', data);
  })
  .catch((error) => {
    console.error('Error:', error);
  });
}

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  console.log('Message received:', request);
  if (request.action === 'extractText') {
    const textData = extractTextWithXPath();
    sendTextToServer(textData);
    sendResponse({ textData: textData });
  } else {
    console.error('Unknown action:', request.action);
  }
});

-> popup에서 전송한 메시지를 addListener를 통해 받을 수 있다.

-> addListener에서는 받은 request에서 필요한 데이터를 다시 서버에 전달

 

참고자료

 

chrome extension 메시지 통신 방법

chrome extension 개발 시 popup, contentScript, background 간에 메시지를 전송하는 일이 많다. 매번 작업할 때마다 찾아보기 귀찮아서 정리를 하게 되었다. 1. popup --> contentScript 메시지 전송 popup에 버튼을 하

rudaks.tistory.com

 

728x90
반응형