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 @@ + + + + This will be an iframe programmatically included into a parent page. + + + + + + +
+ +
+ + + +

Tag you're it

+ +

Select a word to tag with a semantic tag.

+ +

+ Currently selected word: {{vm.selectedWord}} +

+ + + + +
+ + \ No newline at end of file diff --git a/src/index-angular-app.html b/src/index-angular-app.html index aa8ab54..53b6a99 100644 --- a/src/index-angular-app.html +++ b/src/index-angular-app.html @@ -2,12 +2,54 @@ This will be an iframe programmatically included into a parent page. - - - - + + - +

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; }