As a newcomer to creating Chrome (or other browser) extensions, I am working on developing one that applies custom CSS rules to specific page elements. Overall, it seems to be functioning as intended, but with some minor issues.
One issue I have encountered is a delay between the complete rendering of the page in the browser and when my extension's CSS rules take effect after applying them using JavaScript.
To address this delay, I have discovered that adding the desired CSS file to the manifest file under "content_scripts" can provide instant application, like so:
"content_scripts": [
{
"run_at": "document_start",
"all_frames": true,
"matches": ["<all_urls>"],
"js": ["filter.js"],
"css": ["filter.css"]
}
],
However, I now face the challenge of determining if the user has clicked the 'enable' button on my extension's pop-up before applying the CSS. To achieve this, I check for the enabled flag set to true in the "filter.js" and background scripts using chrome storage.
I then utilize the "chrome.tabs.insertCSS" method to insert my CSS files accordingly.
In cases where the user disables the extension, the browser still displays the effects of "filter.css" until the JS removes them. This results in the user seeing the unwanted effects of "filter.css" before they are removed, which is not ideal.
My goal is to have the browser instantly apply or not apply my styles based on the user's settings before displaying the page content.
All methods I've tried so far to inject CSS have caused delays. It must be possible to add or remove CSS without delay, as demonstrated by extensions like Dark Reader that apply their styles immediately without showing the browser content without their CSS.
While conditional checking in the manifest may not be feasible, I welcome any suggestions on how to overcome this issue.
Any assistance would be greatly appreciated!
Thank you for your attention!