Je découvre les extensions de Google Chrome pour la première fois. Je voudrais créer ce qui apparaît comme une barre d'outils en haut de la page lorsque vous cliquez sur l'icône de l'extension, un peu comme la barre d'outils de StumbleUpon.
Je ne vois pas comment faire. Les exemples montrent principalement une popup.html, et non une barre d'outils fixe.
Bien que cette réponse montre deux façons de créer une barre d'outils dans Chrome, je recommande vivement d'utiliser la fonction action de la page o Action du navigateur badges. Ceux-ci ne prennent pas autant de place que les barres d'outils, et peuvent également être utilisés pour afficher un panneau en cas de clic, et même obtenir les permissions temporaires de l'hôte pour interagir avec la page.
chrome.infobars APICette section utilisé pour montrer une démo en utilisant le chrome.infobars API. Cette API n'a jamais été versée dans le canal stable, et seront supprimés ; ne l'utilisez pas.
chrome.sidebar APIIl y a eu une proposition en 2015 pour une API de barre latérale, comme une alternative à la chrome.infobars (décrite ci-dessus). Mais cette idée a été rejetée en 2016 afin de donner la priorité à " la valeur fondamentale de simplicité de Chrome " ( source ).
Il semble qu'il n'y ait aucun moyen de créer une barre d'outils "avancée" dans Chrome sans la placer dans la fenêtre du document.
La création de barres d'outils à l'aide de scripts de contenu est délicate. Il faut insérer du code dans la page, voire modifier la structure du document, ce qui peut casser certaines pages sur internet.
Pour créer une barre d'outils en utilisant le contenu scripts, les étapes suivantes doivent être suivies :
<iframe> - expliqué plus loin).L'étape 1 est facile, voir mon exemple précédent ou lire la documentation de contenu scripts .
Pour minimiser les conflits de style, et pour empêcher la page d'utiliser votre barre d'outils, insérez une iframe. Contrairement à la méthode précédente, vous n'avez pas directement accès à l'API de l'extension (car la page intégrée n'est ni un script de contenu, ni une page s'exécutant dans le processus de l'extension).
Insertion de la barre d'outils :
add-toolbar.js (contenu script)var height = '40px';
var iframe = document.createElement('iframe');
iframe.src = chrome.runtime.getURL('toolbar.html');
iframe.style.height = height;
iframe.style.width = '100%';
iframe.style.position = 'fixed';
iframe.style.top = '0';
iframe.style.left = '0';
iframe.style.zIndex = '938089'; // Some high value
// Etc. Add your own styles if you want to
document.documentElement.appendChild(iframe);Créez maintenant un fichier appelé toolbar.html et l'ajouter à la "web_accessible_resources" de votre fichier manifeste. Ce fichier sera utilisé à l'emplacement de la barre d'outils, n'hésitez pas à faire n'importe quoi de non-mal avec. Gardez à l'esprit qu'il se comporte comme une page web normale, il n'a littéralement accès à aucune des API de Chrome.
Jusqu'à présent, vous avez seulement ajouté un cadre à la page. Il y a un problème : le contenu de la page est partiellement caché. Ce n'est pas très joli. Il y a plusieurs façons de résoudre ce problème, j'ai choisi d'utiliser la méthode suivante Transformations CSS car elle est relativement facile à utiliser et la plupart des pages n'utilisent pas cette propriété sur l'élément body.
// continuing add-toolbar.js
var bodyStyle = document.body.style;
var cssTransform = 'transform' in bodyStyle ? 'transform' : 'webkitTransform';
bodyStyle[cssTransform] = 'translateY(' + height + ')';translateY provoque le déplacement du corps vers le bas, y compris les éléments enfants avec position:fixed . Parce que nous avons ajouté l'iframe à l'élément Root, en dehors de l'élément <body> l'élément n'est pas affecté.
Malheureusement, Chrome traite la page html intégrée comme une page d'extension non privilégiée. Vous ne pouvez utiliser que certaines des API de l'extension (comme pour le contenu scripts).
Une autre option consiste à charger une page depuis votre serveur, puis à exécuter un script de contenu sur cette page spécifique. Mettez en place un Cache manifeste pour que votre barre d'outils soit toujours disponible si l'utilisateur n'est pas sur un réseau.
L'API Chrome ne dispose d'aucun widget de barre d'outils pour vous aider. Vous devez créer et positionner manuellement une barre d'outils div sur une page. Vous pouvez le faire en utilisant contenu scripts qui vous permettent d'injecter du javascript et du css dans les pages.
Vous disposez ainsi d'une extension de navigateur de type stumble-upon pour une variété de navigateurs, bien que vous puissiez limiter le téléchargement à Chrome si vous le souhaitez.
Installateurs
Page d'installation générale (fournit un exécutable qui peut être signé si vous êtes sous Windows pour faciliter le processus d'installation) :
http://crossrider.com/apps/35180/install_page
Installations spécifiques :
Crossrider facilite également la publication sur la boutique de chrome et offre un moyen simple de signer votre extension pour les téléchargements d'exécutables sur Windows.
Info
Voici les documents relatifs à l'API, qui sont assez complets pour une solution multi-navigateurs :
Dans le code ci-dessous, je ne mets pas le html & css car il y a des limites au nombre de caractères pour les réponses. Cependant, si cela vous convient, vous pouvez soit l'ouvrir (les crx sont des zips, il suffit de renommer l'extension en .zip) pour obtenir les css et le html à l'intérieur, soit trouver un moyen pour que je vous les envoie. Notez que j'injecte le HTML et le CSS dans la page.
En général, j'écris les css et le html, puis je réduis les deux ( http://cssminifier.com/ y http://www.willpeavy.com/minifier/ ), puis je prends la sortie minifiée et j'utilise un outil d'échappement de chaîne comme http://www.htmlescape.net/stringescape_tool.html pour l'échapper afin qu'il puisse être placé dans le code de l'extension, car vous voulez que cela soit aussi rapide que possible, étant donné qu'il s'agit d'une extension, et non d'une page web bien sûr.
Donc, si cela vous semble bon, allez sur crossrider.com, créez un compte (c'est 100% gratuit), et collez ces fichiers aux endroits appropriés et mettez le HTML et le CSS minifiés/escapés dont vous avez besoin, en remplaçant les choses dans le cssstr et le htmlstr dans l'extension.js ci-dessous.
Code
extension.js :
appAPI.ready(function($) {
// Place your code here (you can also define new functions above this scope)
// The $ object is the extension's jQuery object
// Adds a listener that handle incoming messages
var lid = appAPI.message.addListener(function(msg) {
switch(msg.action) {
case 'SHOWEXAMPLEBAR':
$('#examplebar-toolbar').show();
break;
case 'HIDEEXAMPLEBAR':
$('#examplebar-toolbar').hide();
break;
default:
break;
}
});
// Add toolbar (not included here due to size - be sure it is escaped)
var cssstr = '/* The CSS of your toolbar */';
// Add toolbar HTML (not included here due to size - be sure it is escaped)
var htmlstr = '\x3C!-- the html of your toolbar --\x3E';
$('\x3Cstyle\x3E'+cssstr+'\x3C/style\x3E' + htmlstr).prependTo('body');
$('#examplebar-close').click(function() {
//Tell the background to change its buttonstate:
$('#examplebar-toolbar').hide();
appAPI.message.toBackground({action: "HIDEEXAMPLEBAR"});
});
});background.js :
// Note: the $ variable that represents the jQuery object is not available
// in the background scope
appAPI.ready(function() {
// Global variable to hold the toggle state of the button
var buttonState = true;
// Sets the initial browser icon
appAPI.browserAction.setResourceIcon('button.png');
// Sets the tooltip for the button
appAPI.browserAction.setTitle('Bar');
// Sets the text and background color for the button
if (appAPI.browser.name !== 'safari') {
appAPI.browserAction.setBadgeText('bar');
appAPI.browserAction.setBadgeBackgroundColor([255,0,0,50]);
}else{
// Safari only supports numeric characters
// and has a fixed background color
appAPI.browserAction.setBadgeText('1234');
}
// Sets the initial onClick event handler for the button
appAPI.browserAction.onClick(function(){
if (buttonState) {
//Hide the toolbar by notifying the extension code:
appAPI.message.toAllTabs({action: "HIDEEXAMPLEBAR"});
if (appAPI.browser.name !== 'safari') {
// Sets the text and background color for the button
// using the optional background parameter
appAPI.browserAction.setBadgeText('helo', [0,0,255,255]);
// Sets the icon to use for the button.
appAPI.browserAction.setResourceIcon('button.png');
} else {
// Safari only supports numeric characters,
// has a fixed background color,
// and can only use the extension's icon
appAPI.browserAction.setBadgeText('4321');
}
} else {
appAPI.message.toAllTabs({action: "SHOWEXAMPLEBAR"});
// Remove the badge from the button
appAPI.browserAction.removeBadge();
if (appAPI.browser.name !== 'safari'){
// Reset the icon for the image
appAPI.browserAction.setResourceIcon('button.png');
}
}
// Toggle the state
buttonState = !buttonState;
});
// Adds a listener that handle incoming messages
var lid = appAPI.message.addListener(function(msg) {
switch (msg.action) {
case 'HIDEEXAMPLEBAR':
buttonState = !buttonState;
break;
default:
break;
}
});
});Notas
Notez également que jQuery est automatiquement disponible dans la portée de l'extension, de sorte que vous l'obtenez gratuitement avec les API. Et, si vous voulez injecter dans une iframe, n'oubliez pas d'activer les iframes dans les paramètres.
Pour le site de soutien communautaire : https://getsatisfaction.com/crossrider
Ils sont très réactifs et peuvent vous aider lorsque vous rencontrez des difficultés.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
