コメントが見づらかったので。CSS当てている場所は適当｡
manifest.json
|
1 2 3 4 5 6 7 8 9 10 11 |
{ "manifest_version": 3, "name": "MyCSS", "version": "0.0.1", "content_scripts":[ { "matches": ["https://www.youtube.com/watch?v=*"], "css": ["style.css"] } ] } |
style.css
|
1 2 3 |
* { --ytd-watch-flexy-chat-max-height:830px; } |
この書き方の問題は一度リロードが必要になってしまうこと｡リロードしなくてもCSSが当たるようする｡
|
1 2 3 4 5 6 7 8 |
{ "manifest_version": 3, "name": "BackgroundCSS", "version": "1", "background": {"service_worker": "style.js"}, "permissions": ["tabs","scripting"], "host_permissions": ["https://www.youtube.com/"] } |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
chrome.tabs.onUpdated.addListener(function(tabId, info, tab){ if (info.status === 'complete' && tab.url.indexOf('youtube.com/watch') !== -1) { chrome.scripting.executeScript({ target: {tabId: tab.id}, func: () => { var e = document.createElement('style'); e.textContent = "*{--ytd-watch-flexy-chat-max-height:830px;}"; document.head.insertAdjacentElement('afterbegin', e); } }); } }); |
サイトによっては以下のような書き方でも当たる｡
|
1 2 3 4 5 6 7 8 9 10 11 |
{ "manifest_version": 3, "name": "MyCSS", "version": "1", "content_scripts":[ { "matches": ["https://www.notion.so/*"], "js": ["style.js"] } ] } |
|
1 2 3 4 5 |
window.addEventListener('load', function() { var e = document.createElement('style'); e.textContent = "*{font-family:'Roboto','Meiryo' !important;}"; document.head.insertAdjacentElement('afterbegin', e); }, false); |