브라우저 확장 프로그램 - 메시징
5429 단어 beginnershtmljavascriptwebdev
팝업 스크립트에서 일부 데이터를 백그라운드 작업자에게 보내고 싶을 때가 있습니다. 백그라운드 작업자는 데이터를 사용하여 무언가를 말하고 반환합니다.
어떻게 작동하는지 살펴보겠습니다.
따라하고 싶다면 다음GitHub branch을 시작점으로 삼으십시오.
브라우저 확장 기능 내 메시징
이 기사에서는 팝업 스크립트에서 백그라운드 작업자에게 메시지를 보내려고 합니다.
그러면 백그라운드 작업자가 쿼리를 기반으로 무언가를 처리하고 반환합니다.
먼저 메시지 전송을 위한 이 새 버튼을 포함하도록
src/App.jsx
파일을 수정하려고 합니다.<button onClick={backgroundRequest}>Background request</button>
여기에서 백그라운드 작업자의 응답으로 받은 메시지를 추적하는 상태를 추가할 수도 있습니다.
const [message, setMessage] = useState(null);
그런 다음 이 텍스트에 대한 렌더링 부분을 추가합니다.
{
message && (
<>
<p className='text-white'>{message}</p>
<br />
</>
);
}
이제 이 기능을 추가할 수 있습니다.
const backgroundRequest = () => {
chrome.runtime.sendMessage({ color }, (response) => {
setMessage(response.msg);
});
};
충분히 쉽죠? chrome 런타임을 호출하고
sendMessage
함수를 호출합니다.현재 선택한 색상을 매개 변수로 전달하고 응답으로 메시지를 설정합니다.
다음 단계에서는
background.js
스크립트로 이동하여 이러한 메시지에 대한 수신 측을 생성해야 합니다.chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
if (!request.color) {
sendResponse({ msg: `You didn't set any color` });
}
sendResponse({ msg: `You must really like the color ${request.color}` });
});
여기에서 onMessage 콜백에 리스너를 추가합니다. 먼저 요청에 색상이 포함되어 있는지 확인하려고 합니다. 그렇지 않은 경우 사용자가 색상을 선택하지 않았다고 응답합니다.
색상을 보낸 경우 실제 응답을 보냅니다.
그리고 그게 다야. 이제 팝업 스크립트에서 백그라운드 작업자와 통신할 수 있습니다.
완성된 코드를 보려면 다음GitHub repo을 확인하십시오.
읽어주셔서 감사합니다. 연결해 봅시다!
제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나
Reference
이 문제에 관하여(브라우저 확장 프로그램 - 메시징), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/dailydevtips1/browser-extensions-messaging-ha2텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)