Browser Extensions II:
Internet Explorer Add-Ons entwickeln

In diesem Beitrag werde ich einige Techniken zeigen wie man eine Browser Extension für den Microsoft Internet Explorer (alle Versionen vor Edge) entwickelt. Diese können mittels den verschiedensten .NET-Sprachen erstellt werden, die Code-Beispiele in diesem Blog-Beitrag sind in C# geschrieben. 

Wenn man eine Internet Explorer (Version IE9 – IE11) Erweiterung entwickelt, steht man vor einigen großen Herausforderungen, welche man als Programmierer meistern muss. Add-On’s (so werden Extensions bzw. Erweiterungen im IE genannt) werden mittels .NET-Sprachen und Visual Studio entwickelt. Man muss zum Beispiel auch einen eigenen Windows Installer erzeugen, was für die meisten Web-Entwickler schon eine neue Anforderung sein dürfte. Ich werde einfach einige Konzepte / Herausforderungen beschreiben, und wie ich dieses gelöst habe:

1. Broker App

Ein IE Add-On darf standardmäßig nicht auf die Festplatte schreiben – es steht also kein persistenter Speicher zur Verfügung. Aus diesem Grund muss man eine sogenannte „Broker-App“ entwickeln. Eine Broker-App wird mit den Rechten des Windows-Benutzers installiert, und darf auf gewisse Bereiche der Windows-Registry zugreifen (lesend und schreibend). Diese Broker-App kommuniziert über einen speziellen Nachrichten-Mechanismus mit dem Add-On. 

private void onDataReceived(object sender, AddinExpress.IE.Broker.ADXIEBrokerDataReceivedEventArgs e){    var request = e.RequestData as Hashtable;    string method = (string)request["Method"];    var response = new Hashtable();    if (method.Equals("ReadShops"))    {        //read shops        object shopsValue = Registry.GetValue(@"HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\LowRegistry\Varioous\Shops", "Shops", null);        if (shopsValue == null)        {            //empty -> does not exist            response.Add("result", "empty");        }        else        {            //return shops            response.Add("result", "ok");            response.Add("Shops", (String)shopsValue);        }    }    //save response (send back)    e.ResponseData = response;}

In diesem Fall wird ein Wert aus der Registry gelesen und dieser an die aufrufende Stelle zurück geliefert. Im folgenden noch der Code zum Aufruf bzw. senden/empfangen des Brokers. Hierbei wird vom Add-On das onBrokerStarted-Ereignis aufgerufen. Anschließend werden die Shops (wie in diesem Beispiel) geladen:

//broker service startedprivate void onBrokerStarted(object sender, EventArgs e){    //check if user already logged in    Hashtable hashtableOut = new Hashtable();    object response = new Hashtable();    //get shops    hashtableOut.Add("Method", "ReadShops");    object responseShops = new Hashtable();    SendDataToBroker(hashtableOut, out responseShops);    Hashtable responseHashTableShops = (Hashtable)responseShops;    if (((string)responseHashTableShops["result"]).Equals("ok"))    {        //store shops object        String shopsJSONString = (string)responseHashTableShops["Shops"];        shopsWithDomain = JsonConvert.DeserializeObject(shopsJSONString);    }}

2. Synchronisation

Im Unterschied zu Chrome, Safari, Firefox und Co. wird pro geöffneten Tab eine eigene Instanz des Add-Ons gestartet. Dies führt wiederum dazu, dass die verschiedenen Instanzen synchronisiert werden müssen. Wird zum Beispiel ein Button versteckt, sollte dieser natürlich in allen Instanzen versteckt werden. Dafür geht man hier auch wieder den Weg mittels eines Nachrichten-Mechanismus. Eine Instanz kann Nachrichten an alle anderen senden, und entsprechend darauf reagieren. 

3. DOM lesen

Um das DOM zu lesen (und auch zu manipulieren) wird das documentComplete-Ereignis verwendet. Weiters erhält man über das mshtml.HTMLDocument Zugriff auf das DOM der jeweiligen aktuell geladenen Website. 

private void documentComplete(object pDisp, string url){    if (url != null)    {            mshtml.HTMLDocument doc = this.HTMLDocument;            if (doc != null)            {                mshtml.IHTMLElementCollection elementCollection = doc.getElementsByName("fkn");                if (elementCollection != null)                {                    for (int i = 0; i < elementCollection.length; i++)                    {                        mshtml.IHTMLMetaElement fknElement = elementCollection.item(i, i) as mshtml.IHTMLMetaElement;                        if (fknElement != null)                        {                            string idElement = fknElement.content.ToString();                            if (idElement != null && idElement.Length >= 3)                            {                               .....                            }                        }                    }                }            }        }    }}

4. Setup-Projekt

Um eine IE-Add-On zu installieren, müssen gewisse Werte in die Windows-Registry geschrieben werden, damit das Add-On beim Internet-Explorer registriert wird. Hierfür habe ich die Visual Studio Erweiterung „Microsoft Visual Studio Installer Projects“ verwendet. Damit kann man definieren, welche Verzeichnisse/Registrierungs-Einträge etc. erstellt werden müssen. Für eine detaillierte Anleitung verweise ich auf die Dokumentation des Herstellers. Damit wird ein Windows-Installer erstellt (setup.exe) wie man diesen von vielen Windows-Anwendungen kennt.

5. Signieren

Damit das Add-On im Internet Explorer auch als vertrauenswürdig angezeigt wird, muss dieses mit einem ELV-Zertifikat zertifiziert werden. Dazu muss man im Visual Studio beim jeweiligen Projekt einfach auf „Signing Options“ klicken.

Hier noch eine kleine Ansicht des Add-On’s:

Browser Extensions II: Internet Explorer Add-Ons entwickeln

Weitere Beiträge zum Thema Extensions auf varioous:

Gerne können Sie uns auch eine individuelle Anfrage senden.

Wir entwickeln digitale Lösungen mit Leidenschaft

Warum wir das tun? Weil die Verwirklichung Ihrer Vision unser größter Anspruch und die schönste Anerkennung ist. Deshalb nehmen wir uns gerne ausreichend Zeit für die Realisierung Ihres digitalen Projekts.

Kontaktieren Sie uns, wir sind gerne für Ihre Fragen da:

Passend zu diesem Thema:

Interkulturelles Webdesign

Interkulturelles Webdesign

Abhängig davon in welcher Kultur wir leben und wie wir aufwachsen (Erziehung, Familie, Freunde), werden Wahrnehmung und Vorlieben beeinflusst. Auch da…

Das war das TYPO3camp München 2019

Das war das TYPO3camp München 2019

Vom 13. – 15. September fand das TYPO3camp 2019 in München statt und auch varioous war vor Ort um sich mit anderen TYPO3-Entwicklern und Unternehmen z…

Richter Pharma Web4Partners

Richter Pharma Web4Partners

Um den Austausch von Marketing-Material und Bilder sowie die Verbreitung von Informationen für Vertriebspartner von Richter Pharma einfacher und schne…