Начинающий: JavaScript в приложениях Chrome

Question

Начинающий: JavaScript в приложениях Chrome

0

Я только начинаю с приложений 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 и мое приложение.

Заранее спасибо за вашу помощь.

RailsStudent 18 янв. 2014, в 14:33

Источник

0

Ваша проблема вызвана CSP: developer.chrome.com/apps/contentSecurityPolicy.html . Откройте инструменты разработчика вашего приложения, чтобы начать отладку.
Rob W 18 янв. 2014, в 15:22
0

Эй, Роб, какая часть CSP, по-твоему, здесь нарушается?
Draško Kokić 18 янв. 2014, в 17:35
0

Спасибо за ваш быстрый и полезный ответ!
RailsStudent 18 янв. 2014, в 17:40
0

Оказывается, проблема была в CSP - нарушением было использование мной обработчика событий «onclick» внутри index.html. Решением было добавить: document.addEventListener ('DOMContentLoaded', function () {document.getElementById ('submit'). AddEventListener ('click', myfunction);}); в myscript.js и удалите onclick из iindex.html, предоставив кнопке идентификатор «submit».
RailsStudent 18 янв. 2014, в 17:42

Показать ещё 2 комментария

Теги:

javascript

html

google-chrome

google-chrome-extension

1 ответ

Ещё вопросы

Ваша проблема вызвана CSP: developer.chrome.com/apps/contentSecurityPolicy.html . Откройте инструменты разработчика вашего приложения, чтобы начать отладку.
Эй, Роб, какая часть CSP, по-твоему, здесь нарушается?
Спасибо за ваш быстрый и полезный ответ!
Оказывается, проблема была в CSP - нарушением было использование мной обработчика событий «onclick» внутри index.html. Решением было добавить: document.addEventListener ('DOMContentLoaded', function () {document.getElementById ('submit'). AddEventListener ('click', myfunction);}); в myscript.js и удалите onclick из iindex.html, предоставив кнопке идентификатор «submit».

RailsStudent · Answer 1 · 2014-01-25T09-26-00.000Z

Напомним: моя проблема заключалась в использовании "onclick" в index.html, который не разрешен в приложениях Chrome - как объясняется в CSP:

Вы не можете использовать встроенные скрипты на своих страницах приложения Chrome. Ограничение запрещает как блоки, так и обработчики событий().

Вместо этого обработка события "click" должна выполняться внутри 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;
};

Приложение теперь работает отлично, и в очень полезных инструментах отладки нет ошибок, о которых я понятия не имел. Для начинающих, таких как я: щелкните правой кнопкой мыши окно приложения и "проверяйте элемент" - он открывает инструменты разработчика и позволяет вам видеть любые ошибки.

Еще раз спасибо за вашу помощь в этом вопросе, Роб У!