Per Drag n Drop zum Localhost

Wer, so wie ich, mit Goggle Chrome und XAMPP arbeitet, hat manchmal das Problem, das zum Beispiel PHP Dateien nicht einfach so in den Browser gezogen werden können, da Chrome dies dann als file:// anzeigt. So wird zum Beispiel aus „K:\xampp\htdocs\index.php“ im Browser „file:///K:/xampp/htdocs/index.php“.

Dieses „Problem“ kann man umgehen, indem man Chrome mal darüber informiert, welcher Pfad eigentlich der localhost ist.
Was aber mit Chromeeigenen Mitteln nicht möglich ist. Darum hab ich mal ein wenig gesucht was es So für Möglichkeiten gibt und hab hier einen „Umleitung“ für dieses Problem gebaut.
Was soll behoben werden:

  • Lokale Dateien aus dem XAMPP-htdocs-Ordner sollen in den Browser gezogen werden können und ausgeführt werden
  • Lokale Dateien aus dem XAMPP-htdocs-Ordner sollen per „Öffnen mit“ im Browser geöffnet und ausgeführt werden
  • Lokale Dateien aus dem XAMPP-htdocs-Ordner, die Bereits mit Chrome Verknüpft sind, sollen im Browser geöffnet und ausgeführt werden (bezieht sich Hauptsächlich auf HTML-Dateien)
  • Andere Dateien sollen wie gehabt angezeigt werden

Was wir brauchen

Chrome muss in den Erweiterungen (chrome://extensions) auf Entwicklermodus gestellt sein und
Wir benötigen einen leeren Ordner, wo wir die Extension erzeugen.
Innerhalb dieses Ordners werden dann die folgenden Dateien angelegt.

Die Dateien

background.html
chrometoxamppevent.js
manifest.json
chrometoxampp.js

manifest.json

Diese Datei wird im Hintergrund von Chrome verwendet, und ist sozusagen die Einstellungs/Rechteanfrage.
Hier wird alles definiert, was im Hintergrund aufgerufen werden soll.
Der inhalt ist dabei in JSON-Format geschrieben.

Wichtigster Inhalt ist hierbei:
Background (die Hintergrundseite die von Chrome ausgeführt wird),
„manifest_version“, die Version dieser JSON-Datei
„content_scripts“, welche Scripte wann ausgeführt werden
„permissions“ , welche Rechte das Script benötigt.

Wir benötigen nur Berechtigungen für Tabs und das Script chrometoxampp.js soll nur ausgeführt werden wenn file://*/* als URL zutrifft.

{
  "name": "Localhost to Xampp",
  "version": "0.1",
  "description": "prüft urls nach xampp-Pfad und leitet auf Localhost um.",
  "background": {
    "page":"background.html"
  },
  "manifest_version": 2,
  "content_scripts": [
    {
      "matches": ["file://*/*"],
      "js": ["chrometoxampp.js"]
    }
  ],
  "permissions": ["tabs"]
}

background.html

Klein aber fein, hier wird letztendlich das nachher eigentliche Script eingebunden.

<html>
    <script src="chrometoxamppevent.js"></script>
</html>

chrometoxamppevent.js

Hier werden die Events mit Chrome verknüpft.
In diesem Fall soll bei einem Request der Tab geupdatet werden.

chrome.extension.onRequest.addListener(function(request, sender) {
    chrome.tabs.update(sender.tab.id, {url: request.redirect});
});

chrometoxampp.js

Diese Datei prüft nun die Urls und gibt dem Tab das Update, wenn die entsprechende Prüfung erfolgreich beendet wurde.

Da mein Xampp Fest installiert ist, hab ich die simpelste REGEX-Formel verwendet, man kann natürlich noch genauer prüfen und nur PHP-Dateien umleiten.

// Übernahme der aktuellen Url
var subject = window.location.href,
/*
* lokaler Pfad zum Xamppverzeichniss
* (bei mir steht in der Adressleiste dann)
* file:///K:/xampp/htdocs/...
* hier muss an das Escapen gedacht werden und
* alles nach dem htdocs/ muss übernommen werden
*/
match = subject.match(/^file:\/\/\/K:\/xampp\/htdocs\/(.*)$/i);
// wenn was gefunden wurde
if (match != null) {
  // das Ergebnis an die URL localhost ranhängen und umleiten
  chrome.extension.sendRequest(
    {
      redirect: "http://localhost/"+match[1]
    }
  );
}

Nun muss man nur noch Chrome Davon überzeugen, dass dieses Script gut ist.
Um manuell Scripte zu installieren, muss man in den Erweiterungen (chrome://extensions) nur noch auf „Entpackte Erweiterungen laden…“ gehen und den Ordner auswählen. Dann sollte direkt das Script in den Erweiterungen auftauchten.
Hier muss noch darauf geachtet werden, das „Zugriff auf Datei-URLs zulassen“ aktiviert ist.
Möchte man nachträglich im Script was ändern, braucht man nur auf Aktualisieren klicken.

Nun einfach mal eine Datei aus dem XAMPP-Ordner in den Browser ziehen und hoffen, das alles umleitet. (Sollte aber).
Bei Problemen : Facebook : Webdesignersupport Offtopic

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

You may use these HTML tags and attributes

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

But, it will became readable code