Javascript Girl
  1. Javascript Girl
  3. Insertion de CSS avec une extension Firefox
Intereting Posts
L'événement Fullscreenchange ne se déclenche pas en Chrome Saisie du générateur de nombres aléatoires en version Javascript Comment faire correspondre les invocations de fonctions imbriquées (paires de brackets) à l'aide d'une expression régulière (récursive?) CSS Handwriting Animation Ouvrez la page à partir du bookmarklet, mais faites-le comme une fenêtre modale? Obtenir le chemin de la référence Firebase Comment vérifier si des auditeurs / gestionnaires de l'événement JavaScript sont attachés à un élément / document? Sous-menu (arbre étendu / effondré) dans AngularJS En réalité, une fermeture est-elle créée? Toute autre alternative à la capture de texte sur Ctrl + V La correspondance Javascript regex échoue sur la page réelle, mais les tests regex fonctionnent très bien Dans javascript, testez-vous la propriété profondément imbriquée dans le graphique objet? Elément de sélection HTML sur le déclencheur de l'option déjà sélectionnée Comment exécuter le javascript fn en utilisant l'événement de bouton OnClick (asp.net) Comment obtenir une hauteur de <div> en dimension px

Insertion de CSS avec une extension Firefox

Je crée une extension Firefox qui ajoute des éléments HTML à certaines pages d'un site Web. Je souhaite que vous insérez un fichier CSS personnalisé pour définir ces éléments. Cela fonctionne si j'insère des étiquettes avec le CSS sur la page, mais c'est une solution moins que la solution idéale.

Est-il de toute façon possible de charger et d'analyser un fichier CSS, comme si j'avais utilisé la balise dans l'en-tête, ou est-ce que je suis bloqué pour l'intégrer de quelque façon?

Chrome: // ne fonctionnera pas car la page sur laquelle vous insérez n'est pas autorisée à accéder aux fichiers en dehors de son domaine (y compris les URI chrome). C'est vrai, même si vous insérez le lien, car le lien est toujours exécuté dans le contexte de la page cible. Au lieu de cela, vous avez deux options:

Vous pouvez définir un alias de protocole de ressources dans votre manifeste, puis utiliser un URI de ressources pour accéder au CSS. Par exemple, le chrome.manifest suivant vous permettra d'insérer le css comme resource://myextresource/myfile.css :
content myext content/
resource myextresource content/css/
Consultez l' inscription Chrome MDN pour plus d'informations. Voir aussi Comment une extension Firefox peut-elle injecter un fichier css local dans une page Web? Pour une question similaire.

Ou, vous pouvez ajouter le CSS comme une FEUILLE USER en utilisant ce qui suit. Cela rendra votre CSS disponible sur toutes les pages, alors assurez-vous d'utiliser des sélecteurs très uniques. Une mise en garde avec cette approche est que la page CSS a priorité sur les feuilles d'utilisateur. Vous pouvez utiliser! Important pour annuler cela, mais la page CSS peut encore vous tromper si elle l'utilise! Important aussi. 

 var sss = Components.classes["@mozilla.org/content/style-sheet-service;1"] .getService(Components.interfaces.nsIStyleSheetService); var ios = Components.classes["@mozilla.org/network/io-service;1"] .getService(Components.interfaces.nsIIOService); var uri = ios.newURI(url, null, null); sss.loadAndRegisterSheet(uri, sss.USER_SHEET);