初學者：鉻在應用程序中的JavaScript

我剛剛開始使用JavaScript和Chrome應用程序（並與一般編程），我遇到了一個奇怪的問題，我無法解決。這可能是一個非常微不足道的問題...初學者：鉻在應用程序中的JavaScript

我似乎無法讓腳本在我的打包的chrome應用程序中工作。

這裏是我的manifest.json：

{ 
    "name": "Accounting App", 
    "description": "One of my first Chrome Apps.", 
    "version": "0.1", 
    "manifest_version":2, 
    "app": { 
    "background": { 
     "scripts": ["background.js"] 
    } 
    }, 
    "icons": { "16": "icon-16.png", "128": "icon-128.png" } 
}

Background.js是：

chrome.app.runtime.onLaunched.addListener(function() { 
    chrome.app.window.create('index.html', { 
     'bounds': { 
     'width': 400, 
     'height': 500 
     } 
    }); 
});

的index.html：

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="mystyle.css"> 
</head> 
<body> 
<h1> Bank Balance: </h1> 
<input id="balance" placeholder="What is your current bank balance?"></input> 
<h1> Owed by you: </h1> 
<input id="debt" placeholder="How much do you owe?"></input> 
<h1>Owed<em> to</em> you </h1> 
<input id="owed" placeholder="How much is owed to you?"> 
<h1>How many days until you next get paid?</h1> 
<input id="date" placeholder="Number of days..."> 
<br> 
<h1><button onclick="myfunction()"> Submit </button></h1> 
<script src="myscript.js"></script> 
<p id="Result1"></p> 
<p id="Result2"></p> 

</body> 
</html>

而且myscript.js是：

function myfunction() { 
    var balance, owed, debt, date, result1, result2; 
    balance = parseInt(document.getElementById("balance").value); 
    owed = parseInt(document.getElementById("owed").value); 
    debt = parseInt(document.getElementById("debt").value); 
    date = parseInt(document.getElementById("date").value); 
    result1 = balance+debt-owed; 
    result2 = result1/date; 
    document.getElementById("Result1").innerHTML="You currently have " + result1 + " left to spend"; 
    document.getElementById("Result2").innerHTML="Daily allowance is " + result2; 

}

該應用程序在我的瀏覽器中正常工作。但是，當我去chrome：//擴展和「加載未打包的應用程序」時，我得到正確的樣式和正確的定位，但沒有功能的頁面 - 即：當我按「提交」時沒有任何反應。

我已經嘗試了一些不同的例子，並試圖把腳本放入index.html，但沒有任何工作。我總是得到沒有功能的頁面。

我的猜測是我錯過了「打包」應用程序和普通網頁之間的一些根本區別，但我看不到它。我已經檢查了這個例子：http://blog.teamtreehouse.com/creating-packaged-apps-for-google-chrome 和應用程序工作正常 - 但我看不出ToDo列表示例和我的應用程序之間有什麼區別。

在此先感謝您的幫助。

來源

2014-01-18 RailsStudent

您的問題是由CSP引起的：https：//developer.chrome.com/apps/contentSecurityPolicy.html。打開應用程序的開發人員工具以開始調試。 –

嗨，Rob，你認爲CSP的哪部分內容受到侵犯？ –

感謝您的及時和有益回覆！ – RailsStudent

總結一下：我的問題是index.html中使用的「點擊」，這是不允許的Chrome應用 - 如CSP解釋：

您不能使用內嵌腳本在您的Chrome應用程序頁面中。限制條件禁止和事件處理程序（）。

相反，處理「點擊」事件需要在myscript.js內部進行。

的index.html現在是：

<!DOCTYPE html> 
<html> 
<head> 
<script src="myscript.js"></script> 
<link rel="stylesheet" type="text/css" href="mystyle.css"> 
</head> 
<body> 
<h1> Bank Balance: </h1> 
<input id="balance" placeholder="What is your current bank balance?"></input> 
<h1> Owed by you: </h1> 
<input id="debt" placeholder="How much do you owe?"></input> 
<h1>Owed<em> to</em> you </h1> 
<input id="owed" placeholder="How much is owed to you?"> 
<h1>How many days until you next get paid?</h1> 
<input id="date" placeholder="Number of days..."> 
<br> 
<h1><button id="submit"> Submit </button></h1> 

<p id="Result1"></p> 
<p id="Result2"></p> 

</body> 
</html>

和myscript.js是：

document.addEventListener('DOMContentLoaded', function() { 
    document.getElementById('submit').addEventListener('click', myfunction); 
}); 


function myfunction() { 
var balance, owed, debt, date, result1, result2; 
balance = parseInt(document.getElementById("balance").value); 
owed = parseInt(document.getElementById("owed").value); 
debt = parseInt(document.getElementById("debt").value); 
date = parseInt(document.getElementById("date").value); 
result1 = balance+debt-owed; 
result2 = result1/date; 
document.getElementById("Result1").innerHTML="You currently have " + result1 + " left to spend"; 
document.getElementById("Result2").innerHTML="Daily allowance is " + result2; 
};

的應用程序現在工作得很好，並沒有錯誤獲得非常有用的調試工具，拿起了我不知道是否存在。對於像我這樣的初學者：右鍵單擊應用程序窗口，然後選擇「檢查元素」 - 它會打開開發人員工具，並讓您看到任何錯誤。

再次感謝您在此事上的幫助，Rob W！

來源

2014-01-25 10:54:17 RailsStudent

初學者：鉻在應用程序中的JavaScript

回答

相關問題