title: WebExtension - Inject CSS on <head> that might change/isn't unique
body: <p>My WebExtension has options, such as "hide footer". Problem is that I can't manipulate DOM on <code>document_start</code>, because the <code>&lt;footer&gt;</code> doesn't exist yet. Injecting the code on <code>document_end</code> works, but the users still see the footer for a few seconds.</p>
  
  <p>I have tried injecting CSS on <code>&lt;head&gt;</code> using <code>document_start</code> and it worked well. Now my question is:</p>
  
  <ul>
  <li>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 <code>&lt;style&gt;</code>, or should that be written manually using something such as innerHTML?</li>
  </ul>