Habe eben schnell für www.bildschirmarbeiter.com eine Google Chrome App gebastelt.

Die fertige App könnt ihr hier euch hier herunterladen.

Wenn ihr am Quellcode interessiert seit könnt ihr den hier laden.

Die APP gibt es leider nicht im Chrome Shop da ich keine Google Developer Account habe. Durch das Fehlen einer Kreditkarte werde ich mir wohl vorerst auch keinen zulegen können.

Wenn ihr das Archiv entpackt habt, seht ihre eine Datei namens baapp.crx. Die lasst ihr einfach per Drag&Drop in euren Google Chrome Browser fallen und bestätigt noch die Meldung mit weiter - schon ist die App installiert.

Viel Spass und Gruß an BA.

Diesen roten, kleinen, traurig dreinblickenden Kerl kennt doch bestimmt jeder. Auch wenn er so traurig schaut hat doch niemand Mitleid mit ihm. Die Situation in der dieser rote Bub regelmäßig erscheint kennt auch jeder. Man will sich ein Video auf Youtube anschauen aber die allseits beliebte GEMA macht einem ein Strich durch die Rechnung.

Klar, man kann diese Sperren umgehen. Man könnte sich also einen der unzähligen ausländischen Proxy Servern in den Browser hacken und dann das Lied über diesen Server abrufen. Auf die Dauer ist das keine effiziente Lösung. Vor allem weil diese Proxy Server meist total lahm sind. Ist erstmal ein public Proxy im Browser eingetragen wird das Surfen zur Qual.

Vor zwei oder drei Wochen fand ich aber endlich eine super Lösung für so verwöhnte Bangerts wie mich - Das Browserplugin ProxTube(Chrome / Firefox).

Schluss mit beschränkter Bandbreite durch langsame Proxies. Schluss mit dem ständigen hin und her - Proxy an/Proxy aus. Sobald man ein Video öffnet, bei dem die Musiknaziraubmordgesellschaft GEMA die Musikrechte nicht eingeräumt hat, springt ProxTube ein. Nach paar Sekunden Wartezeit ist das Video entsperrt, ohne das man auch nur einen Finger krumm machen muss. Und das beste daran, es ist legal. Jedenfalls noch - ich sag nur ACTA.

Bisher das beste Anti-GEMA-Youtube-Plugin das ich gesehen habe. Probiert es aus. Und ein Hoch auf die GEMA.

Da ich gerade bei der GEMA bin, hier ein nettes Video von dem Andreas, dem Sprecher von Sempervideo ;)

Um 14 Uhr war das Treffen des Orgateams und deren Helfern am HBF Vorplatz. Um 15 Uhr waren dann knappe 1000 Leute auf dem Vorplatz. Kurze Ansprache, es werden immer mehr Menschen, und irgendwann ging es los. Zwischendrin wurden ein paar Nazis ausgemacht und durch Nazis raus rufe von der Demo gejagt. Auch die Polizei war hinterher das diese bunte Demonstration Braunfrei bleibt. Echt Super. Angekommen am Schillerplatz gab es eine kleine Abschlusskundgebung. 750 Menschen hatten wir gezählt, wobei viele unserer Zählung entgangen sind.

Hier ein paar Impressionen. Ein besonderer Dank geht an Casper, die anderen Ordner und das Ficko-Magazin (UNBEDINGT BESUCHEN)

— layout: post title: Google Chrome Extension selbstgemacht - Teil II - Eigener Proxyswitcher wordpress_id: 2388 wordpress_url: http://zementente.github.com/?p=2388 date: 2012-02-10 18:25:19 +01:00 comments: true categories: [coding, browser] — Im ersten Teil habe ich eine Hosted App erstellt. In diesem Teil erstelle ich eine Packaged App. Worin der Unterschied besteht kann man im ersten Teil nachlesen. Vom Aufbau des Manifests unterscheidet sich diese beiden Arten kaum.

Bevor ich angefangen habe eine App zu schreiben habe ich mir erstmal die Frage gestellt, was könnte ich gebrauchen. Ich kam auf die Idee einen kleinen fix zu bedienen Proxy Switch zu programmieren. Ich entschied mich für die Steuerung über das von überall erreichbare Kontextmenü. Vor der Proxy API musste ich mich also erstmal mit der contextMenu API bekannt machen. Zum Glück hat Google gut dokumentierte und easy-to-use APIs(Nicht wie zum Beispiel Microsoft) Vorrab aber erst mal die fertige Manifest.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

"name": "Tools",
"description": "Anwendungsbeispiel verschiedener Google Chrome APIs.",
"version": "0.1",
"background_page": "background.html",
"permissions":
    [
        "contextMenus",
        "tabs",
        "notifications",
        "proxy"
    ],
"icons":
    {
    "16": "loewenapp_16.png",
        "48": "loewenapp_48.png",
        "128": "loewenapp_128.png"
        }
}

Das Kontextmenü

Voraussetzung: “permissions”:[“contextMenus”]

Ein Kontextmenü ist schnell gezaubert. Der erste praktische Schritt ist das erstellen eines Javascripts(menu.js) Natürlich ist jedes denkbare Kontextmenü möglich. Für mehr Information hilft auch hier ein Blick in die Chrome Developer Dokumentation.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var staticMenu1 =
    {
        "title": "Proxy an!",
        "contexts":["all", "page", "link"],
        "onclick":function(info, tab){proxy_an()}
    };

var staticMenu2 =
    {
        "title":"Proxy aus!",
        "contexts":["all", "page", "link"],
        "onclick":function(info, tab){proxy_aus()}
    };
var id=chrome.contextMenus.create(staticMenu1);
var id=chrome.contextMenus.create(staticMenu2);

Eigentlich ist es recht selbsterklärend, trotzdem ein paar Worte dazu. staticMenu1 beinhaltet die Attribute für die Klasse chrome.contextMenus(). Title gibt den Anzeigename des Kontextmenüfeldes an. Mit dem Array contextes legt man fest an welchen Stellen(z.B.: Links, Videos, Komplette Page,…) das Kontextmenü bei einen Rechtsklick sichtbar ist. Ãœber die Eigenschaft onclick kann festgelegt werden was bei einem Klick auf den jeweiligen Unterpunkt geschehen soll. Der Name Tools generiert sich aus dem Appname in der Manifest Datei. Das Menü wird dann schlussendlich mit chrome.contextMenus.create() erstellt.

Ein Icon im Menü wird auch nur dann angezeigt wenn ein 16 x 16 Pixel Großes PNG in der Manifestdatei angegeben wurde(siehe erster Teil). Soweit, so einfach. ATM passiert noch nichts wenn man Proxy an! oder Proxy aus! klickt, das wollen wir ändern. Ich nehme mir also wieder die Google API Doku zur Hand und lese nach. Hm, easy ;)

Proxy API

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

var proxConSocks =
	{
		mode: "fixed_servers",
		rules:
			{
			proxyForHttp:
			{
				scheme: "socks4",
				host: "127.0.0.1",
				port: 9999
			},	
			bypassList:[
			"http://intranet"
			]
			}
	};
	
var notification = webkitNotifications.createNotification
	(
		"loewenapp_48.png",
		"Loewenherz Notification",
		"Netzwerkeinstellungen wurden modifiziert!"
	);
	
//Funktionsteil
function proxy_aus()
	{
		chrome.proxy.settings.set({"value: {"mode":"direct"}, scope: "regular"},function(){});
		notification.show();
	};
	
function proxy_an() 
	{
		chrome.proxy.settings.set({value: proxConSocks, scope: "regular"},function(){});
		notification.show();
	};

• mode: Gibt an auf welche Art die Verbindung aufgenommen werden soll(direkt, über einen fixen Server,…)
• rules: Legt Protokoll, Server und Port fest
• scheme(String): Legt Protokoll fest
• host(String): Legt den Proxyserver fest
• port(Int): Legt den Port auf dem der Proxy lauscht fest
• bypasslist(Array): Liste mit Ausnahmen
• scope: Gibt an in welchen Rahmen(Browsermode, Persistenz) die Einstellungen angewendet werden sollen. Mehr dafür in der Types Doku

Und weil alle guten Dinge drei sind kommt jetzt noch die….

Desktop Notification API

Voraussetzung: “permissions”:[“contextMenus”] oder window.webkitNotifications.requestPermission()

Es gibt zwei Möglichkeiten die Notifications zu realisieren. Zum einen die Chrome Standard Notification und zum anderen Custom Notifications, bestehend aus HTML und CSS. Ich habe mich für den Chrome Standard entschieden. Der schaut gut aus und ist einfach zu bedienen. Meine Notifications sollen dann aufpoppen wenn mein Plugin auf die Netzwerkeinstellungen zugegriffen hat. Eine super Anleitung zu den Custom Notifications und zu window.webkitNotifications.requestPermission() gibt es hier.

1
2
3
4
5
6

var notification = webkitNotifications.createNotification
(	
        "loewenapp_48.png",
        "Loewenherz Notification",
        "Netzwerkeinstellungen wurden modifiziert!"
    );

Nun kann ich mit notification.showdie Notification auslösen. Zusätzlich zu den erwähnte Funktionen habe ich noch ein paar dynamisch generierte Kontextmenüeinträge in die “fertige” App eingebaut. Hier nochmal die kompletten Sourcecodes:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

//Beispiel für die Verwendung verschiedene Google Chrome APIs (contextMenu, Proxy, Windows...)
//Erstellt von Carsten(loewenherz.geekhost.de)
//Der Quelltext steht unter der Creative Commons Licence 

//Referenzen:
//http://code.google.com/chrome/extensions/api_index.html
//http://stackoverflow.com/questions/8730065/simple-custom-chrome-proxy-extension
//http://www.webdesign-referenz.de/html_javascript.shtml
//http://code.google.com/chrome/extensions/notifications.html

//Deklarationsteil
var staticMenu1 =
    {
        "title": "Proxy an!",
        "contexts":["all", "page", "link"],
        "onclick":function(info, tab){proxy_an()}
    };

var staticMenu2 =
    {
        "title":"Proxy aus!",
        "contexts":["all", "page", "link"],
        "onclick":function(info, tab){proxy_aus()}
    };

var dynamischesMenu1=[
    {
        "title": "JavaScript Alert",
        "action":function(info,tab){alert(info.selectionText);}
    },

    {
        "title":"Suche in Wikipedia",
        "action":function(info,tab){chrome.tabs.create({"url":"http://de.wikipedia.org/w/index.php?title=Spezial:Suche&search="+info.selectionText});}
    }//,

//  {
        //weitere automatisch generierte Kontextmenüeinträge die contextes: selection benutzen
        //z.B. Suchen auf Wikipedia, Youtube, Google....
//  }

    ];

var proxConSocks =
    {
        mode: "fixed_servers",
        rules:
            {
            proxyForHttp:
            {
                scheme: "socks4",
                host: "127.0.0.1",
                port: 9999
            },
            bypassList:[
            "http://intranet"
            ]
            }
    };

var notification = webkitNotifications.createNotification
    (
        "loewenapp_48.png",
        "Loewenherz Notification",
        "Netzwerkeinstellungen wurden modifiziert!"
    );

//Funktionsteil
function proxy_aus()
    {
        chrome.proxy.settings.set({value: {"mode":"direct"}, scope: "regular"},function(){});
        notification.show();
    };

function proxy_an()
    {
        chrome.proxy.settings.set({value: proxConSocks, scope: "regular"},function(){});
        notification.show();
    };

//Programmteil
for(var i=0;i<dynamischesMenu1.length;i++)
    {
        var a=dynamischesMenu1[i];
        var id=chrome.contextMenus.create({"title": a.title, "contexts":["selection"],"onclick": a.action});
    }

var id=chrome.contextMenus.create(staticMenu1);
var id=chrome.contextMenus.create(staticMenu2);

1

<script src="menu.js"></script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

{
"name": "Tools",
"description": "Anwendungsbeispiel verschiedener Google Chrome APIs.",
"version": "0.1",
"background_page": "background.html",
"permissions":
    [
        "contextMenus",
        "tabs",
        "notifications",
        "proxy"
    ],
"icons":
    {
        "16": "loewenapp_16.png",
        "48": "loewenapp_48.png",
        "128": "loewenapp_128.png"
    }
}

Viel Spaß damit. Verstehen, verändern, erweitern ist ausdrücklich(unter Berücksichtigung der CC-Lizenz) erwünscht.

Anmerkung, ich bin mir sicher das ich so einiges Standard was JS angeht mit meinem Code missachte, dafür ein kurzes sorry.

— layout: post title: Google Chrome Hosted App Extension selbstgemacht wordpress_id: 2367 wordpress_url: http://zementente.github.com/?p=2367 date: 2012-02-08 20:57:17 +01:00 comments: true categories: [coding, browser] — Es gibt zwei Arten von Chrome Extensions, die Hosted Apps und die Packaged Apps. Der wesentliche unterschied besteht darin das Hosted Apps quasi nur ein Wrapper für eine andere Webseite/Server/Dienst sind, wohingegen Packaged Apps, eine vollwertige Browsererweiterung mit eigenem Code sind(z.B HTML,CSS,JS…)

Ich werde euch hier das Erstellen einer einfachen Hosted App zeigen. Die Voraussetzungen für eine Hosted App sind einfach. Ein Manifest in JSON und ein Icon  im .PNG Format mit der Größe 128 x 128 Pixel.

Zuerst erstelle ich mir ein Arbeitsverzeichnis in dem ich die Quelldateien ablegen: C:\ChromeDev\APPS\lionapp

Als Icon benutze ich diesen Loewenherz Schild. Mit Paint.net habe ich den Schild auf gewünschte Größe geschrumpft und den Hintergrund transparent gemacht. Wenn man Lust hat, kann man im selben Atemzug noch eine Favicon(png,18x18) und das Icon für den Chrome Store(png,48x48) erstellen, ist aber optional. Ich lege die fertigen Icons unter lionapp\loewenapp_xxx.png ab.

Kommen wir zum Manifest. Bei Google Codes gibt es ein Beispiel für manifest Dateien. Viele Optionen sind Optional und Nützlich - lesen lohnt sich daher auf jeden Fall. Die Manifest Datei muss manifest.json heißen und im selben Verzeichnis liegen wie die Icon(s) auch. Eine JSON-Datei muss in UTF-8 abgespeichert werden, darauf achten.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

{
"name": "lionapp",
"version": "0.1",
"description": "Meine erste Hosted App für Google Chrome",

"icons": {
          "16": "loewenapp_16.png",
          "48": "loewenapp_48.png",
          "128": "loewenapp_128.png"
          },

"app":    {
          "urls": [
            "http://loewenherz.geekhost.de"
                  ],

"launch": {
          "web_url": "http://loewenherz.geekhost.de"
          }
}
}

Voila. Le fin. Um die App zu testen, öffne ich das Extensionmenü und aktiviere den Entwicklermodus. Jetzt kann ich über den Button Entpackte Erweiterungen laden… den Ordner /lionapp laden. Schwupp ist die App installiert und erscheint auf eurem “Homescreen”

Wenn ihr die App im Chrome Store veröffentlichen wollt, braucht ihr zunächst ein Google Development Account. Der kostet 5 Dollar und kann nur per Kreditkarte bezahlt werden. Finde ich persönlich bisschen schade und habe dann darauf verzichtet. Nichts desto trotz kann man die Anwendung packen und privat zum Download anbieten. Um die Datei als Chrome Extension zu packen, gibt es im Chrome Extension Menu den Button Erweiterung packen. Dort einfach das Verzeichnis der App angeben. Optional ist die PEM Datei(Keyfile). Diese Datei dient dazu das nur der Besitzer dieser Datei  später auch Updates(Versionen) der App bereitstellen kann.

Meine App könnte ihr hier runterladen. Nächstes mal stelle ich euch dann meine erste Packaged App vor.

Da es in Mainz noch an nötigen Mitteln(Boxen, Strom, etc…) sowie Personal(Ordner) für die ACTA Demo fehlt, starte ich hier einen kleinen Aufruf, vielleicht erreiche ich auf diesem Wege jemand der weiterhelfen will und kann. Habt keine Angst euch zu melden. Das PAD für die Demo Mainz erreicht ihr hier.

Alle Infos gibt es dort. Auch eine eMail und ein IRC Chat(leider fast nie besucht)

Wenn ihr Kontakt zu mir Aufnehmen wollt(z.B. falls ihr Ordner werden wollt, aber nicht wisst was man als Ordner macht) könnt ihr das unter: MAILADRESSE ENTFERNT Handynummer gibt es per eMail. <h2 style=”text-align: center;”>In diesem Sinne! STOP ACTA </h2>

Ich dachte eigentlich immer das ich mich nicht leicht manipulieren lassen, schließlich schaue ich im Supermarkt immer nach unten wo die günstigen Produkte stehen. Ich gehe absichtlich nicht den vorgeschriebenen Weg um mich nicht einwickeln zu lassen. Im Ikea fange ich von Hintern an (wieso auch immer) Ich schaue wenig bis gar kein Fernsehen, erst recht nicht die “bösen” Sender. Ich lese viel (Online-)Zeitungen(Schwarze sowie Rote Blätter). Propagandafilme lassen mich kalt den ich durchschaue sie. Aber… Als ich den Kurzfilm “Schwarz wie Milch” das erstmal sah dachte ich WOW! Es gab ein paar Stellen an den ich zwar etwas schlucken musste(beispielweise der Vergleich von Irakkrieg und Milchkosten) trotzdem war ich fast durchgehend der Meinung des Sprechers. Immer wieder, mitten im Film, tauchten Buttons “Klicke für Hintergrundinfos” auf die ich aber gekonnt ignorierte, ich wollte ja den Film schauen. Um nicht zu spoilern, kann ich euch nicht mehr erzählen. Ich kann euch allen nur empfehlen den kostenlosen rund 5 Minuten langen Film anzuschauen. Hinterher MÜSST ihr unbedingt die Backstory lesen, sonst hat es nicht den gewünschten Effekt.

Fazit: Super Bachelorarbeit von der Hochschule Ulm welche mich mal wieder “wachgerüttelt” hat. Bleibt kritisch ;)

http://www.schwarzwiemilch.de/

Ich bekomm es derzeit einfach nicht gebacken auch nur irgendwas auf dem Blog hier zu machen. Daher gibts heute einfach mal nur ein Video mit dem “Most awesome 8-bit Song” Ich bewahre mir dann weiterhin meine Feierabend-“Faulheit” und wünsch euch was ;)

greetz

Da das ACTA-Abkommen nach über drei Jahren weitgehend ohne Diskussion aktuell einige Menschen interessiert, hab ich hier mal als Einstieg in das Thema ein paar Ressourcen zusammengestellt.

La Quadrature du Net: Say No to ACTA.

Bruno Kramm hat das Anonymous-Video „What is ACTA?“ übersetzt:

Schon etwas älter ist dieses Video von La Quadrature du Net: Robocopyright ACTA.

Lest euch schlau.

Informationen des Digitale Gesellschaft e.V.:

Mitmachen: Stoppt ACTA!

Broschüre: Warum ist ACTA so umstritten? (PDF)

ACTA: Kontaktiert den EU-Entwicklungsausschuss

Kommentar: Warum Acta in den Papierkorb gehört.

Mehr Informationen:

FFII: The world faces major challenges.

La Quadrature du Net – Dossier.

Ärzte ohne Grenzen: ACTA and Access to Medicines.

ACTA-Studie des EU-Parlaments (EN) (PDF)

EFF: We Have Every Right to Be Furious About ACTA.

Es gibt aktuell zwei größere internationale Petitionen zum Thema:

922.000 Menschen haben bisher bei Avaaz.org unterzeichnet: ACTA: Die neue Gefahr fürs Netz.

300.000 Menschen haben bisher bei Accessnow unterzeichnet: Just Say ‘No’ to ACTA.

Danke @ Netzpolitik

“Sie sind wieder da das kommunistische Känguru und der stoische Kleinkünstler! Auf der Jagd nach dem höchstverdächtigen Pinguin rasen sie durch die ganze Welt. Spektakuläre Enthüllungen! Skandale! Intrigen! Ein Mord, für den sich niemand interessiert! Eine Verschwörung auf niedrigster Ebene! Ein völlig abstruser Weltbeherrschungsplan! Mit Spaß, Spannung und Schnapspralinen …” Quelle: www.weltbild.de

Erst einmal sorry für die Werbung aber dieses Hörbuch muss ich einfach promoten. Es ist so herrlich böse, direkt und schizophrene. Marc-Uwe Kling ließt sein Buch “Das Känguru-Manifest”. Für knappe 11 Euro(Amazon) gehört es euch. Es gibt das ganze Buch auch auf YouTube. Mir  persönlich waren es die 11 Euro wert. Verdient hat es der Künstler allemal. Ein Kapitel(über Nazis und die bösen roten Boxhandschuhe) habe ich euch am Ende dieses Artikels in Form eines YouTube Videos verlinkt. Reinhören lohnt sich alle mal. Absolute Kaufempfehlung.