window.alert() недоступно в упакованных приложениях

Question

Я делаю приложение Chrome. Я получаю сообщение об ошибке в консоли:

window.alert() is not available in packaged apps. extensions::platformApp:17 

Line 17 этого файла только строки кода, чтобы зарегистрировать ошибку в консоли. Есть ли способ предупредить пользователя о событии в хром-приложении (например, это image?) Это потому, что у меня установлен adblock в Firefox (я не использую Chrome)? Я думал, что alert() был довольно простым. Спасибо за любую помощь.

Answer 1

Функция «alert» была отключена в приложениях Chrome, поскольку она останавливает выполнение Javascript и, таким образом, обеспечивает плохой пользовательский интерфейс. В целях развития вы должны использовать console.log, а для взаимодействия с пользователем вы должны использовать диалог на основе HTML.

Answer 2

Вы можете создать собственное синхронное оповещение/приглашение с функцией, ожидающей обещания jQuery до завершения, а затем, когда пользователь нажимает кнопку «ОК», обещает. Затем, когда вы заменяете свое «предупреждение» на «myCustomAlert», вы должны объявить функцию, которую она вызвала как «асинхронная функция», а затем «дождаться» перед вызовом.

Это может показаться сложным, но если вы играете с ним в JSFiddle, это довольно просто.

Я нашел это полезным, если вы переносите приложение, где вы не можете легко разбить функцию на разные разделы. Для этого требуется библиотека jQuery.

Вот мой пример https://jsfiddle.net/littlej247/g4k2h56c/5/

//*****HTML********* 

<button type="button" id="alertMe">Alert ME!</button> 

<div id="backgroudDiv"> <!-- This is optional but I like to grey out the background --> 
    <div id="alertDiv"> 
    <b><span id="alertTitle"></span></b> 
    <br /> 
    <span id="alertText"></span> 
    <hr> 
    <button type="button" id="alertDone">OK</button> 
    </div> 
</div> 

//Remember JS can't run in HTML files on chrome apps so functions are called by DOM 
document.getElementById("alertMe").onclick = async function() { 
    console.log("Starting function \n Processing a bunch of stuff, calculating variable(s)...."); 
    await myCustomAlert("Alert Title Here","Message"); 
    console.log("Continue processing stuff with the variable(s) after the alert is clicked.... \n function finished"); 
}; 


//*****JavaScript********* 

//Alerts can not be used in chrome apps, myCustomAlert function is a replacement. 
var alertPromise 
function myCustomAlert(messageTitle,messageBody){ 
    console.log("myCustomAlert has been called"); 
    alertPromise = $.Deferred(); 

    document.getElementById("alertTitle").textContent=messageTitle; 
    document.getElementById("alertText").textContent=messageBody; 
    document.getElementById('backgroudDiv').style.display='block'; 

    return $.when(alertPromise).done(); 
} 

document.getElementById("alertDone").onclick = function() { 
    console.log("Finally, User clicked Done, \n now we can get back to work.."); 
    document.getElementById('backgroudDiv').style.display='none'; 
    alertPromise.resolve(); 
    return(false); 
}; 

//*****Styles********* 

#alertDiv { 
    width: 400px; 
    padding: 15px; 
    margin: 100px auto auto auto; 
    z-index: 10000; 
    background-color: lightblue; 
    border-style: solid; 
    border-color: black; 
} 
#backgroudDiv { 
    display: none; 
    position: fixed; 
    z-index: 9000; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0,0,0,0.4); 
}