-
새탭을 만든 후 동적 HTML 로 내용 채우기chrome extension 2022. 12. 12. 23:27
새탭을 만들고 보통 URL 을 입력해, URL 전송 내용으로 보통 채운다.
그러나 나만의 dynamic content 로 채울 수도 있다.
전체 구조
- 새탭을 만들면서 URL 을 search.html?query=abc 와 같은 형태로 호출한다.
- search.js 에서는 URL 을 분석해 query 정보를 얻어내어 search.html 의 iframe src 값을 변경한다.
search.html 파일
<html> <head> <script src="shap_sbs_search.js"></script> <style>...</style> ... </head> <body> <div class="container"> <div class="column column-left"> <iframe id="left" src="#" sandbox="allow-scripts allow-popups allow-forms" style="width: 100%; height: 100vh"> </iframe> </div> <div class="column column-right"> <iframe id="right" src="#" sandbox="allow-scripts allow-popups allow-forms" style="width: 100%; height: 100vh"> </iframe> </div> </div> </body> </html>search.js 파일
document.addEventListener("DOMContentLoaded", function () { let url = new URL(window.location.href); let query = new URLSearchParams(url.search).get("query"); let urlEncodedQuery = encodeURIComponent(query); const left = document.getElementById("left"); left.setAttribute("src", "https://search.naver.com/search.naver?query=" + urlEncodedQuery) const right = document.getElementById("right"); right.setAttribute("src", "https://www.google.com/search?q=" + urlEncodedQuery) });background.js 파일 (scalajs 버전)
새 탭을 만들면서 URL 을 /search.html?query=abc 로 지정한다.
object TabUtil { def createNewTab(query: String): Future[Tab] = { val encodedQuery = js.URIUtils.encodeURIComponent(query) val tabProp = TabCreateProperties(active = true, url = s"/search.html?query=$encodedQuery") chrome.tabs.Tabs.create(tabProp) } } chrome.runtime.Runtime.onMessage.listen { message => message.value.foreach { any => val bgRequest: BgRequest = BgRequest.decode(any.asInstanceOf[String]) val tabFuture: Future[Tab] = TabUtil.createNewTab(bgRequest.query) val bgResponse: Future[String] = tabFuture.map { tab => BgResponse(tab.id.get, tab.index, tab.url.get).encode() } message.response(bgResponse, "failed") } }'chrome extension' 카테고리의 다른 글
background.js 에서 third-party libaray 사용하기(in Manifest V3) (0) 2023.02.25 CORS 우회 하기 (0) 2022.12.12 content script 에서 iframe 안의 내용을 접근하기 (0) 2022.12.12