diff --git a/Gulpfile.js b/Gulpfile.js
index 830f79e..f998422 100644
--- a/Gulpfile.js
+++ b/Gulpfile.js
@@ -52,7 +52,8 @@ gulp.task('dist', ['tmp'], function () {
gulp.task('dist-node-modules', function () {
var cssDeps = gulp.src([
- 'node_modules/bootstrap/**/*'
+ 'node_modules/bootstrap/**/*',
+ 'node_modules/jquery/**/*'
], {base: 'node_modules'});
var jsDeps = gulp.src([
'node_modules/angular/angular.js',
diff --git a/src/index-angular-app-web.html b/src/index-angular-app-web.html
new file mode 100644
index 0000000..aa8ab54
--- /dev/null
+++ b/src/index-angular-app-web.html
@@ -0,0 +1,36 @@
+
+
+
+
diff --git a/src/index.ts b/src/index.ts
index dc27d19..12fb19f 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -16,8 +16,13 @@ module tagIt {
.service('TagStorageService', TagStorageService)
.controller('MenuCtrl', MenuCtrl);
- // angular.bootstrap(document.getElementById("tagit-menu"), ['tagit']);
- console.log('TagIt menu loaded');
+ export function init (callback: () => void) {
+ angular.bootstrap(
+ document.getElementById("tagit-iframe")
+ .contentDocument.getElementById("tagit-menu")
+ , ['tagit']);
+ console.log('TagIt menu loaded');
+ }
// export function init (callback: () => void) {
// $.get(chromeUrlTranslator('menu.tpl.html'), function (htmlData) {
diff --git a/src/load-menu-for-web-testing.js b/src/load-menu-for-web-testing.js
index affec2f..82d732c 100644
--- a/src/load-menu-for-web-testing.js
+++ b/src/load-menu-for-web-testing.js
@@ -15,7 +15,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
function injectIframe () {
console.log('injectIframe()');
var iframe = document.createElement('iframe');
- iframe.src = 'index-angular-app.html';
+ iframe.src = 'index-angular-app-web.html';
iframe.className = 'tagit-iframe';
$('body').children().wrapAll('
');
$('.tagit-body').before(iframe);
diff --git a/src/plugin-specific/add-iframe-to-page.js b/src/plugin-specific/add-iframe-to-page.js
new file mode 100644
index 0000000..295d821
--- /dev/null
+++ b/src/plugin-specific/add-iframe-to-page.js
@@ -0,0 +1,9 @@
+$.get(chrome.extension.getURL('index-angular-app.html'), function (htmlData) {
+ var iframe = document.createElement('iframe');
+ iframe.id = 'tagit-iframe';
+ iframe.srcdoc = htmlData;
+ iframe.className = 'tagit-iframe';
+ iframe.sandbox = 'allow-same-origin allow-top-navigation allow-scripts';
+ $('body').children().wrapAll('
');
+ $('.tagit-body').before(iframe);
+});
\ No newline at end of file
diff --git a/src/plugin-specific/manifest.json b/src/plugin-specific/manifest.json
index ffa0a54..2158bd1 100644
--- a/src/plugin-specific/manifest.json
+++ b/src/plugin-specific/manifest.json
@@ -19,6 +19,7 @@
},
"web_accessible_resources": [
"*.html",
+ "*.css",
"vendor/**/*.js",
"bundle.js"
],
diff --git a/src/plugin-specific/popup.js b/src/plugin-specific/popup.js
index a0f3b90..91e3c5e 100644
--- a/src/plugin-specific/popup.js
+++ b/src/plugin-specific/popup.js
@@ -5,8 +5,50 @@ document.addEventListener("DOMContentLoaded", function(event) {
function openMenu () {
logToBG('open menu was clicked');
- // chrome.tabs.executeScript(null, {file: 'content_script.js'});
- injectScripts();
+ injectIframe();
+}
+
+function injectIframe () {
+ loadJquery(function () {
+ logToBG('jquery was loaded');
+ chrome.tabs.executeScript(null, {
+ file: 'add-iframe-to-page.js'
+ }, loadPluginDeps);
+ });
+
+ function loadPluginDeps () {
+ chrome.tabs.executeScript(null, {
+ file: 'vendor/vendor.js',
+ allFrames: true
+ }, loadPlugin);
+ }
+
+ function loadPlugin () {
+ chrome.tabs.executeScript(null, {
+ file: 'bundle.js',
+ allFrames: true
+ }, loadCss);
+ }
+
+ function loadCss () {
+ chrome.tabs.insertCSS(null, {
+ file: 'style.css',
+ allFrames: true
+ }, initPlugin);
+ }
+
+ function initPlugin () {
+ chrome.tabs.executeScript(null, {
+ code: 'tagIt.init();'
+ });
+ }
+
+ function loadJquery (callback) {
+ chrome.tabs.executeScript(null, {
+ file: 'vendor/jquery/dist/jquery.js',
+ allFrames: true
+ }, callback);
+ }
}
function injectScripts () {
diff --git a/src/style.css b/src/style.css
index 3fdb54d..cf8e668 100644
--- a/src/style.css
+++ b/src/style.css
@@ -10,6 +10,8 @@
overflow-y: auto;
width: 30%;
left: 0;
+ top: 0;
+ bottom: 0;
padding: 10px;
}