web-dev-qa-db-fra.com

Comment créer une barre d'outils dans Google Chrome?

J'explore Google Chrome extensions 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 d'extension, un peu comme la barre d'outils StumbleUpon.

Je ne vois pas comment faire ça. Les exemples montrent principalement un popup.html, et non une barre d'outils fixe.

google-chromegoogle-chrome-extensiontoolbar
24
Robin

Bien que cette réponse montre deux façons de créer une barre d'outils dans Chrome, je recommande fortement d'utiliser l'action de page ou l'action du navigateur badges. Celles-ci ne prennent pas autant d'espace que les barres d'outils et peuvent également être utilisées pour afficher un panneau au clic, et même obtenir des autorisations d'hôte temporaires pour interagir avec le page.

Et pour ceux qui n'ont pas vraiment besoin d'une barre d'outils, mais d'une barre latérale, il existe une proposition active pour un chrome.sidebar API . Ce n'est qu'une proposition, si et quand elle sera mise en œuvre n'est pas encore figée.

Le chrome.infobars API

Cette section utilisée pour afficher une démo en utilisant le chrome.infobars API. Cette API n'a jamais été sur le canal stable, et sera supprimée ; ne l'utilise pas.

Scripts de contenu

La création de barres d'outils à l'aide de scripts de contenu est délicate. Vous devez insérer du code dans la page et même modifier la structure du document, ce qui pourrait casser certaines pages sur Internet.

Pour créer une barre d'outils à l'aide de scripts de contenu, les étapes suivantes doivent être suivies:

  1. Exécutez un script de contenu sur la page qui exécute les deux étapes suivantes.
  2. Insérez la barre d'outils (<iframe> - expliqué plus loin).
  3. Décalez le contenu de la page.

L'étape 1 est simple, consultez mon exemple précédent ou lisez la documentation de scripts de contenu .

Étape 2: insérez la barre d'outils

Pour minimiser les conflits de style et empêcher la page d'utiliser votre barre d'outils, insérez un iframe. Contrairement à la méthode précédente, vous n'avez pas directement accès à l'API d'extension (car la page incorporée n'est ni un script de contenu, ni une page en cours d'exécution dans le processus de l'extension).

Insertion de la barre d'outils:

add-toolbar.js (script de contenu)

var height = '40px';
var iframe = document.createElement('iframe');
iframe.src = chrome.extension.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 au "web_accessible_resources" de votre fichier manifeste. Ce fichier va être utilisé à l'endroit de la barre d'outils, n'hésitez pas à faire quoi que ce soit de non-mal avec lui. Gardez à l'esprit qu'il agit comme une page Web normale, il n'a littéralement accès à aucune des API Chrome.

Étape 3: déplacer le contenu

Jusqu'à présent, vous n'avez ajouté qu'un cadre à la page. Il y a un problème: le contenu de la page est partiellement masqué. Ce n'est pas très gentil. Il existe plusieurs façons de résoudre ce problème, je choisis d'utiliser les transformations CSS , car il est relativement facile à utiliser et la plupart des pages n'utilisent pas cette propriété sur l'élément de corps.

// continuing add-toolbar.js
var bodyStyle = document.body.style;
var cssTransform = 'transform' in bodyStyle ? 'transform' : 'webkitTransform';
bodyStyle[cssTransform] = 'translateY(' + height + ')';

translateY fait descendre le corps, y compris les éléments enfants avec position:fixed. Parce que nous avons ajouté l'iframe à l'élément racine, en dehors de <body> tag, l'élément n'est pas affecté.

Je veux utiliser des API d'extension dans la barre d'outils!

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 d'extension (similaires aux scripts de contenu).

Une autre option consiste à charger une page à partir de votre serveur, puis à exécuter un script de contenu sur cette page spécifique. Configurez un manifeste de cache pour vous assurer que votre barre d'outils est toujours disponible si l'utilisateur n'est pas sur un réseau.

46
Rob W

L'API Chrome n'a pas de 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 scripts de conten , qui vous permettent d'injecter du javascript et du CSS aux pages.

3
serg

Cela vous donne une extension de navigateur similaire à une variété de navigateurs, bien que vous puissiez limiter le téléchargement à seulement 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 dans le magasin chrome et fournit un moyen simple de signer votre extension pour les téléchargements exécutables sur Windows.

Info

Voici les documents pour l'API, son assez complet pour une solution multi-navigateur:

http://docs.crossrider.com/

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 semble bon, vous pouvez soit l'ouvrir (les crx sont des zips, juste renommer l'extension en .Zip) pour obtenir le CSS et le HTML à l'intérieur ou nous pouvons trouver un moyen pour moi de vous l'envoyer. Notez que j'injecte le HTML et le CSS dans la page.

J'écris habituellement le CSS et le HTML, puis je minimise à la fois ( http://cssminifier.com/ et 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 mis dans le code d'extension, comme vous le souhaitez que ce soit aussi rapide que possible, étant donné que c'est une extension, pas une page Web bien sûr.

Donc, si cela 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 CSS minimisé/échappé dont vous avez besoin, en remplaçant les éléments dans cssstr et 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;
        }
    });    
});

Notes

Notez également que jQuery est automatiquement disponible dans la portée de l'extension, vous pouvez donc l'obtenir gratuitement avec les API. Et, si vous souhaitez injecter dans un iframe, assurez-vous de ne pas oublier d'activer les iframes dans les paramètres.

Pour le site de support communautaire: https://getsatisfaction.com/crossrider

Ils sont très réactifs et peuvent vous aider lorsque vous rencontrez des problèmes.

0
hoonto