I am building a chrome extension. That extension appends an element to the body of the rss feed page.
I append a stylesheet to the head of the page. For the sake of the example let's say:
*{
font-size: 54px;
}
It doesn't affect any element on the page but I just inspect the page and append this stylesheet to the head of the page It works.
Style that js appends
After I just manually append same style again, it works.
Example rss feed that doesn't work: http://feeds.feedburner.com/experiment_podcast
what I've tried:
- delete all style tags and append it again
- delete all style tags and append it again but interval of 1 sec
I am not sure that is related to this problem but there is one thing I realized, when I append element into the body, its style property seems undefined. (my goal is append an element and change its style)
It works on any other webpages but not rss feed pages.
this is how I append the stylesheet
const style = document.createElement('style');
style.textContent = '* { font-size:54px; }';
setTimeout(() => {
document.head.appendChild(style); // tried it async but no luck with that either
}, 10000);
It is not even related to chrome extension, when I try to append styles via console, it won't work either.