에지확장프로그램에서 사용자가 특정탭의 content제어 스크립트로 메시지를 전송하고 응답하는 방법을 알아보도록 하겠습니다. 프로그램 구조는
- Popup (팝업):쪽에서 "메시지 전송"버튼을 클릭하면 특정 메시지를 content제어 스크립트로 전송합니다.
- Content Script (콘텐트 스크립트): 팝업쪽에서 전송한 메시지를 받아 처리하고 수신에 대한 응답을 전송합니다.
예제코드 : tistory_openapi/edgeGpt3 at master · a3040/tistory_openapi (github.com)
아래의 그림은 예제코드 실행 후 popup과 content쪽 두곳의 개발도구를 열어둔 상태입니다.
이미지의 번호 내용은
1번은 팝업창쪽 개발도구 창입니다.
2번은 탭쪽에 삽입된 content.js에서 보여지는 개발도구 창입니다. 현재 둘다 로딩완료 로그가 보입니다.
3번 "메시지전송" 버튼을 클릭하면 현재 열린탭에 메시지를 전송합니다.
윗쪽 대기 상태 이미지에서 "메시지전송" 버튼을 클릭해서 메시지를 전송하고 응답을 받은 결과 이미지 입니다. 페이지의 파란색 부분은 content.js로 직접 탭안의 DOM을 제어해서 UI작성을 할수 있다는 예시용입니다.
이미지의 번호 내용은
1 "메시지전송" 버튼을 클릭
2 예제코드에 있는 버튼 클릭에 대한 로깅 정보입니다.
3 메시지 전송 전에 대상이 전송 대상이 되는 탭을 발견 후 메시지 입니다.
4 content쪽 수신 로그입니다.
5.content쪽에서 수신후 보낸 응답 처리 로그 메시지 입니다.
주요 사용 함수는
- chrome.tabs.query: Chrome 창 또는 탭을 쿼리하여 일치하는 탭 정보를 반환합니다.
- chrome.tabs.sendMessage: 탭으로 메시지를 보냅니다.
- chrome.runtime.onMessage: 이벤트를 통해 메시지를 수신하는데 사용됩니다.
chrome.tabs 관련 함수는 popup쪽에서 브라우저 탭을 확인 하고 특정탭에 메시지를 보내기 위해 사용됩니다.
- 이 대화하기에서는 chatGPT가 열려있는 현재 탭을 선택하기 때문에 현재 창의 탭정보를 얻는 아래의 방법을 사용합니다.
- chrome.tabs.query({ active: true, currentWindow: true })
chrome.runtime.onMessage는 content쪽에서 메시지를 수신하기 위해 사용됩니다.
예제 코드 설명입니다.
- 설정파일 : manifest.json 특이사항없습니다.
popup.html : 메시지버튼 추가하고 약간 크기 조절했습니다.
<html>
<meta charset="utf-8" />
<body style="width:200px;">
hello
<button type="button" id="sendMsg" style="width:50px">메시지전송</button>
<script src="./scripts/popup.js"></script>
</body>
</html>popup.js : send_to_content 함수는 위에서 설명한것과 같이 chrome.tabs.query를 통해 현재 활성화된 열린 창의 탭을 조회하고 반환합니다. 탭이 조회되면 callback을통해 조회된 tabs를 전달받고 chrome.tabs.sendMessage( tabId: number, message: any, ..) 를 통해 tab으로 메시지를 전송합니다.
그 아래 코드는 popup.html의 sendMsg버튼에 클릭 이벤트를 추가하는 부분입니다. 클릭시 send_to_content함수를 통해 메시지를 전달합니다.
console.log(`팝업 js 불림, 폴더구조확인용 scripts/popup.js`);
function send_to_content(msg) {
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
console.log("현재탭에 붙어있는 content에 msg보냄");
const response = chrome.tabs.sendMessage(
tabs[0].id,
{
from: 'popup',
to: 'content',
msg: msg,
// topics: extactTopics
},
function (response) {
console.log(response);
// window.close();
}
);
})
}
const sendMsg = document.getElementById("sendMsg");
if (sendMsg) {
sendMsg.onclick = function () {
console.log("clicked");
send_to_content(`전송하기`);
};
}content.js :
스크립트가 로드될때 chrome.runtime.onMessage에 이벤트 처리 함수를 추가 합니다. 그리고 탭주소가 https://chat.openai.com/*인 경우 페이지 가장 하단에 높이가 100인 div를 삽입합니다. 예제에서는 사용자와 대화창 위치를 popup.html에 넣을 예정이지만 content.js에 대화창을 두게될 경우 예시입니다.
console.log(`js 불림, 폴더구조확인용 content.js`);
chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
if (message.from === 'popup') {
try {
console.log('메시지 수신1:', message);
sendResponse('메시지를 수신했습니다.');
}catch(error){
console.error(error);
}
}
});
function insertDiv(){
var div = document.createElement("div");
div.style.height = "100px";
div.style.backgroundColor = "blue";
var body = document.body;
var lastChild = body.lastElementChild;
// body 요소의 맨 마지막에 div 요소를 추가합니다.
body.insertBefore(div, lastChild.nextSibling);
}
insertDiv();이번글에서는 브라우저와 특정 페이지의 contents에 메시지를 전송하고 처리하는 예제를 보았습니다. 다음에는 jquery를 추가해서 content, popup쪽에서 사용하는 방법과 popup에서 작성되어 온 메시지를 기존 gpt 대화창에 입력하는 부분을 진행해 보도록 하겠습니다.
참고
https://developer.chrome.com/docs/extensions/reference/tabs/
chrome.tabs - Chrome Developers
Build the next generation of web experiences.
developer.chrome.com
https://developer.chrome.com/docs/extensions/reference/runtime/#event-onMessage
chrome.runtime - Chrome Developers
Build the next generation of web experiences.
developer.chrome.com
'사용해보기 > 브라우저에서 chatGPT Custom 대화창만들기' 카테고리의 다른 글
| 4. 에지브라우저, chatGPT Custom 대화창 추가 (0) | 2023.05.24 |
|---|---|
| 2.에지확장프로그램 구조 및 디버그 로그 보기 (0) | 2023.05.23 |
| 1. chatGPT Custom을 위한 에지확장프로그램 소개 및 기본 구조 (0) | 2023.05.23 |