10
votes

La CSS de l'extension chromée n'est pas chargée

Je développe un "script de contenu" extension chromée. J'essaie d'utiliser un fichier CSS pour styler certains éléments existants sur une page et des éléments de style que je crée de manière dynamique avec JavaScript.

J'ai spécifié mon fichier CSS dans le manifeste.json Fichier: xxx

et si je mets quelque chose comme ci-dessous dans mon style.Css rien ne se produit: xxx

J'ai également placé des règles sous la forme de: xxx

puis inséré (en utilisant jQuery) un élément avec l'ID de myinsertedel < / Code> (lien d'ancrage) dans la page, mais la couleur n'est pas rouge (l'élément est inséré et visible dans la page).

Alors qu'est-ce qui donne? Qu'est-ce que je fais mal? Selon les documents, j'ai tout de tout ce que je dois, et Google ne renvoie rien d'utile.

Edit: Ce code est exécuté sur les pages de Facebook si cela est pertinent de quelque manière que ce soit ...


                        
                        
                            
                                                                    css
                                                                    google-chrome-extension
                                                            
                        
                                                    
                            
                            
                                0 commentaires



                                    
                    3 Réponses :
                    
                                            
                            
                                
                                    1
 votes
                                
                            
                            
                                
                                     Votre javascript est-il injecté (la règle de correspondance est correcte)? Essayez d'ajouter ! Important  à vos règles CSS:  xxx                                  


                                                                    
                                    
                                    
                                        3 commentaires
                                        
                                                                                            
                                                    La règle est correcte. Les fichiers JS dans la même règle sont en cours d'exécution. ! important n'aide pas.                                                
                                                
                                                                                            
                                                    @Jan Avez-vous essayé d'ouvrir la console de débogage et d'inspecter votre élément pour voir quel type de feuilles de style y est appliquée? Les CSS d'Extensions doivent être affichés dans la section "User StylesSheet".                                                
                                                
                                                                                            
                                                    Aucun styles n'est appliqué (en dehors de la définition de la page définie) et il n'y a pas de section "User StylesSheet": \                                                
                                                
                                                                                    
                                    
                                                            

                        

                        
                                            
                            
                                
                                    11
 votes
                                
                            
                            
                                
                                     Bien, apparemment, il y a un bogue en chrome. Si vous avez un ?  dans vos correspondances  Expression des fichiers CSS ne sera pas chargé. J'ai déposé un rapport de bogue avec plus de détails  ici . < / p>                                


                                                                    
                                    
                                    
                                        1 commentaires
                                        
                                                                                            
                                                    Dix ans plus tard et ils ne le répareront pas ....                                                
                                                
                                                                                    
                                    
                                                            

                        

                        
                                            
                            
                                
                                    1
 votes
                                
                            
                            
                                
                                     Voir Edition ci-dessous  Vous devez disposer d'au moins un fichier de stylesheet inclus sur votre page afin d'avoir votre  content_script  styles appliqués:   xxx  
 Donc, si vous n'avez pas de feuilles de style incluses, ajoutez simplement un lien  vierge  comme ci-dessus.  
 Je sais que cela semble drôle mais cela a effectivement fonctionné pour moi. < / p> 
 edit   Deux choses sont spécifiques à mon scénario  

 Le bogue ne se produit que sur  fichier  protocole 
 Les fichiers sont non  .html  (dans mon cas  .md ) 
   Q:  Pourquoi ai-je besoin de feuilles de style sur  .md  fichiers?  
  A:  Le  content_script  correspondant sur  .md  Fichiers et insère un fichier  js  qui compilait le markdown en HTML. Les styles sont pour le HTML généré.  
 manifeste.json   xxx   script.js   xxx   Style.css   xxx   étapes  
 Ouvrez un peu de fichier : ///1.md  fichier 
 commenter le code à l'intérieur  script.js  
 Rechargez l'extension 
 Retour au fichier précédemment ouvert  .md  - initialement, les styles sont chargés 
 Actualiser la page - Les styles ne sont pas appliqués 
  Je comprends que ceci est un cas de bord, mais c'est un scénario possible pour mon extension et je voulais juste signaler ma solution.                                  


                                                                    
                                    
                                    
                                        2 commentaires
                                        
                                                                                            
                                                    Cela sonne  extrêmement  improbable. Si cela se produit vraiment, créez un rapport sur  crbug.com/new                                                 

                                                
                                                                                            
                                                    Merci pour la suggestion @ROBW, mais je ne suis pas tout à fait sûr que ceci est un bogue réel ou non, bien que dans mon cas, cela ressemble à un bug. Voir la modification ci-dessus.

Articles qui pourrait vous intéresser : Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police? Mettez en surbrillance l'élément d'étiquette après avoir cliqué sur la case à cocher Changer la direction de défilement de la page Web sur la version mobile Target first-child css styled-components