8
votes

Extension chromée - Empêcher le CSS d'être écrit

J'écris une extension chromée dans laquelle un petit panneau apparaît sur le site Web existant. Lorsque je vais sur certains sites Web, je remarque que le CSS de mon groupe spécial a été écrasé par le CSS du site Web. J'utilise actuellement Eric Meyer's CSS réinitialiser mais il ne semble pas faire le truc . Y a-t-il autre chose que je peux faire?

css google-chrome-extension

4 commentaires

Vous pouvez utiliser ! Important électrictoolbox.com/Utilisation-important-css


                                        
                                                                            Pas un fan de cette solution. Vous allez vous retrouver dans des batailles de priorité vraiment étrange au sein de votre propre CSS:  css-tricks.com/when-utilisant-important-is-the-right-choice  Utilisez ! Important  avec parcimonie et évitez-le complètement lorsque cela est possible ... (vous devriez presque toujours l'éviter)

                                        
                                                                            Vous souvenez-vous de quels sites Web ont écrit vos styles?
                                        
                                                                            Shadow Dom propose des CSS scopés (n'hérite pas en amont CSS). Peut être une solution qui mérite d'être envisagée.



                                    
                    4 Réponses :
                    
                                            
                            
                                
                                    1
 votes
                                
                            
                            
                                
                                     Je ne connais pas les extensions chromées elles-mêmes. Mais vous pouvez essayer de scoper votre panneau dans un «identifiant»:  xxx  
 puis dans le CSS a juste  # mon panneau  comme premier sélecteur pour tous vos CSS. Prenez la réinitialisation CSS et ajoutez le  # My-Panel  à chaque élément défini là aussi. Pourrait être fastidieux ... mais garantirait que vous réinitialisez tous vos éléments et garantissons pratiquement qu'ils seront réinitialisés à une priorité plus élevée que tout ce que le site Web pourrait définir.                                  


                                                                    
                                    
                                    
                                        1 commentaires
                                        
                                                                                            
                                                    Cela ne fonctionne pas non plus, je sais que vous avez dit d'utiliser l'ID car l'identifiant a la spécificité la plus élevée du CSS, mais une pièce d'identité est également écrasée.                                                
                                                
                                                                                    
                                    
                                                            

                        

                        
                                            
                            
                                
                                    8
 votes
                                
                            
                            
                                
                                     Voici un "hack" nifté avec des iframes, où vous n'instende pas réellement d'un iframe: 

 ajoute un iframe à la DOM, ce sera un conteneur pour votre DAD DAD 
 Marchez dans l'iframe et ajoutez votre code HTML au InnerhTML du corps 
  Il ressemble à ceci:   xxx                                  

                                                                    
                                    
                                    
                                        1 commentaires
                                        
                                                                                            
                                                    Oui, vous devez ajouter l'iframe avant de définir le innerhtml, il suffit de vérifier que                                                
                                                
                                                                                    
                                    
                                                            
                        
                        
                                            
                            
                                
                                    1
 votes
                                
                            
                            
                                
                                     Une extension que je viens d'écrire a rencontré des problèmes similaires. J'ai fait disparaître la plupart d'entre eux, mais pas tous. Je pense que je sais que je sais pourquoi, mais je n'ai pas compris pour résoudre les exceptions (c'est juste une tâche scolaire à partir de maintenant). 
 Voici ce que j'ai trouvé: quand une feuille de style est injectée à travers le manifeste d'extension ou par La page d'arrière-plan, elle est traitée comme une feuille de style utilisateur, en lui donnant une priorité en cascade sur la feuille de style de navigateur par défaut uniquement. Ajout ! IMPORTANT  CODE> Les directives sur vos règles ne vous aideront pas, du moins dans mon expérience. Les feuilles de style utilisateur (ajoutées par une extension ou manuellement) peuvent contenir ! IMPORTANT  CODE> directives, mais ils ne sont pas honorés par Chrome pour une raison quelconque - juste vérifier comment ils se présentent dans le chrome devtools, sans  ! important  code>. Ajout d'attributs  ID  code> ne vous aidera pas non plus, car la spécificité ne fera que l'emporter lorsque la priorité est égale autrement.  P> 
 Qu'est-ce qui fonctionne pour moi:  P> 
var ninjaCSS = document.createElement("link");
ninjaCSS.setAttribute("rel", "stylesheet");
ninjaCSS.setAttribute("type", "text/css");
ninjaCSS.setAttribute("href", chrome.extension.getURL('ninja.css'));
document.getElementById("head").appendChild(ninjaCSS);

                                

                                                                    
                                    
                                    
                                        0 commentaires
                                        
                                                                                    
                                    
                                                            
                        
                        
                                            
                            
                                
                                    0
 votes
                                
                            
                            
                                
                                      Appendicateur  code> Solutions fonctionne pour moi (Devin G Rhode et Jcycle Answers). Mais j'ai remarqué que ces solutions ajoutent simplement l'attribut  xmlns = "http://www.w3.org/1999/xhtml"  code>. J'ai donc testé mon code juste en ajoutant cet attribut xmlns à mon étiquette de lien (directement, pas à l'aide de JS) et cela fonctionne également, je ne sais pas pourquoi. 
 échec:  P> 
<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" type="text/css" href="filesystem:chrome-extension://.............../temporary/Content/Styles/style.css" />

                                

                                                                    
                                    
                                    
                                        0 commentaires