Je construis une extension chromée qui fait une injection d'interface utilisateur utilisant des scripts de contenu. Le problème est que, puisque chaque site Web est différent et peut essayer de visser le positionnement par défaut de certains éléments (divs, listes), etc., mon interface utilisateur est différente selon laquelle il est utilisé.
J'ai essayé d'utiliser YUI RESET V3 et cela a aidé mais n'a pas supprimé toute l'étrangeté. Est-ce que quelqu'un connaît une méthode de réinitialisation encore plus agressive qui ne fait que nettoyer la marge / rembourrage et réinitialiser la taille du texte?
Merci d'avance.
4 Réponses :
C'est pourquoi vous devez injecter à document_end . Vous pouvez le faire en définissant "run_at": "document_end" dans le Contenu Script Manifest
Eh bien, ce n'est pas tellement lorsque le JavaScript s'exécute comme si le HTML est injecté. Le mettre dans le corps signifie qu'il pourrait être affecté par des styles de page.
Je pense que la solution consiste à utiliser du contenu anonyme à l'intérieur des iframes. Technique détaillée ici: BorderstyLo.com/posts/... < / a>
Je suis d'accord, la meilleure injection serait des iframes de la manière dont les styles ne seront pas hérités. Mais vous devriez toujours le placer à la fin lorsque le DOM est chargé. Parce que certains sites Web peuvent bouer avec votre iframe si elle est chargée au début.
Nous avons eu un problème similaire, nous avons essayé CSS réinitialise et utilise également des balises d'identification spécifiques pour les règles et les règles CSS, mais elle n'a jamais été suffisamment robuste ...
La meilleure solution consistait à injecter les éléments dans le DOM comme Shadow Dom Elements contenant le style en ligne. Vous pouvez lire votre fichier CSS via AJAX Demandes et les injecter à l'ombre DOM de manière dynamique, assurez-vous simplement qu'elles se trouvent dans les fichiers web_accessible_resources (vous pouvez utiliser une base générique dans votre dossier CSS).
Si vous n'êtes pas familier avec Shadow Dom, voici Un bon exemple de la façon dont cela fonctionne. Cela pourrait prendre
J'ai récemment créé la limite, une bibliothèque CSS + JS pour résoudre des problèmes comme celui-ci. La limite crée des éléments complètement distincts de la page Web existante.
Prenez la création d'une boîte de dialogue par exemple. Après l'installation de la limite, vous pouvez le faire dans votre script de contenu P>
var dialog = Boundary.createBox("yourDialogID", "yourDialogClassName");
Boundary.loadBoxCSS("#yourDialogID", "style-for-elems-in-dialog.css");
Boundary.appendToBox(
"#yourDialogID",
"<button id='submit_button'>submit</button>"
);
Boundary.find("#submit_button").click(function() {
// find() function returns a regular jQuery DOM element
// so you can do whatever you want with it.
// some js after button is clicked.
});