Erstmal braucht man eine Möglichkeit um den aktuellen Kurs zu erfahren.

Wenn es schon eine API gibt ist das natürlich praktisch. Durch Googeln von „Dogecoin API Price“ bekommt man einen nützlichen Beitrag auf Reddit. Dort gibt es dann auch gleich einen Link auf eine Web-API. Die kann man dann dank curl auch direkt von der Shell aus nutzen.

curl https://bter.com/api/1/ticker/doge_btc

gibt einem

{"result":"true","last":"0.00000184","high":"0.00000220","low":"0.00000180","avg":"0.00000195","sell":"0.00000185","buy":"0.00000182","vol_doge":395657724.31,"vol_btc":769.703167}%

zurück. Für ein Widget muss man sich die Ausgabe dann nur noch etwas formatieren. Ich hab das erstmal mit einem Ruby-Skript gemacht. Denn hier gibt es das coole Tool Rubular.

cmd = `curl -s http://bter.com/api/1/ticker/doge_btc`
regex = /last\":\"([0-9\.]+)/
cap = cmd.match(regex).captures
p cap[0]

das geht also alles soweit erstmal.

Jetzt ein Awesome-Wiget schreiben:

Erstmal braucht man eine rc.lua . Hier kann man jetzt an einer geeigneten stelle den Lua-Code für das Widget einfügen. Der sieht dann so aus:

--Create a Doge-Notifier, which shows the number of doge/BTC
mydogeStatus = widget({ type = "textbox" })
mydogeStatus.text ="Doge-Notifier init"

mydogeStatustimer = timer({ timeout = 5 })
mydogeStatustimer:add_signal("timeout", function()

mydogeStatus.text = "Doge/BTC: ".. awful.util.pread([[curl -s http://bter.com/api/1/ticker/doge_btc | grep -m 1 -ioP 'last":"([0-9\.]+)' | sed -e 's/last":"//g']])

end
)
mydogeStatustimer:start()

So das wars auch schon: Den Code hier drüber kann man einfach in seine rc.lua Copy-Pasten und dann noch das „mydogeStatus“ in die entsprechende Widgetbox (oft wibox) packen.

Im Code hier verwende ich kein Ruby mehr, dass war zu ineffizient (Warum eigentlich?). Egal bash-Magie tuts ja auch. Wenn man es klüger machen kann kannst du es ja mit einem Kommentar mitteilen (wäre sogar sehr nett).

Schluss mit API v1

Vor einigen Monaten kündigte Twitter das Ende der API v1 an, um diese durch die neuere Version 1.1 zu ersetzen. Da die Entwicklung an dem Social Counter Widget scheinbar eingeschlafen ist, gab es bisher kein Update des Plugins, sodass der Twitter Followercount falsch oder gar nicht berechnet wird.

In der Datei wp-content/plugins/social-counter-widget/social-counter-widget.php wird folgender Code verwendet:

if(trim($arr['twitterName'])) {
             $query = 'http://api.twitter.com/1/users/show.json?screen_name='.$arr['twitterName'];
            $result = json_decode(file_get_contents($query));
            $this->twitter = $result->followers_count;

Der Lösungsversuch

Leider reicht es nicht aus, das „/1/“ durch „/1.1/“ zu ersetzen, da Twitter sonst den API Aufruf mit einem Fehler quittiert. Man müsste nämlich OAuth-Tokens nutzen, um sich zu authentifizieren. Da wir diesen zusätzlichen Aufwand nicht treiben wollen, muss eine andere Lösung her.

Als Quick-Fix hatte ich daraufhin die Followeranzahl im Code festgeschrieben:

if(trim($arr['twitterName'])) { 
                $this->twitter = 43; //$result->followers_count;

Auf dauer war diese Lösung aber nicht optimal, da ich jedes Mal den Code neu anpassen musste, wenn ein neuer Follower dazu kam oder weg ging.

Die bessere Lösung

Nach ein wenig Googlen stieß ich auf einen Thread auf Stackoverflow.com, in dem genau mein Problem behandelt wurde. Dort wählte ich die verhältnismäßig einfachste Lösung aus, und änderte die Plugin-Klasse folgendermaßen ab:

Als erstes fügen wir eine neue private Funktion hinzu:

private function get_twitter_followers($url){
            $data = file_get_contents("http://query.yahooapis.com/v1/public/yql?q=SELECT%20*%20from%20html%20where%20url=%22".$url."%22%20AND%20xpath=%22//a[@class='js-nav']/strong%22&format=json"); // Opening the Query URL
            $data = json_decode($data); // Decoding the obtained JSON data
            $count = intval($data->query->results->strong[2]); // The count parsed from the JSON
            return $count; // Printing the count
    }

Danach passen wir die Twitter-Codestelle noch einmal an:

if(trim($arr['twitterName'])) {
            $followercount=$this->get_twitter_followers("http://twitter.com/".$arr['twitterName']);
            $this->twitter = (int) $followercount;

Die Funktion „get_twitter_followers“ macht nichts anderes, als die offizielle Twitterseite zu nutzen, um das Profil aufzurufen, und dann über XPATH den Wert des Followeranzahl-HTMl-Elements auszulesen.

Nachdem man die Änderungen vollzogen hat, muss man eine Weile warten, bis das Plugin die Statistiken erneuert. Dann sollte die Twitter-Followeranzahl auch wieder stimmen :)

Fazit

Man kann alles wieder in Ordnung bringen und muss nicht gleich das Plugin deinstallieren. Falls ihr zufällig Twitter nutzt, und der Post euch geholfen hat, dann folgt uns doch einfach ;)

Twitter-Profil: https://twitter.com/Blogbasis

~ Sebastian

Der Aufbau

Ein Chrome Addon besteht aus mindestens drei Dateien. Ein Icon in drei verschieden möglichen Größen (128×128, 64×64, 32×32 Pixel), einer Manifest-Datei, in welcher man Einstellungen festlegen kann, sowie einer HTML-Datei, welche sich öffnet, wenn man auf das Icon klickt.

Manifest.json

In der Manifest.json müssen die Einstellungen des Addons im JSON Format festgelegt werden. Darunter fallen Addon-Name, Addon-Version, Addon-Rechte, usw. Ein beispielhafter Aufbau:

{
    "manifest_version": 2,
    "name": "NoEmailInput",
    "description": "This extension changes the inputs of type 'email' into type 'text'",
    "version": "1.0",
    "permissions": [
        "<all_urls>",
        "storage"
    ],
    "content_scripts": [ {
        "matches": ["<all_urls>"],
        "js": [ "noemailinput.js" ],
        "run_at": "document_end"
    }],
    "icons": { "128": "noemailinput.png" },
    "browser_action": {
        "default_icon": "noemailinput.png",
        "default_popup": "popup.html"
    }
}

Dies ist die Manifest-Datei meines noEmailInput-Addons. Ich denke die ersten Einträge sind selbsterklärend und den Rest erläutere ich kurz.

    "permissions": [
        "<all_urls>",
        "storage"
    ],

Mit der ersten Option legen wir fest, dass mein Plugin auf alle möglichen URLs angewendet wird. Zudem benötige ich Zugriff auf den Datenspeicher, damit ich die späteren Einstellungen abspeichern kann.

    "content_scripts": [ {
        "matches": ["<all_urls>"],
        "js": [ "noemailinput.js" ],
        "run_at": "document_end"
    }],

Hier legen wir fest, was unser Addon an den aufgerufenen Seiten anstellen darf. Wieder dürfen alle URLs vom Addon manipuliert werden. Auf der Seite wird das von uns mitgelieferte „noemailinput.js“-Script am Ende des Dokuments ausgeführt.

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

Hier legen wir einmal unser Icon, welches im Browser als Addon angezeigt wird, sowie die HTML Datei, welche bei dessen Klick angezeigt wird, fest.

Popup.html

Wie ich schon sagte, ist dies die HTML Datei, welche beim Klick auf das Addon-Icon angezeigt wird.  Diese kann ganz „normal“ geschrieben werden, ohne irgendwelche Eigenarten beachten zu müssen. Bei mir sieht diese folgendermaßen aus:

<html>
    <head>
        <title>NoEmailInput plugin</title>
    </head>
    <body>
        <strong>NoEmailInput plugin</strong>
        <br />
        <input type="checkbox" id="noemailinputactive"><label for="active">Enabled?</label>
        <script src="popup.js"></script>
    </body>
</html>

Die HTML Seite ist nicht wirklich besonders, außer das ich im unteren Teil die popup.js einbinde.

Popup.js

In der Popup.js habe ich die Speicherung des Addon-Zustandes (aktiv/inaktiv) umgesetzt. Dafür benötigte ich die „storage“-Permission, damit die Angabe über mehrere Tabs bzw. Sessions festgehalten werden kann. Um die Speicherungen/Wiederherstellungen zu nutzen, kann man auf die API von Chrome zurückgreifen.

var checkelem = document.getElementById("noemailinputactive")

//wait for changes
checkelem.addEventListener('change',changestate,false)

//initial state
window.onload = loadstate

//change state
function changestate() {
    enabled = checkelem.checked;
    savestate(enabled);
}

//load state
function loadstate() {

    chrome.storage.sync.get("noemailinputstate", function(items) {
                   enabled = items['noemailinputstate'];
                   checkelem.checked = enabled;
     });

}

//save state
function savestate(state) {

    chrome.storage.sync.set({'noemailinputstate':state}, function() { })

}

noemailinput.js

Diese letzte Datei wird in jede aufgerufene Seite „eingebaut“ und ausgeführt. Dort passiert der eigentliche Teil des Addons. Mein Addon wurde dazu entwickelt Eingabefelder vom Typ „email“ in den Typ „text“ umzuwandeln, damit der Browser beim Abschicken des Formulares nicht meckert, ich hätte eine ungültige Email eingegeben. Den entsprechenden Quelltext führe ich nur aus, wenn das Häkchen gesetzt ist.

function loadstate() {

    chrome.storage.sync.get("noemailinputstate", function(items) {
        enabled = items['noemailinputstate'];
        if(enabled)
            wipeEmail()
    });

}

window.onload = loadstate;

function wipeEmail() {
        var inputelems = document.getElementsByTagName("input")

        for(var i = 0; i < inputelems.length; i++) {
            if (inputelems[i].type == "email") {
                inputelems[i].type = "text"
            }
        }
}

Ich hole mir alle Eingabefelder der Webseite in ein Array. Dieses Array gehe ich daraufhin durch und prüfe, ob das „type“-Attribut entsprechend den Wert „email“ enthält. Falls dies der Fall  ist, wird die Eigenschaft ersetzt.

Addon testen

Bevor man ein Addon veröffentlichen kann/möchte sollte man dieses ausgiebig testen. Chrome bzw. Chromium bietet dazu eine einfache Möglichkeit an. Zunächst legt man die benötigten Dateien in einen Ordner auf der Festplatte ab. Danach kann man das Addon als „ungepacktes Addon“ unter Chrome einbinden. Man geht dazu auf „Menü“->Tools->Erweiterungen; dort auf „Entpackte Erweiterung laden…“ und gibt den entsprechenden Ordner an.

Das Addon sollte nun installiert und bereits aktiv sein. Hat man am Quelltext was verändert, so kann man über den Link „Aktualisieren“ das Addon neu laden, um die Veränderungen wirksam zu machen.

Ist  die Testphase abgeschlossen, kann man über den Button „Erweiterung packen“ das entsprechende Archiv (.crx) erstellen lassen. Falls man sein Addon im „Addon-Market“ anbieten möchte, so muss man Google einmalig 5$ für den Entwicklerstatus zahlen.

Überblick & Fazit

Wie man leicht erkennen kann, benötigt man nur Kenntnisse in HTML bzw. Javascript um ein Addon für Chrome zu schreiben. Eine ausreichend dokumentierte API vereinfacht die Programmierung von umfangreichen Addons ungemein.

Den kompletten Quelltext, so wie ein fertig zur Installation gepacktes Archiv (.crx) meines NoEmailInputs findet ihr auf Github: https://github.com/gehaxelt/Chrome-NoEmailInput

~Sebastian

Die versuchte Installation

Zunächst versuchte ich den Sourcecode des DropBox-Clients zu kompilieren. Das funktionierte auch einwandfrei. Wer dies nachmachen möchte:

mkdir ~/dropbox
cd ~/dropbox
sudo apt-get install libnautilus-extension-dev python2.7-dev python-gobject-2-dev python-gtk2 python-docutils
wget "https://www.dropbox.com/download?dl=packages/nautilus-dropbox-1.4.0.tar.bz2"
tar xfv [Datei]
cd nautilus-dropbox-1.4.0/
./configure
make
sudo make install

Danach könnt ihr zwar „dropbox“ aufrufen, aber um es benutzen zu können, muss man erst den DropBox-Daemon installieren. Hier ist der Knackpunkt: Der Daemon ist proprietär und steht für ARM-Systeme leider nicht zur Verfügung, sodass ein Aufruf von „dropbox start -i“ mit der Fehlermeldung scheitert:

Error: Platform not supported

DropBoxl lässt sich über diesen Weg nicht nutzen. In diesem Fall müssen wir warten, bis DropBox einen Daemon für die entsprechende Architektur bereitstellt.

Der Lösungsweg über die API

DropBox bietet eine API an, sodass man auf gewisse Funktionen des Dienstes zugreifen kann. Ein schlauer Kopf hat damit einen Bash DropBox Client geschrieben. Damit kann man zwar nur grundlegende Funktionen, wie z.B. das Hochladen, Herunterladen, Löschen von einzelnen Dateien nutzen, doch das kann bereits ausreichen.

Installation und Konfiguration des DropBox Uploaders

Wir erstellen uns einen Ordner, klonen das Repository und führen das Script aus:

mkdir ~/dropbox
cd ~/dropbox
rm -rf *
git clone git@github.com:andreafabrizi/Dropbox-Uploader.git
./dropbox_uploader.sh

Nun müssen wir nur noch den Zugriff einrichten. Die Schritte dazu werden vom Script deutlich erklärt. Zusammengefasst müsst ihr auf die App-Developer Seite von Dropbox, um eine neue App zu erstellen. Die generierten Schlüssel müssen dann eingegeben werden. Zuletzt muss man noch den Oauth-Link bestätigen. Damit sollte die Konfiguration abgeschlossen werden.

Die Nutzung des DropBox Uploaders

Einmal den DropBox Uploader ausgeführt und man sieht, was man alles machen kann:

pi@raspberrypi ~/dropbox  ./dropbox_uploader.sh
Andrea Fabrizi - andrea.fabrizi@gmail.com
Usage: ./dropbox_uploader.sh COMMAND [PARAMETERS]...
Commands:
	 upload   [LOCAL_FILE]  <REMOTE_FILE>
	 download [REMOTE_FILE] <LOCAL_FILE>
	 delete   [REMOTE_FILE/REMOTE_DIR]
	 mkdir    [REMOTE_DIR]
	 list     <REMOTE_DIR>
	 share    [REMOTE_FILE]
	 info
	 unlink

For more info and examples, please see the README file.

Demnach kann man nur einzelne Dateien hoch- bzw. herunterladen. Ein Upload von Ordnern könnte man jedoch rekursiv durchführen. Man sollte jedoch beachten, dass in den Developer-ToS, welchen man zugestimmt hat, folgendes steht (1.3):

(b) We may limit the number of calls accepted by the API if we believe that the number of calls to the Dropbox API may negatively impact the Dropbox API or Dropbox service.

Demnach sollte man nicht zu viele API Aufrufe in einer geringen Zeit durchführen. Für die Synchronisation von einigen wichtigen Dateien reicht das Script jedoch vollkommen aus.

~Sebastian