Come posso iniettare CSS e Javascript in un iframe caricato in un'estensione di cromo

Question

Ho un iframe nella mia estensione chrome che carica un sito Web, vorrei inserire CSS e Javascript nel sito Web ma solo quando è caricato nel mio estensioni iframe (quindi non viene influenzato quando l'utente visita normalmente il sito).

Sono stato sorpreso che le estensioni di Chrome abbiano applicato criteri di sicurezza tra domini quando provano ad accedere agli interni di un iframe anche se possono effettuare richieste XHR tra domini.

C'è un modo semplice per farlo? Anche se potrei essere in grado di farlo usando executeScript ma richiede un ID di tabulazione.

Answer 1

L'unico modo per sapere se ci si trova in un ifrmae è il window non è il top.

if (window == top) { 
    // Not in iframe 
} 
else { 
    // In an iframe 
} 

È possibile farlo solo per gli script di contenuto, non per i fogli di stile. Quello che faccio di solito è all'interno dello script di contenuto, controllo se non è nella finestra in alto, e poi continuo lo script, altrimenti finisco semplicemente.

Recap

1. Iniettare la Scrittura contenuti per tale URL
2. Nello script contenuti, controllare se la proprietà della finestra, if (window != top) { loadContentScript() }
3. Creare il CSS in JavaScript se si è troppo preoccupati sta influenzando. Non dovresti però se usi ID univoci.

Spero che ciò abbia aiutato, lo faccio per alcune mie estensioni.