페이지와 브라우저 확장 간의 간단한 통신
소개
이는 공용 브라우저 확장에 적합한 패턴이 아닙니다. 그러나 이 방법으로도 충분할 경우가 많습니다. 예를 들어 일부 내부 디버거 도구 또는 redux dev 도구와 유사한 것입니다.
요구 사항
manifest.json에서:
{
"action": {
"default_popup": "index.html"
},
"permissions": ["tabs", "activeTab", "scripting"],
"manifest_version": 3
}
준비하다
수신된 데이터를 어딘가에 표시하기 위한 팝업이 있어야 하고 활성 탭에 스크립트를 삽입할 수 있는 권한이 있어야 합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="index.css" rel="stylesheet">
<title>Internal Dev Tools</title>
</head>
<body>
<div id="root"></div>
<script src="index.js"></script>
</body>
</html>
// popups index.js
chrome.tabs.query(
{ currentWindow: true, active: true },
([tab]) => {
chrome.scripting.executeScript(
{
target: { tabId: tab.id },
args: [42],
func: function (arg) {
// executed in the page
return arg
},
},
([{ result }]) => {
// executed in the extension
console.log('received data: ', result); // 42
}
);
}
);
이 스크립트에서 확장 프로그램은 하나의 인수 "42"를 사용하여 활성 페이지 탭에서 실행 중입니다func. 그것으로부터의 반환은 두 번째 인수 콜백에서 포착됩니다.
페이지에서 데이터 보내기
이제 페이지에서 데이터를 전달해야 합니다.
// page
const stateReport = generateDataToSendIntoExtension();
const message = { type: 'DEV_TOOLS_REPORT_MESSAGE_TYPE', payload: stateReport };
window.postMessage(message);
최신 상태로 유지하는 가장 쉬운 방법은 setInterval로 래핑하는 것입니다.
// page
setInterval(() => {
// postMessage
}, 1_000)
확장에서 데이터 가져오기
window.postMessage(에서 데이터를 받으려면 window.addEventListener('message', callback);를 사용해야 합니다. 불행히도 콜백은 비동기식으로 호출되므로 이전 부분에서 간단한 반환이 작동하지 않으므로 Promise 로 래핑해야 합니다. 또한 페이지는 1초마다 window.postMessage(를 호출하므로 확장 프로그램에서도 setInterval를 사용해야 합니다.
// popups index.js
const intervalTimeout = setInterval(() => {
chrome.tabs.query(
{ currentWindow: true, active: true },
([tab]: [{ id: number }]) => {
// @ts-expect-error
chrome.scripting.executeScript(
{
target: { tabId: tab.id },
args: ['DEV_TOOLS_REPORT_MESSAGE_TYPE'],
func: function (messageType) {
return new Promise((resolve) => {
const callback = ({ data }) => {
window.removeEventListener("message", callback);
if (data?.type === messageType) {
resolve(data.payload);
}
};
window.addEventListener("message", callback);
});
},
},
([{ result }]) => {
setState(result);
}
);
}
);
}, 1_000);
setInterval를 사용하고 있기 때문에 그의 콜백이 호출된 후 수신기 제거에 대해 기억해야 합니다. 또한 다른 창 메시지와의 충돌을 피하기 위해 if 문을 추가하여 다른 메시지를 필터링해야 합니다. 마지막으로 확장 프로그램의 popup.html에 페이지의 데이터를 표시하는 것입니다. 제 경우에는 팝업에 간단한 반응 애플리케이션이 포함되어 있으므로 페이지의 데이터로 호출setState만 하면 됩니다.
요약
확실히 이것은 프로덕션 솔루션이 아닙니다. 너무 많은 권한, 약한 반응성 및 잠재적인 데이터 유출이 있습니다. 그러나 내부 목적(예: 개발 도구)에서는 작동합니다.
Reference
이 문제에 관하여(페이지와 브라우저 확장 간의 간단한 통신), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/przemyslawjanbeigert/simple-communication-between-page-and-browser-extension-1knf
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
manifest.json에서:{
"action": {
"default_popup": "index.html"
},
"permissions": ["tabs", "activeTab", "scripting"],
"manifest_version": 3
}
준비하다
수신된 데이터를 어딘가에 표시하기 위한 팝업이 있어야 하고 활성 탭에 스크립트를 삽입할 수 있는 권한이 있어야 합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="index.css" rel="stylesheet">
<title>Internal Dev Tools</title>
</head>
<body>
<div id="root"></div>
<script src="index.js"></script>
</body>
</html>
// popups index.js
chrome.tabs.query(
{ currentWindow: true, active: true },
([tab]) => {
chrome.scripting.executeScript(
{
target: { tabId: tab.id },
args: [42],
func: function (arg) {
// executed in the page
return arg
},
},
([{ result }]) => {
// executed in the extension
console.log('received data: ', result); // 42
}
);
}
);
이 스크립트에서 확장 프로그램은 하나의 인수 "42"를 사용하여 활성 페이지 탭에서 실행 중입니다func. 그것으로부터의 반환은 두 번째 인수 콜백에서 포착됩니다.
페이지에서 데이터 보내기
이제 페이지에서 데이터를 전달해야 합니다.
// page
const stateReport = generateDataToSendIntoExtension();
const message = { type: 'DEV_TOOLS_REPORT_MESSAGE_TYPE', payload: stateReport };
window.postMessage(message);
최신 상태로 유지하는 가장 쉬운 방법은 setInterval로 래핑하는 것입니다.
// page
setInterval(() => {
// postMessage
}, 1_000)
확장에서 데이터 가져오기
window.postMessage(에서 데이터를 받으려면 window.addEventListener('message', callback);를 사용해야 합니다. 불행히도 콜백은 비동기식으로 호출되므로 이전 부분에서 간단한 반환이 작동하지 않으므로 Promise 로 래핑해야 합니다. 또한 페이지는 1초마다 window.postMessage(를 호출하므로 확장 프로그램에서도 setInterval를 사용해야 합니다.
// popups index.js
const intervalTimeout = setInterval(() => {
chrome.tabs.query(
{ currentWindow: true, active: true },
([tab]: [{ id: number }]) => {
// @ts-expect-error
chrome.scripting.executeScript(
{
target: { tabId: tab.id },
args: ['DEV_TOOLS_REPORT_MESSAGE_TYPE'],
func: function (messageType) {
return new Promise((resolve) => {
const callback = ({ data }) => {
window.removeEventListener("message", callback);
if (data?.type === messageType) {
resolve(data.payload);
}
};
window.addEventListener("message", callback);
});
},
},
([{ result }]) => {
setState(result);
}
);
}
);
}, 1_000);
setInterval를 사용하고 있기 때문에 그의 콜백이 호출된 후 수신기 제거에 대해 기억해야 합니다. 또한 다른 창 메시지와의 충돌을 피하기 위해 if 문을 추가하여 다른 메시지를 필터링해야 합니다. 마지막으로 확장 프로그램의 popup.html에 페이지의 데이터를 표시하는 것입니다. 제 경우에는 팝업에 간단한 반응 애플리케이션이 포함되어 있으므로 페이지의 데이터로 호출setState만 하면 됩니다.
요약
확실히 이것은 프로덕션 솔루션이 아닙니다. 너무 많은 권한, 약한 반응성 및 잠재적인 데이터 유출이 있습니다. 그러나 내부 목적(예: 개발 도구)에서는 작동합니다.
Reference
이 문제에 관하여(페이지와 브라우저 확장 간의 간단한 통신), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/przemyslawjanbeigert/simple-communication-between-page-and-browser-extension-1knf
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="index.css" rel="stylesheet">
<title>Internal Dev Tools</title>
</head>
<body>
<div id="root"></div>
<script src="index.js"></script>
</body>
</html>
// popups index.js
chrome.tabs.query(
{ currentWindow: true, active: true },
([tab]) => {
chrome.scripting.executeScript(
{
target: { tabId: tab.id },
args: [42],
func: function (arg) {
// executed in the page
return arg
},
},
([{ result }]) => {
// executed in the extension
console.log('received data: ', result); // 42
}
);
}
);
이제 페이지에서 데이터를 전달해야 합니다.
// page
const stateReport = generateDataToSendIntoExtension();
const message = { type: 'DEV_TOOLS_REPORT_MESSAGE_TYPE', payload: stateReport };
window.postMessage(message);
최신 상태로 유지하는 가장 쉬운 방법은 setInterval로 래핑하는 것입니다.
// page
setInterval(() => {
// postMessage
}, 1_000)
확장에서 데이터 가져오기
window.postMessage(에서 데이터를 받으려면 window.addEventListener('message', callback);를 사용해야 합니다. 불행히도 콜백은 비동기식으로 호출되므로 이전 부분에서 간단한 반환이 작동하지 않으므로 Promise 로 래핑해야 합니다. 또한 페이지는 1초마다 window.postMessage(를 호출하므로 확장 프로그램에서도 setInterval를 사용해야 합니다.
// popups index.js
const intervalTimeout = setInterval(() => {
chrome.tabs.query(
{ currentWindow: true, active: true },
([tab]: [{ id: number }]) => {
// @ts-expect-error
chrome.scripting.executeScript(
{
target: { tabId: tab.id },
args: ['DEV_TOOLS_REPORT_MESSAGE_TYPE'],
func: function (messageType) {
return new Promise((resolve) => {
const callback = ({ data }) => {
window.removeEventListener("message", callback);
if (data?.type === messageType) {
resolve(data.payload);
}
};
window.addEventListener("message", callback);
});
},
},
([{ result }]) => {
setState(result);
}
);
}
);
}, 1_000);
setInterval를 사용하고 있기 때문에 그의 콜백이 호출된 후 수신기 제거에 대해 기억해야 합니다. 또한 다른 창 메시지와의 충돌을 피하기 위해 if 문을 추가하여 다른 메시지를 필터링해야 합니다. 마지막으로 확장 프로그램의 popup.html에 페이지의 데이터를 표시하는 것입니다. 제 경우에는 팝업에 간단한 반응 애플리케이션이 포함되어 있으므로 페이지의 데이터로 호출setState만 하면 됩니다.
요약
확실히 이것은 프로덕션 솔루션이 아닙니다. 너무 많은 권한, 약한 반응성 및 잠재적인 데이터 유출이 있습니다. 그러나 내부 목적(예: 개발 도구)에서는 작동합니다.
Reference
이 문제에 관하여(페이지와 브라우저 확장 간의 간단한 통신), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/przemyslawjanbeigert/simple-communication-between-page-and-browser-extension-1knf
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
// popups index.js
const intervalTimeout = setInterval(() => {
chrome.tabs.query(
{ currentWindow: true, active: true },
([tab]: [{ id: number }]) => {
// @ts-expect-error
chrome.scripting.executeScript(
{
target: { tabId: tab.id },
args: ['DEV_TOOLS_REPORT_MESSAGE_TYPE'],
func: function (messageType) {
return new Promise((resolve) => {
const callback = ({ data }) => {
window.removeEventListener("message", callback);
if (data?.type === messageType) {
resolve(data.payload);
}
};
window.addEventListener("message", callback);
});
},
},
([{ result }]) => {
setState(result);
}
);
}
);
}, 1_000);
확실히 이것은 프로덕션 솔루션이 아닙니다. 너무 많은 권한, 약한 반응성 및 잠재적인 데이터 유출이 있습니다. 그러나 내부 목적(예: 개발 도구)에서는 작동합니다.
Reference
이 문제에 관하여(페이지와 브라우저 확장 간의 간단한 통신), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/przemyslawjanbeigert/simple-communication-between-page-and-browser-extension-1knf텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
