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

No longer using popup.html. Clicking the plugin button will now toggle the menu directly.

Browse source
This commit is contained in:
Nils Norman Haukås 2016-01-10 20:15:34 +01:00
parent 6fea94eb03
commit 02707d0d04
6 changed files with 87 additions and 140 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/index.ts
View file

@ -16,12 +16,28 @@ module tagIt {
.service('TagStorageService', TagStorageService)
.controller('MenuCtrl', MenuCtrl);
export function init (callback: () => void) {
angular.bootstrap(
document.getElementById("tagit-iframe")
.contentDocument.getElementById("tagit-menu")
, ['tagit']);
export function init(callback: () => void) {
var iframe = <HTMLIFrameElement>document.getElementById("tagit-iframe")
angular.bootstrap(iframe.contentDocument.getElementById("tagit-menu"), ['tagit']);
console.log('TagIt menu loaded');
setupChromeListener();
}
function setupChromeListener() {
if (typeof chrome === 'undefined') return; //do nothing
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
console.log(sender.tab ?
"from a content script:" + sender.tab.url :
"from the extension");
if (request.greeting == "hello") {
sendResponse({ farewell: "goodbye" });
} else if (request === 'isMenuOpen') {
sendResponse(true);
}
}
);
}
// export function init (callback: () => void) {

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

@ -1,3 +1,8 @@
/*
This javascript is injected to page by background.js.
*/
$.get(chrome.extension.getURL('index-angular-app.html'), function (htmlData) {
var iframe = document.createElement('iframe');
iframe.id = 'tagit-iframe';

60
src/plugin-specific/background.js
View file

@ -0,0 +1,60 @@
chrome.browserAction.onClicked.addListener(function () {
isMenuOpen(function (responseIsItOpen) {
if (responseIsItOpen) {
console.log('Closing menu');
chrome.tabs.reload();
} else {
console.log('Opening menu');
injectIframe();
}
})
});
function isMenuOpen(callback) {
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
chrome.tabs.sendMessage(tabs[0].id, "isMenuOpen" , callback);
});
}
function injectIframe() {
loadJquery(function () {
chrome.tabs.executeScript(null, {
file: 'add-iframe-to-page.js'
}, loadPluginDeps);
});
function loadJquery(callback) {
chrome.tabs.executeScript(null, {
file: 'vendor/jquery/dist/jquery.js',
allFrames: true
}, callback);
}
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();'
});
}
}

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

@ -24,8 +24,6 @@
"bundle.js"
],
"browser_action": {
"default_title": "Tag you're it! Click to enable or disable tagging of web content.",
"default_icon": "icon48.png",
"default_popup": "popup.html"
"default_icon": "icon48.png"
}
}

40
src/plugin-specific/popup.html
View file

@ -1,40 +0,0 @@
<!DOCTYPE html>
<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 {
width: 250px;
}
</style>
</head>
<body id="tagit-popup" class="container">
<div>
<h1>Tag you're it</h1>
<div class="btn-group" role="group" aria-label="...">
<button id="js-open-menu" type="button" class="btn btn-default">Open menu</button>
</div>
<p></p>
<form>
<div class="form-group">
<label for="backend-server-query-url">Backend: Url to query:</label>
<input type="text" class="form-control" id="backend-server-query-url" placeholder="backend query url">
</div>
<div class="form-group">
<label for="backend-server-store-url">Backend: Url to store information on:</label>
<input type="text" class="form-control" id="backend-server-store-url" placeholder="backend storage url">
</div>
<div class="form-group">
<label for="user-email">User email to associate tagging information with:</label>
<input type="email" class="form-control" id="user-email" placeholder="user email">
</div>
</form>
</div>
</body>
</html>

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

@ -1,92 +0,0 @@
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById('js-open-menu').addEventListener('click', openMenu);
});
function openMenu () {
logToBG('open menu was clicked');
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 () {
logToBG('injectAngular');
// Prevent immediate automatic bootstrapping
chrome.tabs.executeScript(null, {
code: 'window.name = "NG_DEFER_BOOTSTRAP!" + window.name;'
}, loadPluginDeps);
function loadPluginDeps () {
chrome.tabs.executeScript(null, {
file: 'vendor/vendor.js'
}, loadPlugin);
}
function loadPlugin () {
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});
}