chrome extension
-
background.js 에서 third-party libaray 사용하기(in Manifest V3)chrome extension 2023. 2. 25. 21:27
Manifest V3 에서는 background.js 파일 하나만 지정 가능하다. https://developer.chrome.com/docs/extensions/mv3/mv3-migration/#man-sw 에서 module 사용을 가이드하고 있다. 그러나 importScripts 를 사용하는 방법도 있다. 아래 chrome extension sample 을 대상으로 테스트 해 보자 https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/tutorial.getting-started dep.js 생성 background.js 에서 사용할 color 변수가 저장되어 있음 const color = '#3aa7..
-
새탭을 만든 후 동적 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 파일 search.js 파일 document.addEventListener("DOMContentLoaded", function () { let url = new URL(window.location.href); let query = new URLSearchParams(url.search).get("query"); le..
-
CORS 우회 하기chrome extension 2022. 12. 12. 23:14
iframe 으로 구글이나 네이버 검색결과를 보여주려고 하면 CORS 에러가 난다. Response Header 의 x-frame-options 를 변경해 무력화(?) 할 수 있다. Manifest V3 manifest.json { "declarative_net_request": { "rule_resources": [ { "id": "ruleset_1", "enabled": true, "path": "rules.json" } ] }, "permissions": [ "declarativeNetRequest" ], "host_permissions": [ "*://*.google.com/*", "*://*.naver.com/*" ], "manifest_version": 3 } 참고: https://develo..
-
content script 에서 iframe 안의 내용을 접근하기chrome extension 2022. 12. 12. 23:10
iframe 안의 contents 에 접근하기 위해서는 아래처럼 all_frames 를 manifest.json 파일에 설정해 줘야 한다. { "content_scripts": [ { "matches": [ "http://my.site.com/*" ], "css": [ "css/active-tab.css", "css/bootstrap.min.css" ], "js": [ "scripts/common.js", ], "all_frames": true } ] } 참고: https://stackoverflow.com/a/39901725