best-code

jsCoder

Bei dem jsCoder handelt es sich um eine simple Erweiterung für den Chrome Browser die es ermöglicht einen Javascript Redirect so umzuwandeln das dieser in einem anderen JavaScript weiterverarbeitet werden kann.

window.html

Die window.html stellt die Oberfläche zur verfügung welche nach dem klick auf das Icon angezeigt wird.

<!DOCTYPE html>
<html lang="de">
<head>
  <title>jsCoder</title>
  <script src="window.js"></script>
</head>
<body>
<div id="head" style="margin:0;padding:0;border:none;background-color: #8ab7ff"><span style="margin:0 30px;font-size: large;">jsCoder</span></div>
<p>In dieses Textfeld bitte den original Redirekt einf&uuml;gen</p>
    <textarea name="input" id="input" cols="100" rows="10" draggable="true"></textarea>
<p>Diesen Code mit Strg+a->Strg+c kopieren und dann mit Strg+v ins Template einf&uuml;gen  <input type="submit" id="submit" name="submit" value="Transformieren"/> </p>
    <textarea name="output" id="output" cols="100" rows="10" disabled ></textarea>
</body>
</html>

window.js

In der window.js wird die Logik abgearbeitet, was in diesem fall nur einige reguläre expressions sind.

function entscripter () {
    var cleanscript = document.getElementById("input").value;
    cleanscript = cleanscript.replace(/\<scr\"\+\"ipt/g, "<scr"+"ipt");
    cleanscript = cleanscript.replace(/\<\/scr\"\+\"ipt>/g, "</scr"+"ipt>");
    cleanscript = cleanscript.replace(/\\"/g, "\"");
    cleanscript = cleanscript.replace(/\\'/g, "'");
    cleanscript = cleanscript.replace(/\s/g, " ");
    cleanscript = cleanscript.replace(/['"]/g, "\\$&");
    cleanscript = cleanscript.replace(/<script/ig, "<scr\"+\"ipt");
    cleanscript = cleanscript.replace(/<\/script>/ig, "</scr\"+\"ipt>");
    document.getElementById("output").innerText = cleanscript;
  return true;
}
window.onload = function() {
  document.getElementById('input').addEventListener('blur', entscripter);
  document.getElementById('submit').addEventListener('click', entscripter);
};

background.js

die background.js steuert das Fenster ein wenig und gibt Chrome unter anderem die zu verwendente Größe und ID bekannt

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('window.html', {
    'id':'jsCoder',
    'outerBounds': {
      'width': 900,
      'height': 750
    }
  });
});

manifest.json

Mit der manifest.json findet die eigentliche einbindung in den Chrome Store statt. Hier werden auch die einzubindenden Bilder definiert

{
  "name": "jsCoder",
  "description": "Wandelt ein JavaScript so um das es in DFP genuzt werden kann",
  "version": "0.1",
  "manifest_version": 2,
  "icons":{
    "16": "jsCoder16.png",
    "48": "jsCoder48.png",
    "128": "jsCoder128.png"
  },
  "browser_action": {
    "default_icon": "jsCText.png",
    "default_title": "JsCoder",
    "default_popup": "window.html"
  }
}

JSCoder als Chrome Extension