Jak na plugin do Google Chrome

Dnes si ukážeme jak na vlastní rozšíření do prohlížeče google chrome. Vytvoříme si jednoduchý no follow checker, který nám zvýrazní všechny odkazy na stránce s atributem nofollow

Na začátek bych měl zmínit ještě dokumentaci, kterou naleznete na: http://code.google.com/chrome/extensions/devguide.html

 

Tvorba konfiguračního souboru

Vytvoříme si novou složku se jménem např.: NoFollowChecker a v ní si vytvoříme konfigurační soubor manifest.json. Tento soubor by u nás mohl vypadat nějak takto:

{
    "name": "Highlight no follow links",
    "version": "1.0",
    "manifest_version": 2,
    "description": "Highlight no follow links.",
    "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["jQuery.js"]
    }
    ],    

    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },

    "permissions": [
        "tabs", "http://*/*", "https://*/*"
    ]
}

Nyní si rozebereme jednotlivé části:

  • name – název našeho pluginu
  • version – verze našeho pluginu
  • manifest_version – verze configu, aktuálně je stabilní verze 2
  • description – popis našeho pluginu
  • content_scripts -zde si můžeme nastavit scripty, které se nám napojí na stránky na kterých se aktuálně nacházíme, pomocí metody matches si můžeme nastavit konkrétní stránky ke kterým se bude script pouze připojovat. (pokud nastavíme http://*/* znamená to, že se připojí ke všem stránkám jejichž adresa začíná na http://)
  • browser_action – zde si můžeme nastavit ikonku, která se bude zobrazovat v panelu mezi pluginy a nastavíme si zde ještě cestu k html souboru, kde bude nadefinováno okno, které se zobrazí po kliku na tuto ikonku
  • premission – jsou oprávnění které náš plugin bude mít. http://*/* a https://*/* je nastavení, kde všude je možno plugin používat a tabs je objekt ke kterému budeme moci přistupovat.

 

Pop up okénko pro ovládání puginu

Konfiguraci máme a můžeme se pustit do tvorby pop up okénka, které se nám zobrazí po kliku na ikonku pluginu. Vytvoříme si nový soubor s názvem popup.html Ten by mohl vypadat například takto:

<!doctype html>
<html>
  <head>
    <title>No follow checker</title>
    <style>
      body {
        overflow-x:hidden;
      }
    </style>
    <script src="jQuery.js"></script>
    <script src="popup.js"></script>
  </head>
  <body>
  </body>
</html>

Zde není asi potřeba moc vysvětlení. Jedná se o klasický html dokument. Možná vás jen zarazilo, že je body prázdné. V něm samozřejmě bude tělo, jako u klasického webu. My zde potřebujeme pouze button pro zapnutí našeho zvýrazňovače. Já tento button vytvořím až pomocí  javascriptu, na který rovnou napojím event po kliknutí, který si napíšeme v popup.js. Ukážeme si, jak bude vypadat náš popup.js

$(function(){
    var button = $('<button>', {text: 'Show No follow', width: '150px', height: '50px'});

    button.appendTo('body');

    button.click( function(){
            chrome.tabs.executeScript(null, {file: "on.js"});
            window.close();
    });

});

Takže, co tu máme? Vidíme tu vytvoření nějakého buttonu pro následné spouštění zvýrazňovacího skriptu. Ten následně připojíme do body. A event, který se provede po kliku na tento button. V eventu zavoláme metodu executeScript, kde nastavíme cestu na javascript, který se má po kliku vykonat a window.close(); zavřeme popup okno

 

Script pro zvýraznění no follow odkazů

Nyní nám zbývá poslední věc a to vytvoření scriptu  on.js. Zde využijeme toho, že jsme si v manifest.json nastavili jQuery a proto náš script bude již velice jednoduchý. Pomocí selektoru attr=“value“ vybereme všechny prvky, které mají rel=“nofollow“ a nastavíme jim nějaké css. script může tedy vypadat nějak takto:

$('[rel="nofollow"]').css({
    border:  'dashed 1px red',
    padding: '2px'
});

Celí tento script si můžete stáhnout zde: http://netemsvetem.cz/ke-stazeni/#NoFollowChecker

Označeno v Ostatní

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

*

Můžete používat následující HTML značky a atributy: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="">

O AUTOROVI BLOGU

Jmenuji se Jan Matoušek a jsem vývojář webových aplikacích.

Mé portfolio