From e53973eb6a66f2b330f2dc51590fe840a17a32a5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nils=20Norman=20Hauk=C3=A5s?= Date: Sun, 25 Oct 2015 19:17:30 +0100 Subject: [PATCH] is now able to include tagging menu on page. And make requests to backend server. --- package.json | 1 + src/content_script_include.js | 20 +++++++-- src/index.ts | 14 ++++++- src/plugin-specific/background.js | 27 ++++-------- src/plugin-specific/content_script.js | 11 ++++- src/plugin-specific/manifest.json | 15 +++---- src/plugin-specific/popup.html | 11 ++--- src/plugin-specific/popup.js | 60 +++++++++++++++++++++++---- 8 files changed, 111 insertions(+), 48 deletions(-) diff --git a/package.json b/package.json index 5f8c532..5bf8f37 100644 --- a/package.json +++ b/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" } diff --git a/src/content_script_include.js b/src/content_script_include.js index d3a24d5..c4288eb 100644 --- a/src/content_script_include.js +++ b/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(); diff --git a/src/index.ts b/src/index.ts index 5118245..bffb86f 100644 --- a/src/index.ts +++ b/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('
'); $('.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; + } + } + } } diff --git a/src/plugin-specific/background.js b/src/plugin-specific/background.js index 93d8f33..dbfa477 100644 --- a/src/plugin-specific/background.js +++ b/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(); diff --git a/src/plugin-specific/content_script.js b/src/plugin-specific/content_script.js index 22ae438..bc36bd4 100644 --- a/src/plugin-specific/content_script.js +++ b/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); +} \ No newline at end of file diff --git a/src/plugin-specific/manifest.json b/src/plugin-specific/manifest.json index fb3d66c..ffa0a54 100644 --- a/src/plugin-specific/manifest.json +++ b/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": [""], - "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", diff --git a/src/plugin-specific/popup.html b/src/plugin-specific/popup.html index f740d2b..8a9324e 100644 --- a/src/plugin-specific/popup.html +++ b/src/plugin-specific/popup.html @@ -2,9 +2,6 @@ Popup menu for TagIt plugin - - - - -
+ +

Tag you're it

- - +

@@ -36,5 +32,6 @@
+ \ No newline at end of file diff --git a/src/plugin-specific/popup.js b/src/plugin-specific/popup.js index ce69a60..d4b803a 100644 --- a/src/plugin-specific/popup.js +++ b/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.'); -// } -// } \ No newline at end of file +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}); +} \ No newline at end of file