Injecter du code CSS dans une page web.

Pour utiliser cette API vous devez avoir la permission "host permission" ou utiliser la permission "activeTab permission".

Vous ne pouvez injecter du CSS que dans des pages dont l'URL peut être exprimée en utilisant un motif de correspondance,  ce qui signifie que son schéma doit être "http", "https", "file", "ftp". Cela signifie que vous ne pouvez pas injecter de CSS dans les pages intégrées du navigateur, telles que about:debugging, about:addons, ou la page qui s'ouvre lorsque vous ouvrez un nouvel onglet vide.

Le CSS inséré peut être retiré à nouveau en appelant  tabs.removeCSS().

C'est une fonction asynchrone qui renvoie une Promise (sur Firefox seulement).

Syntaxe

var inserting = browser.tabs.insertCSS(
  tabId,           // optional integer
  details          // object
)

Paramètres

tabId Facultatif
integer. L'ID de l'onglet dans lequel insérer le CSS. Par défaut à l'onglet actif de la fenêtre en cours.
details
Un objet décrivant le CSS à insérer. Il contient les propriétés suivantes :
allFramesFacultatif
boolean. Si true, le CSS sera injecté dans toutes les images de la page en cours. Si c'est false, CSS est seulement injecté dans le cadre supérieur. Par défaut à false.
codeFacultatif
string. Code à injecter, sous la forme d'une chaîne de texte.
cssOriginFacultatif
string. Cela peut prendre l'une des deux valeurs suivantes: "utilisateur", pour ajouter le CSS en tant que feuille de style utilisateur, ou "auteur" pour l'ajouter en tant que feuille de style auteur. Spécifier "utilisateur" vous permet d'empêcher les sites Web de surcharger le CSS que vous insérez: voir la commande en cascade. Si cette option est omise, le CSS est ajouté en tant que feuille de style auteur.
fileFacultatif
string. Chemin d'accès à un fichier contenant le code à injecter. Dans Firefox, les URL relatives sont résolues par rapport à l'URL de la page en cours. Dans Chrome, ces URL sont résolues par rapport à l'URL de base de l'extension. Pour travailler avec plusieurs navigateurs, vous pouvez spécifier le chemin comme une URL absolue, en commençant à la racine de l'extension, comme ceci : "/path/to/stylesheet.css".
frameIdFacultatif
integer. Le cadre où le CSS doit être injecté. La valeur par défaut est 0 (l'image de niveau supérieur).
matchAboutBlankFacultatif
boolean. Sitrue, le code sera injecté dans les cadres "about:blank" et "about:srcdoc" intégrés si votre extension a accès à leur document parent. Le code ne peut pas être inséré au niveau supérieur about: frames. Par défaut à false.
runAtFacultatif
extensionTypes.RunAt. Le plus tôt que le code sera injecté dans l'onglet. Par défaut à "document_idle".

Valeur retournée

Une Promise qui sera remplie sans arguments lorsque tous les CSS ont été insérés. Si une erreur se produit, la promesse sera rejetée avec un message d'erreur..

Compatibilité du navigateur

ChromeEdgeFirefoxFirefox for AndroidOpera
Support simple Oui Oui4754 Oui
runAt20 Non475415
frameId39 Oui475426
matchAboutBlank39 Oui Non Non26
cssOrigin Non Non5354 Non

Exemples

Cet exemple s'insère dans l'onglet CSS actif qui provient d'une chaîne.

var css = "body { border: 20px dotted pink; }";

browser.browserAction.onClicked.addListener(() => {

  function onError(error) {
    console.log(`Error: ${error}`);
  }

  var insertingCSS = browser.tabs.insertCSS({code: css});
  insertingCSS.then(null, onError);
});

Cet exemple insère CSS qui est chargé à partir d'un fichier empaqueté avec l'extension. Le CSS est inséré dans l'onglet dont l'identifiant est 2 :

browser.browserAction.onClicked.addListener(() => {

  function onError(error) {
    console.log(`Error: ${error}`);
  }

  var insertingCSS = browser.tabs.insertCSS(2, {file: "content-style.css"});
  insertingCSS.then(null, onError);
});

Example extensions

Remerciements :

Cette API est basée sur l'API Chromium chrome.tabs. Cette documentation est dérivée de tabs.json dans le code de Chromium code.

Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis.

Étiquettes et contributeurs liés au document

Contributeurs à cette page : hellosct1, Needlex
Dernière mise à jour par : hellosct1,