Feature to Delay execution

[mattwinans]

Hey all, thank you for the amazing extension! I use it every day.

Some websites, namely advertisements, use javascript to inject CSS right after the page has loaded. Is there a way to delay the execution of the Live CSS Editor by a number of seconds? I've been required to open & close the editor after these types of pages load.

e.g. to block ads on this page:
https://www.dextools.io/app/bsc/pair-explorer/0x5a8170ad4700558b05f3a6668ff5e77b11b88db8

app-mini-banner { visibility: hidden !important; } div.text-center.d-sm-none.d-md-none.d-lg-none.d-lg-block, .container-2yI8A9Vu, .container-RYiwcUsM { display:none !important; }

Thank you again!

[webextensions]

@mattwinans
Glad that you find it so useful :-)

I attempted the following (in Chrome browser on Linux):

• Go to https://www.dextools.io/app/bsc/pair-explorer/0x5a8170ad4700558b05f3a6668ff5e77b11b88db8
• Open Magic CSS
• Paste the CSS you have provided
• Clicked on the pin icon to apply styles automatically (and accepted the permission requests which appear when pinning it for the first time)
• Reloaded the page
• Upon reload, I could observe that as per your CSS, the elements that you are targeting via these CSS selectors (the ads at the top and near bottom-left) are hidden upon reload as well.

Some of the elements that are targeted in those CSS selectors (.container-2yI8A9Vu and .container-RYiwcUsM) did not exist on the page when I loaded. Probably because those selectors are random or the "hashes" in those names got changed.

Can you provide some more information with screenshots (and probably HTML structure) and appropriate steps to reproduce? If we are able to reproduce the issue, then it should be fixable :-)

[mattwinans]

Thank you sir for the very quick reply!

That is interesting that upon reload your CSS is executing. I did some investigating and found that even though I had this snippet pinned to apply the styles automatically, it wouldn't execute. I was able to overcome this issue by unpinning it & repinning, reaccepting the permissions, and now all appears to work flawlessly.

Could these permissions have possibly been lost in my recent migration to another computer? I had copied my Chrome's AppData folder from my old system to this one. Wondering if those permissions were not brought over?

Either way, thank you for the help and looking forward to your insight on this!

Matt

[webextensions]

Alright. So, maybe, the permissions (previously requested by the extension) are not copied over through Chrome's AppData.

An alternative way to reproduce the similar behavior would be: (Disclaimer: Don't try this at home ;-) )

• In Magic CSS "More options" (via the extension options page), under Storage section, use the "Web Storage (localStorage)" option
• Use "Apply styles automatically" feature in the editor for a webpage, eg: http://localhost/ and grant the requested permissions
• Uninstall the extension
• Install the extension again
• When we open the extension for that same webpage, it would show that the "Apply styles automatically" (pinned) icon is active, even though it didn't get applied automatically

Approaches required to fix-it / improve-this-behavior:

• Upon load of editor, check for the permissions before showing the "pinned" icon
• Add a "permissions manager" functionality from the "Extension options" page. It maybe part of import/export functionality which is yet to be implemented and was briefly mentioned in Feature Request: Persistence across Devices #29

[mattwinans]

I am glad you can reproduce the issue and thank you again for such a wonderful extension!