javascript - Chrome 扩展 JavaScript 错误

标签 javascript jquery html google-chrome-extension

我正在尝试将模式密码的 html+jss+css 项目部署为 chrome 扩展。在我的本地机器上，代码按预期工作。但是，当我将其作为 chrome 扩展进行测试时，未显示要输入模式的框。

代码如下:

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 your password</h2>
        <div id="patterncontainer" class="patterncontainer">
        </div>
   </div>
</body>

<script src="js/script.js"></script>

</html>

欢迎.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>

主页.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";
};

脚本.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 to unlock screen";
        passwordset = true;
    }
    else {
        document.getElementById("heading").innerHTML = "Please set your pattern";
    }
}());

(function generatebuttons(){
    var patterncontainer  = document.getElementById("patterncontainer");
    for (var i = 1; i <=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 is the margin of the 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 a 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 and slope
                var slope = Math.atan2(curY - centerY1, curX - centerX1)*180/3.14;

                //setting varying width and slope to 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 is found on the 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 is the 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;
    for (i = 0; i < digits-1; i++) {
        for (j = i+1; j < digits; j++) {
            if(numberarray[i] == numberarray[j]) {
                raiseerror("repeatedEntry");
            }
        }
    }
};

function successmessage(successcode) {
    if(successcode == "screenUnlocked") {
        alert("You have unlocked the screen!");
    }
    if (successcode == "patternStored") {
        alert("Your pattern is 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 is too short. Please try again.");
        }
        if (errorcode == "repeatedEntry") {
            alert("You cannot use the 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 the password to reset it.");
        }
        location.reload();
    }
};
});

最后这是我的 manifest.json :

{
  "manifest_version": 2,

  "name": "GRAphical Pass",
  "description": "THIS IS SPARTA!!!!!!",
  "version": "1.0",

  "browser_action": {
  "default_icon": "icon.png",
  "default_popup": "index.html"
  },
  "permissions": [
   "activeTab"
  ]
}

任何帮助将不胜感激。谢谢 :) Expected(this is what I get on my machine)

但将其部署为扩展: this is what I get

最佳答案

我建议删除:$(document).ready(function(){

从你的脚本中添加

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

与以下 CSP 一起添加到您的 list :

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

关于javascript - Chrome 扩展 JavaScript 错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40528208/

上一篇：HTML 无法对齐到页面右下角

下一篇：javascript - 我如何知道我的电脑是否连接了耳机？ HTML5 + JavaScript

相关文章：

javascript - 使用 .env 文件内的变量来创建 React 应用程序

javascript - jQuery Javascript 无法在 WordPress 上运行

html - 文本在 Chrome 中可读； Firefox 中的微观

javascript - Angular 5 中的动画列表

javascript - 如何比较两个 HTML 元素的渲染

javascript - 将项目 ID 从卡片传递到模态

javascript - 更改 IE 中脚本标签的innerHTML以显式加载google plusone按钮

php单选按钮值(电子邮件表单)

javascript - 使用 Javascript 检查文本框上的整数验证

javascript - Node.js/ express : download file via ajax

©2024 IT工具网  联系我们