add overlay

inject.js

@@ -3,6 +3,9 @@ var $mySearch;
 
 
 $(document).ready(function(){
+  // remove ads
+  $("#watch7-sidebar-ads").remove();
+
   saveSearchBars();
   changeSearchBar();
 });
@@ -57,9 +60,24 @@ function changeSearchBar() {
 
 function runThisLittleBeastInstead() {
   if($mySearch.find("input").val() == "") return;
+  addLoadingScreen();
   getSearchResults();
 }
 
+function addLoadingScreen() {
+  var overlay = jQuery('<div id="my-overlay"> </div>');
+  var imgURL = chrome.extension.getURL("spinner.gif");
+  var spinner = jQuery('<div id="my-overlay-spinner"> </div>');
+  spinner.css("background-image", "url(" + imgURL + ")");
+  $('#watch7-sidebar').append(overlay);
+  $('#watch7-sidebar').append(spinner);
+}
+
+function removeOverlay() {
+  $("#my-overlay").remove();
+  $("#my-overlay-spinner").remove();
+}
+
 function getSearchResults() {
   var query = "/results?search_query=" + encodeURIComponent($mySearch.find("input").val());
   var results;
@@ -82,13 +100,16 @@ function replaceSidebar(data, query) {
   });
 
   //$(".watch-sidebar-head").remove();
+  $upNext = $(".autoplay-bar").parent().detach();
 
   $("#watch7-sidebar-contents .video-list").empty();
+  $("#watch7-sidebar-contents .video-list").append($upNext);
   $("#watch7-sidebar-contents .video-list").append($("<div class='watch-sidebar-section'>Search results for: <i><b>" + query + "</b></i></div>"));
   newNodes.forEach(function(node) {
     $("#watch7-sidebar-contents .video-list").append(node);
   })
-
+
+  removeOverlay();
   //console.log(newNodes);
 }
 

manifest.json

@@ -12,6 +12,9 @@
     "persistent":true,
     "page":"bg.html"
   },
+  "web_accessible_resources": [
+    "spinner.gif"
+  ],
   "content_scripts" : [{
      "matches" : 
        ["https://www.youtube.com/*",

styles.css

@@ -1,3 +1,26 @@
+#my-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #000;
+    filter:alpha(opacity=30);
+    opacity: 0.3;
+    z-index: 10000;
+}
+
+#my-overlay-spinner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 10001;
+    background-position: 50% 7%;
+    background-repeat: no-repeat;
+}
+
 #my-masthead-search {
     margin-top: 3px;
     max-width: 650px;