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
Post a Comment