Tworzenie rozszerzeń do Chrome podstawy

W artykule przedstawię na prostym przykładzie jak w 5 minut stworzyć dodatek do Chrome.

Stwórz na dysku katalog o dowolnej nazwie. Wewnątrz utwórz katalogi js i images na skrypty javascript i obrazki oraz pliki popup.html i manifest.json. Jednym z najważniejszych plików jest manifest.json - bez niego struktura nie mogłaby być dodatkiem do Chrome. Przykładowa zawartość pliku manifestu poniżej.

{
  "manifest_version": 2,

  "name": "Nazwa dodatku",
  "description": "Opis dodatku.",
  "version": "1.0",

  "permissions": [
    "tabs"
  ],
  "browser_action": {
    "default_icon": "images/menu.png",
    "default_popup": "popup.html"
  }
}

Wersja manifestu oznacza tylko, że będziemy korzystać z nowszej wersji api. Podajemy ponadto nazwę, opis i numer wersji dodatku. Klucz permissions oznacza uprawnienia jakie nasz dodatek będzie potrzebował (tutaj dostęp do api zakładek). Ważną częścią są tutaj browser_action. default_icon oznacza ikonę dodatku widoczną na pasku. Natomiast default_popup określa plik html z zawartością popupu pojawiającego się po kliknięciu na ikonę dodatku. Przejdźmy teraz do kolejnych plików. Zawartość pliku popup.html jest bardzo prosta.

<!DOCTYPE html>
<html>
	<head>
		<script src="js/jquery.js"></script>
		<script src="js/panel.js"></script>
	</head>
	<body>
		<button id="new_tab">New tab</button>
	</body>
</html>

Jest to zwykły dokument html załączający dwa pliki javascript (jquery i panel.js) oraz wyświetlający button.
Korzystając z api Chrome sprawimy aby po kliknięciu na ten przycisk otwierał się nowy pusty tab w przeglądarce. Do tego wystarczy w pliku panel.js napisać coś takiego.

$(function(){
	$('#new_tab').click(function(){
		chrome.tabs.create({});
	});
});

W celu uruchomienia i przetestowania naszego dodatku należy w Chrome wejść do Narzędzia > Rozszerzenia. Zaznaczyć checkbox "Tryb programisty", kliknąć na przycisk "Wczytaj rozszerzenie bez pakietu" i wybrać folder z naszym dodatkiem. To wszystko :).
Wiele dodatków udostępnia swoje opcje w menu kontekstowym. Dodamy do naszego dodatku tę funkcjonalność. W tym celu musimy w pliku manifest.json dopisać dodatkowe uprawnienie "contextMenus" oraz dodatkowy skrypt uruchamiany w tle. Obecny plik manifest wygląda następująco.

{
  "manifest_version": 2,

  "name": "TabCloud",
  "description": "TabCloud addon.",
  "version": "1.0",

  "permissions": [
    "tabs",
	"contextMenus"
  ],
  "background": {
    "persistent": false,
    "scripts": ["js/background.js"]
  },
  "browser_action": {
    "default_icon": "images/menu.png",
    "default_popup": "popup.html"
  }
}

Oczywiście musimy również stworzyć plik background.js o następującej zawartości.

chrome.runtime.onInstalled.addListener(function() {
	chrome.contextMenus.create({"title": "Menu item 1", "id": "parent"});
	chrome.contextMenus.create({"title": "Menu item 2", "id": "parent2"});
	chrome.contextMenus.create({"title": "Menu item 1a", "parentId": "parent", "id": "child1"});
	chrome.contextMenus.create({"title": "Menu item 1b", "parentId": "parent", "id": "child2"});
});

chrome.contextMenus.onClicked.addListener(onClickHandler);

function onClickHandler(info, tab) {
	alert(info.menuItemId);
};

W zdarzeniu odpowiadającym instalacji dodatku za pomocą chrome.contextMenus.create dodajemy kolejne pozycje menu. Za obsługę klinięcia w pozycje menu odpowiada funkcja onClickHandler.
Aby przetestować działanie menu załaduj ponownie dodatek (CTRL+R) i kliknij prawym przyciskiem myszy wewnątrz dowolnej karty. Nasze menu powinno być widoczne po wybraniu nazwy dodatku.