chrome extension를 통해서 특정 사이트에 강제적으로 css를 적용하는 방법이다.
예를 들어 https://naver.com를 접속하면 배경색을 노란색으로 바꿔보자.
배경색 뿐만 아니라 다른 css 적용도 가능하다. 여기서는 간단한 예제로 사용법만 알려주는 것이 목적이므로 배경색만 바꾼다.
chrome extension에서 특정 사이트에 css를 적용하는 방법은 다양하게 있는데 어떻게 적용할 지 알아보자.
1. manifest.json에서 정적으로 적용
특정 사이트에 설정파일로 적용하는 방법이다. manifest.json 파일에 적용할 css(css)와 사이트(matches)를 지정하면 된다.
{
"manifest_version": 3,
"background": {
"service_worker": "extension/background.js"
},
...
"content_scripts": [
{
"matches": [
"https://www.naver.com/*"
],
"run_at": "document_idle",
"css": [
"static/css/main.css"
]
}
]
}css 파일 내용은 background:yellow !import로 지정했다.
[main.css]
body {
background: yellow !important;
}위 처럼 적용할(matches) 사이트에 특정 파일(css)을 지정해 놓으면 css가 적용이 된다.
그리고 확장 프로그램 새로고침을 하고 http://naver.com를 접속해보자. 배경색이 노란색으로 바뀐것을 확인할 수 있다.
2. background에서 동적으로 적용
두 번째 방법은 background를 통해 동적으로 지정하는 방법이다. manifest로 지정하지 않고 특정 메시지를 전송하여 background에서 동적으로 css를 적용한다.
content-script에서 onload 이벤트 발생 시 background.js로 메시지 전송을 한다. 그리고 background.js에서 chrome.scripting.insertCss를 통해 background에 특정 css를 적용한다.
우선 manifest.json에 아래와 같이 정의한다.
[manifest.json]
{
"manifest_version": 3,
"name": "Extension Demo",
"version": "0.1.0",
"description": "Extension Demo",
"background": {
"service_worker": "extension/background.js"
},
"permissions": [
"scripting"
],
"host_permissions": [
"https://www.naver.com/*"
],
"content_scripts": [
{
"matches": [
"https://www.naver.com/*"
],
"run_at": "document_idle",
"js": [
"extension/contentScript.js"
]
}
]
}permissions에 scripting이 필요하다. 그리고 host_permissions에 대상 사이트(https://www.naver.com/*) 추가가 필요하다.
그리고 contentScript.js에서 onload 시 메시지를 background로 전송한다.
[contentScript.js]
window.onload = async () => {
chrome.runtime.sendMessage(
{
type: "inject-css",
},
() => {},
);
};[background.js]
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
if (request.type === "inject-css") {
injectCss();
}
return true;
});
async function getCurrentTab() {
let queryOptions = { active: true, lastFocusedWindow: true };
let [tab] = await chrome.tabs.query(queryOptions);
return tab;
}
async function injectCss() {
const tab = await getCurrentTab();
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
chrome.scripting.insertCSS({
files: ["static/css/main.css"],
target: { tabId: tab.id },
});
});
}background.js에서 메시지를 받으면 활성화 되어 있는 탭에 chrome.scripting.insertCSS를 통해 특정 css를 적용한다.
그리고 확장 프로그램 새로고침을 하고 http://naver.com를 접속해보자. 배경색이 노란색으로 바뀐것을 확인할 수 있다.
3. contentscript에서 적용하는 방법
contentScript에서 web_accessible_resources를 통해서 style을 적용하는 방법이다.
우선 manifest.json에 아래 내용을 추가한다.
{
"manifest_version": 3,
"name": "Extension Demo",
"version": "0.1.0",
"description": "Extension Demo",
"background": {
"service_worker": "extension/background.js"
},
"content_scripts": [
{
"matches": [
"https://www.naver.com/*"
],
"run_at": "document_idle",
"js": [
"extension/contentScript.js"
]
}
],
"web_accessible_resources": [{
"resources": ["static/css/main.css"],
"matches": ["https://www.naver.com/*"]
}]
}manifest.json에 web_accessible_resources에 적용할 css를 추가한다. 그리고 matches에 사이트(https://www.naver.com/*) 추가한다.
그리고 contentScript.js에 css 파일을 로딩한다.
[contentScript.js]
const css = document.createElement("link");
css.setAttribute("rel", "stylesheet");
css.setAttribute("href", chrome.runtime.getURL("static/css/main.css"));
document.body.appendChild(css);그리고 확장 프로그램 새로고침을 하고 http://naver.com를 접속해보자. 배경색이 노란색으로 바뀐것을 확인할 수 있다.
