nilsnh/tag-youre-it
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

was able to add iframe to page in chrome and initialize it properly.

Browse source
This commit is contained in:
Nils Norman Haukås 2015-12-07 21:11:03 +01:00
parent b1b158ad58
commit 26544f9b39
9 changed files with 149 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
Gulpfile.js
View file

@ -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',

36
src/index-angular-app-web.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<title>This will be an iframe programmatically included into a parent page.</title>
<script src="vendor/vendor.js"></script>
<script src="bundle.js"></script>
<link href="vendor/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body id="tagit-menu" ng-app="tagit" class="tagit-menu">
<div ng-controller="MenuCtrl">
<br/>
<button ng-click="vm.removeMenu()" class="btn btn-default">
Close menu
</button>
<h2>Tag you're it</h2>
<p>Select a word to tag with a semantic tag.</p>
<p>
Currently selected word: <strong>{{vm.selectedWord}}</strong>
</p>
<input type="text" ng-model="wordToFilterBy" class="form-control" placeholder="Filter tags" />
<ul id="senses">
<li ng-click="vm.onSenseSelect(sense)" id="sense.senseid" ng-repeat="sense in vm.senses | filter:wordToFilterBy" class="list-unstyled">
<strong>{{sense.word}}</strong> {{sense.explanation}}
</li>
</ul>
</div>
</body>
</html>

52
src/index-angular-app.html
View file

@ -2,12 +2,54 @@
<html>
<head>
<title>This will be an iframe programmatically included into a parent page.</title>
<script src="vendor/vendor.js"></script>
<script src="bundle.js"></script>
<link href="vendor/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<style type="text/css">
.tagit-body {
width: 70%;
position: absolute;
right: 0;
padding: 10px;
}
.tagit-iframe {
position: fixed;
overflow-y: auto;
width: 30%;
left: 0;
top: 0;
bottom: 0;
padding: 10px;
}
.tagit-iframe,
.tagit-menu {
background-color: #ccc;
height: 100%;
}
.tagit-menu ul {
padding-left: 0px;
margin-top: 10px;
}
.tagit-menu li {
padding: 5px;
}
.tagit-menu li:hover {
background-color: #eee;
cursor: pointer;
}
.tagit-tag {
background-color: #EDDE45;
padding: 3px;
}
</style>
</head>
<body id="tagit-menu" ng-app="tagit" class="tagit-menu">
<body id="tagit-menu" class="tagit-menu">
<div ng-controller="MenuCtrl">
<br/>

9
src/index.ts
View file

@ -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) {

2
src/load-menu-for-web-testing.js
View file

@ -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('<div id="tagit-body" class="tagit-body" />');
$('.tagit-body').before(iframe);

9
src/plugin-specific/add-iframe-to-page.js Normal file
View file

@ -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('<div id="tagit-body" class="tagit-body" />');
$('.tagit-body').before(iframe);
});

1
src/plugin-specific/manifest.json
View file

@ -19,6 +19,7 @@
},
"web_accessible_resources": [
"*.html",
"*.css",
"vendor/**/*.js",
"bundle.js"
],

46
src/plugin-specific/popup.js
View file

@ -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 () {

2
src/style.css
View file

@ -10,6 +10,8 @@
overflow-y: auto;
width: 30%;
left: 0;
top: 0;
bottom: 0;
padding: 10px;
}