Complete implementation

.jshintrc

@@ -2,7 +2,8 @@
   "predef": [
     "document",
     "window",
-    "-Promise"
+    "-Promise",
+    "C2LSettings"
   ],
   "browser": true,
   "boss": true,

Brocfile.js

@@ -17,4 +17,6 @@ var app = new EmberApp();
 // please specify an object with the list of modules as keys
 // along with the exports of each module as its value.
 
+app.import('vendor/c2l-settings.js');
+
 module.exports = app.toTree();

app/app.js

@@ -11,14 +11,7 @@ var App = Ember.Application.extend({
   Resolver: Resolver,
 
   ready: function () {
-    var doc = Ember.$(document);
-
-    var elts = doc.find('*');
-
-    alert('ELs:', elts.length);
-    elts.toArray().forEach(function (el) {
-      alert('EL: #' + el.toString());
-    });
+    console.log('READY');
   }
 });
 

app/controllers/application.js

@@ -0,0 +1,12 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  isActive: false,
+
+  isActiveChanged: Ember.observer('isActive', function () {
+    var active = this.get('isActive');
+    C2LSettings.setActive(active, function () {
+      console.log('C2L extension is now ' + (active ? 'enabled' : 'disabled'));
+    });
+  })
+});

app/index.html

@@ -10,7 +10,7 @@
     {{content-for 'head'}}
 
     <link rel="stylesheet" href="assets/vendor.css">
-    <link rel="stylesheet" href="assets/paf.css">
+    <link rel="stylesheet" href="assets/sbrowse.css">
 
     {{content-for 'head-footer'}}
   </head>

app/routes/application.js

@@ -0,0 +1,12 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+
+  setupController: function (controller, context) {
+    this._super(controller, context);
+
+    C2LSettings.loadActive(function (active) {
+      controller.set('isActive', active);
+    });
+  }
+});

app/styles/app.sass

@@ -0,0 +1,32 @@
+
+*
+  color: rgba(80, 80, 80, 1)
+
+body
+  margin: 0
+
+
+.c2l-main
+  min-width: 250px
+
+
+  .c2l-header
+    padding: 5px 10px 20px 10px
+    background-color: rgba(192, 192, 192, 0.2)
+    border-bottom: solid 1px rgba(192, 192, 192, 0.4)
+
+    h4
+      margin: 5px 0px;
+      font-size: 120%
+
+    .c2l-legend
+      font-style: italic
+      font-size: 90%
+      color: rgba(128, 128, 128, 1)
+      font-weight: 200;
+
+
+  .c2l-settings
+    padding: 10px
+
+    .c2l-active

app/templates/application.hbs

@@ -1,4 +1,18 @@
 
-<h4>SBrOwse</h4>
+<div class="c2l-header">
+  <h4>C2L</h4>
+  <div class="c2l-legend">
+    Cyrillic to Latin alphabet transcoding
+  </div>
+</div>
+
+<div class="c2l-settings">
+  <div class="c2l-active">
+    {{input id="c2l-is-active" type="checkbox" checked=controller.isActive}}
+    <label for="c2l-is-active">
+      Always active
+    </label>
+  </div>
+</div>
 
 {{outlet}}

app/views/application.js

@@ -1,4 +1,5 @@
 import Ember from 'ember';
 
 export default Ember.View.extend({
+  classNames: 'c2l-main'.w()
 });

package.json

@@ -29,6 +29,7 @@
     "ember-cli-htmlbars": "0.7.4",
     "ember-cli-inject-live-reload": "^1.3.0",
     "ember-cli-qunit": "0.3.10",
+    "ember-cli-sass": "^4.0.0-beta.7",
     "ember-cli-uglify": "1.0.1",
     "ember-export-application-global": "^1.0.2"
   }

public/content-script.js

@@ -1,2 +1,141 @@
 
-console.log('PAF!');
+var dict = Ember.Object.create({
+  'Б': 'B',  'В': 'V',  'Г': 'G',  'Д': 'D',  'Ђ': 'Đ',  'Ж': 'Ž',  'З': 'Z',  'И': 'I',
+  'К': 'K',  'Л': 'L',  'Љ': 'LJ', 'М': 'M',  'Н': 'N',  'Њ': 'NJ', 'П': 'P',  'Р': 'R',
+  'С': 'S',  'Т': 'T',  'Ћ': 'Ć',  'У': 'U',  'Ф': 'F',  'Х': 'H',  'Ц': 'C',  'Ч': 'Č',
+  'Џ': 'DŽ', 'Ш': 'Š',
+
+  'б': 'b',  'в': 'v',  'г': 'g',  'д': 'd',  'ђ': 'đ',  'ж': 'ž',  'з': 'z',  'и': 'i',
+  'к': 'k',  'л': 'l',  'љ': 'lj', 'м': 'm',  'н': 'n',  'њ': 'nj', 'п': 'p',  'р': 'r',
+  'с': 's',  'т': 't',  'ћ': 'ć',  'у': 'u',  'ф': 'f',  'х': 'h',  'ц': 'c',  'ч': 'č',
+  'џ': 'dž', 'ш': 'š',
+
+  transcode: function (text) {
+    return text.split('').map(function (c) {
+      if (['.'].contains(c)) {
+        return c;
+      }
+      return this.getWithDefault(c, c);
+    }, this).join('');
+  }
+});
+
+function css (style) {
+  return Ember.keys(style).map(function (k) {
+    return '%@: %@;'.fmt(k, style[k]);
+  }).join(' ');
+}
+
+var progress = Ember.Object.extend({
+  el: null,
+
+  init: function () {
+    var style = {
+      'position': 'absolute',
+      'left': 0,
+      'top': 0,
+      'background': ' rgba(255, 255, 255, 0.5)',
+      'border': 'solid 1px rgba(0, 0, 0, 0.5)',
+      'border-radius': '5px',
+      'margin': '10px',
+      'font-family': 'sans-serif',
+      'font-size': '8pt',
+      'z-index': 10000,
+      'overflow': 'hidden'
+    },
+        bar = {
+      'width': 0,
+      'background-color': 'rgba(0, 192, 0, 0.25)',
+      'position': 'absolute',
+      'height': '100%',
+      'z-index': -1
+    };
+
+    var el = Ember.$(
+      '<div class="c2l-progress" style="%@">'.fmt(css(style)) +
+        '<div class="c2l-bar" style="%@"></div>'.fmt(css(bar)) +
+        '<div class="c2l-label" style="padding: 5px 10px;">Cyrillic to Latin processing...</div>' +
+      '</div>'
+    );
+    el.appendTo('body');
+    this.set('el', el);
+  },
+
+  show: function () {
+    this.get('el').show();
+    console.log('C2L processing started...');
+
+    this.setProperties({
+      count: Ember.$('*').contents().filter(function () { return this.nodeType === 3; }).length,
+      index: 0
+    });
+  },
+  hide: function () {
+    this.get('el').fadeOut(300);
+    console.log('C2L processing complete');
+  },
+
+  increment: function () {
+    this.incrementProperty('index');
+    this.get('el').find('.c2l-bar').width('%@%'.fmt(this.get('index') * 100 / this.get('count')));
+  }
+}).create();
+
+
+function processElement (el) {
+  el.contents().each(function (i, content) {
+    switch (content.nodeName) {
+    case '#text':
+      Ember.$(content).replaceWith(dict.transcode(content.wholeText));
+      break;
+
+    case 'INPUT':
+      content.placeholder = dict.transcode(content.placeholder);
+      content.value = dict.transcode(content.value);
+      break;
+
+    default:
+      processElement(Ember.$(content));
+    }
+  });
+  progress.increment();
+}
+
+var alreadyProcessed = false;
+
+function processPageIf (active) {
+  if (active) {
+    console.log('C2L extension is enabled');
+
+    progress.show();
+    processElement(Ember.$(document));
+    progress.hide();
+
+    alreadyProcessed = true;
+  } else {
+    console.log('C2L extension is disabled');
+
+    if (alreadyProcessed) {
+      window.location.reload();
+    }
+  }
+}
+
+var extensionActive = false;
+C2LSettings.loadActive(function (active) {
+  extensionActive = active;
+  processPageIf(active);
+});
+
+C2LSettings.whenActive(function (active) {
+  extensionActive = active;
+  processPageIf(active);
+});
+
+Ember.$(function () {
+  document.addEventListener('DOMNodeInserted', function (event) {
+    if (extensionActive) {
+      processElement(Ember.$(event.target));
+    }
+  });
+});

public/manifest.json

@@ -0,0 +1,37 @@
+{
+  "manifest_version": 2,
+
+  "name": "C2L",
+  "description": "Cyrilic to Latin characters transcoding",
+  "version": "1.0.0",
+  "icons": {
+    "128": "chrome-icon-lg.png"
+  },
+
+  "web_accessible_resources": [
+    "assets/vendor.map"
+  ],
+
+  "browser_action": {
+    "default_icon": "chrome-icon.png",
+    "default_popup": "index.html",
+    "default_title": "C2L"
+  },
+  "content_scripts": [{
+    "matches": ["<all_urls>"],
+    "js": [
+      "assets/vendor.js",
+      "content-script.js"
+    ],
+    "run_at": "document_end",
+    "all_frames": true
+  }],
+  "permissions": [
+    "storage",
+    "tabs",
+    "bookmarks",
+    "activeTab",
+    "<all_urls>",
+    "https://ajax.googleapis.com/"
+  ]
+}

tests/unit/views/application-test.js

@@ -1,7 +1,4 @@
-import {
-  moduleFor,
-  test
-} from 'ember-qunit';
+import { moduleFor, test } from 'ember-qunit';
 
 moduleFor('view:application');