From 074327ccfbf16acab97e751f4f81a0d887cfd652 Mon Sep 17 00:00:00 2001 From: kavya006 Date: Sun, 5 Feb 2017 03:56:00 +0000 Subject: [PATCH 1/2] Basic adding notes --- background.js | 48 ++++----- content.js | 262 +++++++++++++++++++++++++++++++------------------- manifest.json | 3 +- 3 files changed, 184 insertions(+), 129 deletions(-) diff --git a/background.js b/background.js index f87d4f2..6e1b4cb 100644 --- a/background.js +++ b/background.js @@ -1,28 +1,20 @@ -// Copyright (c) 2011 The Chromium Authors. All rights reserved. -// Use of this source code is governed by a BSD-style license that can be -// found in the LICENSE file. - -chrome.pageAction.onClicked.addListener(function(tab) { - chrome.tabs.query({active: true, currentWindow: true}, function(tabs){ - chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) { - alert(response.farewell); - }); -// When the extension is installed or upgraded ... -chrome.runtime.onInstalled.addListener(function() { - // Replace all rules ... - chrome.declarativeContent.onPageChanged.removeRules(undefined, function() { - // With a new rule ... - chrome.declarativeContent.onPageChanged.addRules([ - { - // That fires when a page's URL contains a 'g' ... - conditions: [ - new chrome.declarativeContent.PageStateMatcher({ - pageUrl: { urlContains: 'youtube.com' }, - }) - ], - // And shows the extension's page action. - actions: [ new chrome.declarativeContent.ShowPageAction() ] - } - ]); - }); -}); + // chrome.tabs.onCreated.addListener(function(tab){ + // if(tab && tab.url){ + // chrome.tabs.sendMessage(tab.id, {data : tab}, function(response){ + // console.log(response); + // }); + // } + // }); +chrome.tabs.onUpdated.addListener(function(tabId, changedInfo, tab){ + console.log(changedInfo.url); + if(changedInfo && changedInfo.status == "complete"){ + chrome.tabs.sendMessage(tabId, {data : tab}, function(response){ + console.log(response); + }); + } + // chrome.tabs.query({active : true, currentWindow : true}, function(tabs){ + // chrome.tabs.sendMessage(tabs[0].id, {url : changedInfo.url}, function(response){ + // console.log("Sent the message successfully " + response); + // }); + // }); +}); \ No newline at end of file diff --git a/content.js b/content.js index a8bf7b2..d8051b5 100644 --- a/content.js +++ b/content.js @@ -1,22 +1,28 @@ -window.onkeyup = function(e){ - if(e.which == 'f'){ - if(sidePanel.style.display != "none") - sidePanel.style.display = "none"; - else - sidePanel.style.display = "block"; +var port = chrome.runtime.connect(); +var curNote = null; +function reload(url){ + + window.onkeyup = function(e){ + if(e.which == 'f'){ + if(sidePanel.style.display != "none") + sidePanel.style.display = "none"; + else + sidePanel.style.display = "block"; + } + } + if(document.getElementById("youtubeButton") != null){ + return 0; } + var button = document.createElement("button"); + button.id = "youtubeButton"; + button.style.cursor = "pointer"; + button.appendChild(document.createTextNode("YouTubeNotes")); + button.addEventListener('click', function(){ + var a = addPanel(url); + }); + document.getElementById('watch8-secondary-actions').appendChild(button); } - -var button = document.createElement("button"); -button.style.cursor = "pointer"; -button.appendChild(document.createTextNode("YouTubeNotes")); -button.addEventListener('click', function(){ - var a = addPanel(); -}); -document.getElementById('watch8-secondary-actions').appendChild(button); - -function addPanel(){ - var curNote = null; +function addPanel(url){ var a = document.getElementById("mainPanel"); if(a != null && a.style.display != "none") return a; @@ -24,97 +30,155 @@ function addPanel(){ a.style.display = "block"; return a; } - var sidePanel = document.createElement("div"); - sidePanel.id = "mainPanel"; - sidePanel.style.backgroundColor = "white"; - sidePanel.style.display = "block"; - sidePanel.style.position = "relative"; - sidePanel.style.left = "50%"; - sidePanel.style.transform = "translateX(-50%)"; - sidePanel.style.top = "-10px"; - sidePanel.style.margin = "5px"; - sidePanel.style.padding = "0px 5px"; - sidePanel.style.height = (document.getElementsByClassName("ytp-iv-video-content")[0].clientHeight - 10) + "px"; - var clickFunc = function () { - if(sidePanel.style.display != "none") - sidePanel.style.display = "none"; - else + if(a == null){ + var sidePanel = document.createElement("div"); + sidePanel.id = "mainPanel"; + sidePanel.style.backgroundColor = "white"; sidePanel.style.display = "block"; - // console.log(sidePanel.style.display); - }; - document.getElementsByClassName("ytp-size-button")[0].onclick = clickFunc; - document.getElementsByClassName("ytp-fullscreen-button")[0].onclick = clickFunc; - - var closeBut = document.createElement("button"); - closeBut.style.cursor = "pointer"; - closeBut.style.fontSize = "16px"; - closeBut.style.fontFamily = "cursive"; - closeBut.style.fontWeight = "700"; - closeBut.style.color = "#a90909"; - closeBut.style.position = "absolute"; - closeBut.style.right = "0%"; - closeBut.style.top = "0%"; - closeBut.onmouseenter = function(){ - closeBut.style.color = "black"; - closeBut.style.textDecoration = "underline"; - } - closeBut.onmouseleave = function(){ + sidePanel.style.position = "relative"; + sidePanel.style.left = "50%"; + sidePanel.style.transform = "translateX(-50%)"; + sidePanel.style.top = "-10px"; + sidePanel.style.margin = "5px"; + sidePanel.style.padding = "0px 5px"; + sidePanel.style.height = (document.getElementsByClassName("ytp-iv-video-content")[0].clientHeight - 10) + "px"; + var clickFunc = function () { + if(sidePanel.style.display != "none") + sidePanel.style.display = "none"; + else + sidePanel.style.display = "block"; + // console.log(sidePanel.style.display); + }; + document.getElementsByClassName("ytp-size-button")[0].onclick = clickFunc; + document.getElementsByClassName("ytp-fullscreen-button")[0].onclick = clickFunc; + + var closeBut = document.createElement("button"); + closeBut.style.cursor = "pointer"; + closeBut.style.fontSize = "16px"; + closeBut.style.fontFamily = "cursive"; + closeBut.style.fontWeight = "700"; closeBut.style.color = "#a90909"; - closeBut.style.textDecoration = "none"; - } - closeBut.onclick = function(){ - sidePanel.style.display="none"; - } - closeBut.appendChild(document.createTextNode("close")); - sidePanel.appendChild(closeBut); + closeBut.style.position = "absolute"; + closeBut.style.right = "0%"; + closeBut.style.top = "0%"; + closeBut.onmouseenter = function(){ + closeBut.style.color = "black"; + closeBut.style.textDecoration = "underline"; + } + closeBut.onmouseleave = function(){ + closeBut.style.color = "#a90909"; + closeBut.style.textDecoration = "none"; + } + closeBut.onclick = function(){ + sidePanel.style.display="none"; + } + closeBut.appendChild(document.createTextNode("close")); + sidePanel.appendChild(closeBut); - var addBut = document.createElement("button"); - addBut.style.cursor = "pointer"; - addBut.style.fontSize = "16px"; - addBut.style.fontFamily = "cursive"; - addBut.style.fontWeight = "700"; - addBut.style.color = "#a90909"; - addBut.onclick = function(){ - //contact server for this - if(curNote == null){ - - } - var note = createNote(); - } - addBut.onmouseenter = function(){ - addBut.style.color = "black"; - addBut.style.textDecoration = "underline"; - } - addBut.onmouseleave = function(){ + var addBut = document.createElement("button"); + addBut.style.cursor = "pointer"; + addBut.style.fontSize = "16px"; + addBut.style.fontFamily = "cursive"; + addBut.style.fontWeight = "700"; addBut.style.color = "#a90909"; - addBut.style.textDecoration = "none"; - } - addBut.appendChild(document.createTextNode("+ Add Note")); - sidePanel.appendChild(addBut); - - - - // var view = document.createElement("details"); - // view.style.cursor = "pointer"; - // view.appendChild(document.createTextNode("Notes")); + addBut.onclick = function(){ + //contact server for this + if(url != null){ + var postURL = "http://10.21.27.98:8000/youtubenotesapis/SaveNotes/?"; + var videoId = url.match(/(?:https?:\/{2})?(?:w{3}\.)?youtu(?:be)?\.(?:com|be)(?:\/watch\?v=|\/)([^\s&]+)/); + if(videoId != null) { + console.log("video id = ",videoId[1]); + } else { + console.log("The youtube url is not valid."); + } + var emailId = document.getElementsByClassName("yt-masthead-picker-header yt-masthead-picker-active-account")[0].innerText; + emailId = emailId.replace(/ +/g, ""); + var note = createNote(); + var timeStart = document.getElementsByClassName("ytp-time-current")[0].innerHTML; + note.startTime = timeStart; + console.log(timeStart); + if(curNote != null && videoId != null){ + var http = new XMLHttpRequest(); + console.log(curNote); + curNote.endTime = curNote.endTime != null ? curNote.endTime : note.startTime; + var notes = document.getElementById("curNoteId").firstChild.innerText; + notes = notes.length == 0 ? "" : notes; + var params = "emailID=" + emailId + "&videoID=" + videoId[1] + "&startTime=" + curNote.startTime + "&endTime=" + curNote.endTime + "¬es=" + notes; + params = unescape(params); + http.open("POST", postURL + params, true); + http.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); + http.onreadystatechange = function(){ + if(this.readyState == 4 && this.status == 200){ + document.getElementById("curNoteId").remove(); + sidePanel.appendChild(note.dom); + note.endTime = null; + document.getElementById("endButton").onclick = function(){ + curNote.endTime = document.getElementsByClassName("ytp-time-current")[0].innerHTML; + } + } + curNote = note; + } + http.send(); + }else{ + curNote = createNote(); + curNote.startTime = timeStart; + curNote.endTime = null; + sidePanel.appendChild(curNote.dom); + document.getElementById("endButton").onclick = function(){ + curNote.endTime = document.getElementsByClassName("ytp-time-current")[0].innerHTML; + } + } + console.log(curNote); - // //styling by Kaaaaaaavs + } } + addBut.onmouseenter = function(){ + addBut.style.color = "black"; + addBut.style.textDecoration = "underline"; + } + addBut.onmouseleave = function(){ + addBut.style.color = "#a90909"; + addBut.style.textDecoration = "none"; + } + addBut.appendChild(document.createTextNode("+ Add Note")); + sidePanel.appendChild(addBut); - // sidePanel.appendChild(view); - - //get content from server + var sideBar = document.getElementById("watch7-sidebar-contents"); + sideBar.insertBefore(sidePanel, sideBar.firstChild); - var sideBar = document.getElementById("watch7-sidebar-contents"); - sideBar.insertBefore(sidePanel, sideBar.firstChild); + return sidePanel; + } +} - return sidePanel; +function createNote(){ + var objNote = {}; + var note = document.createElement("div"); + note.id = "curNoteId"; + var inputForm = document.createElement("p"); + var endBut = document.createElement("button"); + endBut.id = "endButton"; + endBut.appendChild(document.createTextNode("End Notes")); + var saveBut = document.createElement("button"); + saveBut.id = "saveButton"; + saveBut.appendChild(document.createTextNode("Save Notes")); + note.appendChild(inputForm); + note.appendChild(endBut); + note.appendChild(saveBut); + objNote.dom = note; + return objNote; } chrome.runtime.onMessage.addListener( function(request, sender, sendResponse){ - alert('sfkjsd'); - if(request.greeting == "hello"){ - sendResponse({farewell : "goodbye!!"}); - } - } -); + reload(request.data.url); + }); + + Element.prototype.remove = function() { + this.parentElement.removeChild(this); +} +NodeList.prototype.remove = HTMLCollection.prototype.remove = function() { + for(var i = this.length - 1; i >= 0; i--) { + if(this[i] && this[i].parentElement) { + this[i].parentElement.removeChild(this[i]); + } + } +} \ No newline at end of file diff --git a/manifest.json b/manifest.json index d9cb4c1..a92848a 100644 --- a/manifest.json +++ b/manifest.json @@ -20,8 +20,7 @@ [ { "matches": ["*://*.youtube.com/*"], - "js": ["content.js"], - "run_at": "document_end" + "js": ["content.js"] } ] } From df71ef5c51de4fe519ba29a04e7e58b9ac63f385 Mon Sep 17 00:00:00 2001 From: kavya006 Date: Sun, 5 Feb 2017 04:24:07 +0000 Subject: [PATCH 2/2] merging the branches --- content.js | 23 ++++++++++++++++------- 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/content.js b/content.js index 8a70abb..13f45ba 100644 --- a/content.js +++ b/content.js @@ -28,7 +28,7 @@ var emailID; var button = document.createElement("button"); var current_url; -function enableContent() { +function enableContent(url) { // if(document != null){ @@ -52,11 +52,11 @@ if(document != null){ alert('Please sign into your gmail account to access this extension'); } else - var a = addPanel(); + var a = addPanel(url); }); document.getElementById('watch8-secondary-actions').appendChild(button); } - +} function addPanel(url){ var curNote = null; var a = document.getElementById("mainPanel"); @@ -127,8 +127,6 @@ function addPanel(url){ } else { console.log("The youtube url is not valid."); } - var emailId = document.getElementsByClassName("yt-masthead-picker-header yt-masthead-picker-active-account")[0].innerText; - emailId = emailId.replace(/ +/g, ""); var note = createNote(); var timeStart = document.getElementsByClassName("ytp-time-current")[0].innerHTML; note.startTime = timeStart; @@ -139,8 +137,8 @@ function addPanel(url){ curNote.endTime = curNote.endTime != null ? curNote.endTime : note.startTime; var notes = document.getElementById("curNoteId").firstChild.innerText; notes = notes.length == 0 ? "" : notes; + var emailId = getEmailAddress(); var params = "emailID=" + emailId + "&videoID=" + videoId[1] + "&startTime=" + curNote.startTime + "&endTime=" + curNote.endTime + "¬es=" + notes; - params = unescape(params); http.open("POST", postURL + params, true); http.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); http.onreadystatechange = function(){ @@ -204,7 +202,7 @@ function createNote(){ } chrome.runtime.onMessage.addListener( function(request, sender, sendResponse){ - reload(request.data.url); + enableContent(request.data.url); }); Element.prototype.remove = function() { @@ -216,4 +214,15 @@ NodeList.prototype.remove = HTMLCollection.prototype.remove = function() { this[i].parentElement.removeChild(this[i]); } } +} + +function getEmailAddress(){ + var email = document.getElementsByClassName("yt-masthead-picker-header yt-masthead-picker-active-account")[0].innerText.replace(/ +/g, ""); + if (email.length == 0) { + return null; + } + else + { + return email; + } } \ No newline at end of file