jquery - Chrome Extension JavaScript Error -


i trying deploy html+jss+css project of pattern password chrome extension. on local machine code works expected. when test chrome extension, box in pattern entered not displayed.

code below :

index.html

<!doctype html> <html> <head>     <meta http-equiv="content-type" content="text/html; charset=utf-8" />     <meta name="viewport" content="width=320; user-scalable=no; initial-scale=1.0; maximum-scale=1.0" />     <title>pattern lock welcome page</title>     <link rel="stylesheet" type="text/css" href="assets/css/main.css"/>     <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> </head> <body>     <div id="jquery-script-menu">      <div class="jquery-script-clear"></div>     </div>     </div>     <h1 style="margin:150px auto 20px auto; text-align:center; color:#fff">pattern lock</h1>     <div class="maincontainer">         <h2 id="heading" class="heading">please set password</h2>         <div id="patterncontainer" class="patterncontainer">         </div>    </div> </body>  <script src="js/script.js"></script>  </html> 

welcome.html

<!doctype html> <html> <head>     <meta http-equiv="content-type" content="text/html; charset=utf-8" />     <meta name="viewport" content="width=320; user-scalable=no; initial-scale=1.0; maximum-scale=1.0" />     <title>pattern lock</title>      <link rel="stylesheet" type="text/css" href="assets/css/main.css"/> </head>  <body> <div class="maincontainer">     <h2 id="heading" class="heading">homescreen</h2>     <button id="lockscreen" class="button-lockscreen" onclick="window.location= './index.html';">lock screen</a><br /><br />     <button id="resetpassword" class="button-reset" onclick="resetpassword()">reset password</a> </div> </body> <script type="text/javascript" src="js/homepage.js"></script>   </html> 

homepage.js

function resetpassword() { console.log("sdfsdf"); if (localstorage.getitem("password")) {     alert("pattern : "+localstorage.getitem("password"));     localstorage.removeitem("password");     successmessage("resetsuccess"); } else {     emptypassword(); } }; (function checkpassword(){ if (!localstorage.getitem("password")) {     emptypassword(); } }());  function successmessage(successcode) { if (successcode == "resetsuccess") {     alert("pattern reset success!"); } location.reload(); };  function emptypassword() { document.getelementbyid("resetpassword").style.display = "none";     document.getelementbyid("lockscreen").innerhtml = "set password"; }; 

script.js

$(document).ready(function(){ var errorraised = false; var passwordset = false; var getclickstarted = false; var autosubmit = true; var password; var centerx1; var centery1; var curx = 0; var cury = 0; var getclickstarted = false; var htmlline; var startpointnumber=0; var endpointnumber=0;  (function checkifpasswordisset() {     if (localstorage.getitem("password")) {         document.getelementbyid("heading").innerhtml = "enter pattern unlock screen";         passwordset = true;     }     else {         document.getelementbyid("heading").innerhtml = "please set pattern";     } }());  (function generatebuttons(){     var patterncontainer  = document.getelementbyid("patterncontainer");     (var = 1; <=9; i++) {         var button = document.createelement("div");         button.classname = "button";         button.id = "button" + i;         patterncontainer.appendchild(button);          startposition = document.getelementbyid("button" + i);     } }());  (function main(){     if(!window.navigator.mspointerenabled) {          $(".button").on("mousedown", function (event){              if(!getclickstarted){                  getclickstarted = true;                  var offset1 = $("#" + event.target.id).position();                  centerx1 = offset1.left + $("#" + event.target.id).innerwidth()/2 + 20.5; //22.5 margin of button class                 centery1 = offset1.top + $("#" + event.target.id).innerheight()/2 + 20.5;                  //console.log("centerx1 " + centerx1);                 //console.log("centery1 " + centery1);                  if (event && event.preventdefault){                        event.preventdefault();                 }                  $("#" + event.target.id).removeclass("button").addclass("activebutton");                  password = event.target.id.split("button").join("");                 startpointnumber = event.target.id.split("button").join("");                  //console.log("startpointnumber " + startpointnumber);                  addline(startpointnumber, centerx1, centery1); //initiating moving line             }          });          $(document).bind("mousemove", function(event) {             if (getclickstarted){ //to avoid mousemove triggering before click                  if (event && event.preventdefault){                    event.preventdefault();                 }                  curx = event.clientx - $("#patterncontainer").offset().left;                 cury = event.clienty - $("#patterncontainer").offset().top;                  var width = math.sqrt(math.pow(curx - centerx1, 2) + math.pow(cury - centery1, 2)); //varying width , slope                 var slope = math.atan2(cury - centery1, curx - centerx1)*180/3.14;                  //setting varying width , slope line                 $("#line" + startpointnumber).css({"width": + width +"px", "height": "4px", "transform": "rotate(" + slope + "deg)", "-webkit-transform": "rotate(" + slope + "deg)", "-moz-transform": "rotate(" + slope + "deg)"});                  //if button found on path                 $(".button").bind("mouseover", function(e) {                      endpointnumber = e.target.id.split("button").join("");                      if (startpointnumber != endpointnumber) {                         if (e && e.preventdefault){                            e.preventdefault();                         }                          if (e.target.classname == "button") {                             $("#" + e.target.id).removeclass("button").addclass("activebutton");                         } else {                             $("#" + e.target.id).removeclass("activebutton").addclass("duplicatebutton");                         }                          password += e.target.id.split("button").join("");                         // endpointnumber = e.target.id.split("button").join("");                          $("#line" + startpointnumber).attr("id", "line" + startpointnumber + endpointnumber);                          var offset2 = $("#" + e.target.id).position();                          var centerx2 = offset2.left + $("#" + e.target.id).innerwidth()/2 + 20.5;  //20.5 margin of activebutton class                         var centery2 = offset2.top + $("#" + e.target.id).innerheight()/2 + 20.5;                          var linewidth = math.sqrt(math.pow(centerx2 - centerx1, 2) + math.pow(centery2 - centery1, 2));                         var lineslope = math.atan2(centery2 - centery1, centerx2 - centerx1)*180/3.14;                          $("#line" + startpointnumber + endpointnumber).css({"width": + linewidth +"px", "transform": "rotate(" + lineslope + "deg)", "-webkit-transform": "rotate(" + lineslope + "deg)", "-moz-transform": "rotate(" + lineslope + "deg)"});                          startpointnumber = endpointnumber;                         centerx1 = centerx2;                         centery1 = centery2;                          addline(startpointnumber, centerx1, centery1);                     }                  });             }              $("#patterncontainer").on("mouseup", function (event){                  if(getclickstarted) {                     if (event && event.preventdefault){                        event.preventdefault();                     }                      $("#line" + startpointnumber).remove();                      if (autosubmit) {                         formsubmit();                     }                 }                 getclickstarted = false;             });         });      } else {         alert ("internet explorer not supported!!");     } }());  function addline(startpointnumber, centerx1, centery1){     var htmlline = "<div id='line" + startpointnumber + "' class='line' style='position: absolute; top: " + centery1 + "px; \                 left: " + centerx1 + "px; -webkit-transform-origin: 2px 2px; -moz-transform-origin: 2.5% 50%; background-color: #fff;'></div>"      $("#patterncontainer").append(htmlline); }  function formsubmit(){      var digits = getlength(password);     if(digits<5) {         raiseerror("lengthtoosmall");     }      checkduplicatedigits(password);      if (errorraised == false && passwordset == false) {         localstorage.setitem("password", password);         successmessage("patternstored");     }     else if ( errorraised == false && passwordset == true) {         if (localstorage.getitem("password") == password) {             successmessage("screenunlocked");             window.location = "./welcome.html";             return false;         }         else {             raiseerror("incorrectpattern");         }     } };  function getlength(number) {     return number.tostring().length; };  function checkduplicatedigits(number) {     var digits = getlength(number);     numberstring = number.tostring();     var numberarray = numberstring.split("");     var i; var j;     (i = 0; < digits-1; i++) {         (j = i+1; j < digits; j++) {             if(numberarray[i] == numberarray[j]) {                 raiseerror("repeatedentry");             }         }     } };  function successmessage(successcode) {     if(successcode == "screenunlocked") {         alert("you have unlocked screen!");     }     if (successcode == "patternstored") {         alert("your pattern stored. thanks.");         passwordset = true;      }     if (successcode == "success") {         alert("pattern reset success!");     }     location.reload(); };  function raiseerror(errorcode) {     if(!errorraised){         errorraised = true;         if (errorcode == "lengthtoosmall") {             alert("the pattern short. please try again.");         }         if (errorcode == "repeatedentry") {             alert("you cannot use same number twice. please try again.");         }         if (errorcode == "incorrectpattern") {             alert("the entered pattern in incorrect. please try again.");         }         if (errorcode == "emptypassword") {             alert("you did not set password reset it.");         }         location.reload();     } }; }); 

and lastly manifest.json :

{   "manifest_version": 2,    "name": "graphical pass",   "description": "this sparta!!!!!!",   "version": "1.0",    "browser_action": {   "default_icon": "icon.png",   "default_popup": "index.html"   },   "permissions": [    "activetab"   ] } 

any appreciated. :) expected(this on machine)

but deploying extension : this get

i suggest removing : $(document).ready(function(){

from scripts , adding

"content_scripts": [ {   "matches": [   "<all_urls>" ], "js": ["homepage.js","script.js"] } ],  

to manifest along following csp :

"content_security_policy": "script-src 'self' https://code.jquery.com; object-src 'self'" 

Comments

Popular posts from this blog

asynchronous - C# WinSCP .NET assembly: How to upload multiple files asynchronously -

aws api gateway - SerializationException in posting new Records via Dynamodb Proxy Service in API -

asp.net - Problems sending emails from forum -