To inject CSS into a webpage, utilize chrome.tabs.insertCSS with the option cssOrigin: 'user'
within the background script's URL change event.
For instance, you can use chrome.webNavigation.onCommitted (which requires the webNavigation
permission) or chrome.tabs.onUpdated (which does not require any special permissions).
Make sure to include the target sites where CSS injection is allowed in the permissions
section.
Example manifest.json:
{
"manifest_version": 2,
"name": "User Style Sheet Workaround",
"version": "1",
"background": {
"scripts": ["bg.js"]
},
"permissions": ["<all_urls>"]
}
bg.js:
chrome.tabs.onUpdated.addListener((tabId, info) => {
if (info.status === 'loading') {
chrome.tabs.insertCSS(tabId, {
file: 'style.css',
cssOrigin: 'user',
runAt: 'document_start',
// allFrames: true,
// matchAboutBlank: true,
}, () => chrome.runtime.lastError); // ignoring errors
}
});