Budowa własnego rozszerzenia do Chrome

Jedną z najpopularniejszych, a zarazem szybkich i dostosowanych do potrzeb programistów przeglądarek internetowych jest bez wątpienia Chrome, który oprócz bardzo wielu rozszerzeń udostępnia API, za pomocą którego można budować własne rozszerzenia.

Jeśli chcesz rozpocząć programowanie własnych rozwiązań, należy zapoznać się z tutorialem przedstawiającym budowę od podstaw prostego rozszerzenie do Chrome. Na stronie dla programistów wykorzystujących API przeglądarki Chrome znajduje się też wiele przykładów użycia API, w tym jeden z ciekawszych do dalszej rozbudowy – Native Messaging Example. Wspomniany przykład przedstawia jak z poziomu przeglądarki internetowej uruchomić aplikacją natywną zainstalowaną w systemie operacyjnym komputera, na który przeglądarka jest używana. W tym celu po pobraniu archiwum z przykładem, a następnie jego rozpakowaniu należy w trybie widoku rozszerzeń włączyć tryb programisty, a następnie załadować katalog z przykładem za pomocą przycisku wczytaj rozszerzenie bez pakietu.

Przed przystąpieniem do budowy rozszerzenia wykorzystującego wspomniany przykład, warto zapoznać się ze szczegółami dotyczącymi komunikacji Chrome z natywnymi aplikacjami. Wykorzystując to, co przedstawiono w tutorialu, a także przykład z uruchamianiem innych programów przez przeglądarkę, otrzymujemy możliwość budowania ciekawych i praktycznych rozwiązań np. wykorzystujących URL witryny aktualnie przeglądanej. Przykładowo w celu dopisania do pliku przechowywanego lokalnie adresu URL przeglądanych witryn do szkieletu kodu z tutorialu należałoby dodać fragment kodu, który łączy się z aplikację i wysyła adres URL w formacie JSON:

function connect() {
  var hostName = "com.sebastianczech.native.host";
  port = chrome.runtime.connectNative(hostName);
  port.onMessage.addListener(onNativeMessage);
  port.onDisconnect.addListener(onDisconnected);
}

function sendNativeMessage(url) {
  message = {"text": url};
  port.postMessage(message);
}

... 

document.addEventListener('DOMContentLoaded', function() {
  getCurrentTabUrl(function(url) {
    // connect to native messaging host
    connect();

    // send URL to app
    sendNativeMessage(url);
  });
});

Następnie w kodzie aplikacji uruchamianej lokalnie należy można w metodzie processMessages umieścić wywołanie własnej komendy np. dopisującej do pliku przechowywanego lokalnie adres URL przeglądanej witryny:

def processMessages(self):
...
        url = json.loads(message)
        os.chdir("/Users/seba/Documents/");
        os.environ["PATH"] += os.pathsep + "/usr/local/bin/";
        os.system("echo " + url['text'] + " >> lista_url_do_zapamietania.txt")

Oczywiście w tym przykładzie operacja wykonana przez aplikację uruchomioną przez przeglądarkę jest bardzo prosta, a zarazem mało praktyczna, niemniej jednak przykład obrazuje jak wiele możliwości i nowych funkcji można do Chrome dodać i wykorzystać dla siebie 🙂