is now able to include tagging menu on page. And make requests to backend server.

package.json

@@ -46,6 +46,7 @@
     "gulp-ng-annotate": "^1.1.0",
     "gulp-typescript": "^2.9.2",
     "jquery": "^2.1.4",
+    "lodash": "^3.10.1",
     "material-design-lite": "^1.0.5",
     "merge2": "^0.3.6"
   }

src/content_script_include.js

@@ -1,3 +1,5 @@
+// Code used by both the local web prototype as well as the plugin.
+
 function injectScripts () {
 
   // Save a copy of existing angular js and jquery
@@ -7,14 +9,18 @@ function injectScripts () {
   // angular.js to load itself into
   var angular = (window.angular = {});
 
+  console.log('loading jquery');
   loadScript('vendor/jquery/dist/jquery.js', loadAngular);
 
   function loadAngular () {
+    console.log('loading angular');
     loadScript('vendor/angular/angular.js', loadPluginCode);
   }
 
   function loadPluginCode () {
+    console.log('loading tagit');
     loadScript('bundle.js', function () {
+      debugger;
       tagIt.init(restoreOldAngularAndJquery);
     });
   }
@@ -27,11 +33,17 @@ function injectScripts () {
     $.noConflict();
   }
 
-  // TODO: add "script.js" to web_accessible_resources in manifest.json
-  // s.src = chrome.extension.getURL('script.js');
-  function loadScript (scriptName, callback) {
+  function loadScript (relativeScriptPath, callback) {
+    function translateToPluginPath (relativeScriptPath) {
+      // if "chrome" present, we deduce that we're running as a plugin
+      if (chrome) {
+        return chrome.extension.getURL(relativeScriptPath);
+      } else {
+        return relativeScriptPath;
+      }
+    }
     var s = document.createElement('script');
-    s.src = scriptName;
+    s.src = translateToPluginPath(relativeScriptPath);
     s.onload = function() {
       this.parentNode.removeChild(this);
       if (callback) callback();

src/index.ts

@@ -6,6 +6,8 @@
 
 module tagIt {
 
+  declare var chrome : any;
+
   angular.module('tagit', [])
     .service('DataService', DataService)
     .service('SelectedWordService', SelectedWordService)
@@ -13,14 +15,22 @@ module tagIt {
 
   export function init (callback: () => void) {
     var $ = jQuery;
-    $.get('menu.tpl.html', function (htmlData) {
+    $.get(chromeUrlTranslator('menu.tpl.html'), function (htmlData) {
       $('body').children().wrapAll('<div id="tagit-body" class="tagit-body" />');
       $('.tagit-body').before(htmlData);
+      window.name = '';
       angular.bootstrap(document.getElementById("tagit-menu"), ['tagit']);
       console.log('TagIt menu loaded');
       if(callback) callback();
     });
-  }
 
+    function chromeUrlTranslator(relativeUrl : string) {
+      if(chrome) {
+        return chrome.extension.getURL(relativeUrl);
+      } else {
+        relativeUrl;
+      }
+    }
+  }
 }
 

src/plugin-specific/background.js

@@ -1,22 +1,13 @@
-var pluginEnabled = true;
+chrome.runtime.onMessage.addListener(
+  function(request, sender, sendResponse) {
+    console.log(sender.tab ?
+      "from a content script:" + sender.tab.url :
+      "from the extension");
+    if (request.logMsg) console.log(request.logMsg);
 
-// console.log('background page was started');
-
-function updateIcon () {
-  var selectedIcon;
-  if (pluginEnabled) {
-    chrome.browserAction.setIcon({path:'icon2.png'});
-    pluginEnabled = false;
-  } else {
-    chrome.browserAction.setIcon({path:'icon1.png'});
-    pluginEnabled = true;
-  }
-}
-
-function initBackground () {
-  chrome.browserAction.onClicked.addListener(updateIcon);
-  updateIcon();
-}
+    // if (request.greeting == "hello")
+    //   sendResponse({farewell: "goodbye"});
+});
 
 // initBackground();
 

src/plugin-specific/content_script.js

@@ -1,4 +1,13 @@
-// used for chrome plugin
+// used for chrome plugin, injected by popup.js
 
 @@include('../content_script_include.js')
 
+log('content script was added!');
+
+injectScripts();
+
+// todo wire up listeners
+
+function log (msg) {
+  console.log(msg);
+}

src/plugin-specific/manifest.json

@@ -8,19 +8,20 @@
     "48": "icon48.png",
     "128": "icon128.png"
   },
-  "permissions": ["storage"],
+  "permissions": [
+    "storage",
+    "activeTab",
+    "http://lexitags.dyndns.org/"
+  ],
   "background": {
     "persistent": false,
     "scripts": ["background.js"]
   },
   "web_accessible_resources": [
-    "**/*.html",
-    "**/*.js"
+    "*.html",
+    "vendor/**/*.js",
+    "bundle.js"
   ],
-  "content_scripts": [{
-    "matches": ["<all_urls>"],
-    "js": ["content_script.js"]
-  }],
   "browser_action": {
     "default_title": "Tag you're it! Click to enable or disable tagging of web content.",
     "default_icon": "icon48.png",

src/plugin-specific/popup.html

@@ -2,9 +2,6 @@
 <html>
 <head>
   <title>Popup menu for TagIt plugin</title>
-
-  <!-- <script src="popup.js"></script> -->
-
   <link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css">
   <style type="text/css">
     .container {
@@ -13,12 +10,11 @@
   </style>
 
 </head>
-<body id="tagit-popup" class="container" ng-app="tagItPopUpMenu">
-  <div ng-controller="popUpCtrl">
+<body id="tagit-popup" class="container">
+  <div>
     <h1>Tag you're it</h1>
     <div class="btn-group" role="group" aria-label="...">
-      <button ng-click="vm.openMenu()" type="button" class="btn btn-default">Open</button>
-      <button type="button" class="btn btn-default">Close</button>
+      <button id="js-open-menu" type="button" class="btn btn-default">Open menu</button>
     </div>
     <p></p>
     <form>
@@ -36,5 +32,6 @@
       </div>
     </form>
   </div>
+  <script src="popup.js"></script>
 </body>
 </html>

src/plugin-specific/popup.js

@@ -1,11 +1,53 @@
-console.log('popUpCtrl was loaded');
+// Runs at the end of the  Wire up listeners to popup menu
 
-// angular.module('tagItPopUpMenu', [])
-//   .controller('popUpCtrl', popUpCtrl);
+document.getElementById('js-open-menu').addEventListener('click', openMenu);
 
-// function popUpCtrl ($scope, $log) {
-//   $scope.vm = this;
-//   $scope.vm.openMenu = function () {
-//     $log.debug('open menu was clicked.');
-//   }
-// }
+function openMenu () {
+  logToBG('open menu was clicked');
+  // chrome.tabs.executeScript(null, {file: 'content_script.js'});
+  injectScripts();
+}
+
+function injectScripts () {
+  logToBG('injectAngular');
+  // Prevent immediate automatic bootstrapping
+  chrome.tabs.executeScript(null, {
+    code: 'window.name = "NG_DEFER_BOOTSTRAP!" + window.name;'
+  }, loadJquery);
+
+  function loadJquery () {
+    chrome.tabs.executeScript(null, {
+      file: 'vendor/jquery/dist/jquery.js'
+    }, loadAngular);
+  }
+
+  function loadAngular () {
+    chrome.tabs.executeScript(null, {
+      file: 'vendor/angular/angular.js'
+    }, loadMainCode);
+  }
+
+  function loadMainCode () {
+    chrome.tabs.executeScript(null, {file: 'bundle.js'}, loadCss);
+  }
+
+  function loadCss () {
+    chrome.tabs.insertCSS(null, {file: 'vendor/bootstrap/dist/css/bootstrap.min.css'},
+      chrome.tabs.insertCSS(null, {file: 'style.css'}, bootstrapAngularMenu))
+  }
+
+  function bootstrapAngularMenu () {
+    chrome.tabs.executeScript(null, {
+      code: 'tagIt.init();'
+    });
+  }
+
+}
+
+function addScript (relativeScriptPath, callback) {
+  chrome.tabs.executeScript(null, {file: relativeScriptPath}, callback);
+}
+
+function logToBG (msg) {
+  chrome.runtime.sendMessage({logMsg: msg});
+}