Como renderizar uma página de uma extensão do Google Chrome?

Question

Sou novo em escrever extensões para o Google Chrome. Quero fazer uma extensão que só roda em algumas páginas (que eu escolherei) e renderiza seus CSs depois que a página é carregada (idealmente eu gostaria de algo semelhante ao que você pode fazer com GM_addStyle em scripts Greasemonkey).

Como posso conseguir isso em uma extensão do Chrome?

Answer 1

Você pode usar scripts de conteúdo que tenham acesso às páginas DOM.

Em seu manifest.json você poderia ter:

"content_scripts": [
    {
      "matches": ["http://www.google.com/*"],
      "css": ["mystyles.css"],
      "run_at": "document_end"
    }
  ],

Isso injetará o arquivo CSS Mystyles em qualquer página do Google depois que o DOM tiver carregado. Isso não substitui completamente os estilos, mas você poderá criar seu CSS para que ele substitua os estilos deles.

Mais informações podem ser encontradas em code.google.com. Ele também inclui informações sobre como injetar programaticamente CSS em uma página.