0

My WebExtension has options, such as "hide footer". Problem is that I can't manipulate DOM on document_start, because the <footer> doesn't exist yet. Injecting the code on document_end works, but the users still see the footer for a few seconds.

I have tried injecting CSS on <head> using document_start and it worked well. Now my question is:

  • Since CSS won't always be the same, what would be the best way to inject CSS? Is there a JavaScript function to directly write CSS to <style>, or should that be written manually using something such as innerHTML?
wOxxOm
  • 65,848
  • 11
  • 132
  • 136
Qluvyy
  • 81
  • 1
  • 6
  • You can use createTextNode http://stackoverflow.com/a/524721/414062 – Dominic Mar 22 '17 at 08:59
  • 1
    @DominicTobias Thanks, that method is much cleaner than my innerHTML method. – Qluvyy Mar 22 '17 at 09:07
  • 1
    @DominicTobias & Qluvy, Rather than explicitly creating a text node with `style.appendChild(document.createTextNode(css));`, it is more efficient to just assign to the [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) property like: `style.textContent = css;`. Note: "Setting this property on a node removes all of its children and replaces them with a single text node with the given value." In the case of a ` – Makyen Mar 22 '17 at 14:23
  • Asking for the "best" way to do something is usually considered opinion based, and often leads to a question being closed. I would suggest you reword. – Makyen Mar 22 '17 at 14:29
  • It's not clear why the `
    ` not existing has anything to do with your ability to manipulate the DOM on `document_start`. Please explain why this is a problem. Yes, much of the DOM does not exist on `document_start`, that the point of using `document_start`. Are you aware you can add your `
     – Makyen Mar 22 '17 at 14:42
  • @Makyen Thank you for your reply, I have reworded the question a bit. – Qluvyy Mar 23 '17 at 08:39
  • @Makyen The problem is that most DOM parts don't exist on document_start, meaning I have to add CSS on to hide some tags such as footer. Depending on the settings, users can remove the footer and other parts of the website, but I have to do that on document_end, meaning they will still see these elements for a few seconds until it gets removed. – Qluvyy Mar 23 '17 at 08:47

0 Answers0