Au cours de cette étape, vous allez découvrir:
- Afficher du contenu Web externe dans votre application de façon sécurisée et dans un environnement de bac à sable
Temps estimé pour terminer cette étape: 10 minutes.
Pour prévisualiser ce que vous allez réaliser au cours de cette étape, accédez au bas de cette page ↓.
En savoir plus sur la balise WebView
Certaines applications doivent présenter du contenu Web externe directement à l'utilisateur, tout en le conservant dans l'expérience de l'application. Par exemple, un agrégateur d'actualités peut vouloir intégrer les actualités de sites externes avec la mise en forme, les images et le comportement du site d'origine. Pour ces utilisations et d'autres, les applications Chrome disposent d'une balise HTML personnalisée appelée webview.
Implémenter la balise WebView
Mettez à jour l'application Liste de tâches pour rechercher des URL dans le texte des tâches et créer un lien hypertexte. Lorsque vous cliquez sur le lien, une nouvelle fenêtre d'application Chrome (et non un onglet de navigateur) s'ouvre avec une WebView présentant le contenu.
Modifier les autorisations
Dans le fichier manifest.json, demandez l'autorisation webview:
"permissions": [
"storage",
"alarms",
"notifications",
"webview"
],
Créer une page d'intégrateur WebView
Créez un fichier à la racine du dossier de votre projet et nommez-le webview.html. Ce fichier est une page Web de base avec une balise <webview>:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<webview style="width: 100%; height: 100%;"></webview>
</body>
</html>
Analyser des URL dans les tâches
À la fin de controller.js, ajoutez une méthode appelée _parseForURLs():
Controller.prototype._getCurrentPage = function () {
return document.location.hash.split('/')[1];
};
Controller.prototype._parseForURLs = function (text) {
var re = /(https?:\/\/[^\s"<>,]+)/g;
return text.replace(re, '<a href="$1" data-src="$1">$1</a>');
};
// Export to window
window.app.Controller = Controller;
})(window);
Chaque fois qu'une chaîne commençant par "http://" ou "https://" est détectée, une balise d'ancrage HTML est créée pour encapsuler l'URL.
Afficher les liens hypertextes dans la liste des tâches
Recherchez showAll() dans controller.js. Mettez à jour showAll() pour analyser les liens à l'aide de la méthode _parseForURLs() ajoutée précédemment:
/**
* An event to fire on load. Will get all items and display them in the
* todo-list
*/
Controller.prototype.showAll = function () {
this.model.read(function (data) {
this.$todoList.innerHTML = this.view.show(data);
this.$todoList.innerHTML = this._parseForURLs(this.view.show(data));
}.bind(this));
};
Procédez de la même manière pour showActive() et showCompleted():
/**
* Renders all active tasks
*/
Controller.prototype.showActive = function () {
this.model.read({ completed: 0 }, function (data) {
this.$todoList.innerHTML = this.view.show(data);
this.$todoList.innerHTML = this._parseForURLs(this.view.show(data));
}.bind(this));
};
/**
* Renders all completed tasks
*/
Controller.prototype.showCompleted = function () {
this.model.read({ completed: 1 }, function (data) {
this.$todoList.innerHTML = this.view.show(data);
this.$todoList.innerHTML = this._parseForURLs(this.view.show(data));
}.bind(this));
};
Enfin, ajoutez _parseForURLs() à editItem():
Controller.prototype.editItem = function (id, label) {
...
var onSaveHandler = function () {
...
// Instead of re-rendering the whole view just update
// this piece of it
label.innerHTML = value;
label.innerHTML = this._parseForURLs(value);
...
}.bind(this);
...
}
Toujours dans editItem(), corrigez le code pour qu'il utilise le innerText du libellé au lieu de son innerHTML:
Controller.prototype.editItem = function (id, label) {
...
// Get the innerHTML of the label instead of requesting the data from the
// Get the innerText of the label instead of requesting the data from the
// ORM. If this were a real DB this would save a lot of time and would avoid
// a spinner gif.
input.value = label.innerHTML;
input.value = label.innerText;
...
}
Ouvrir une nouvelle fenêtre contenant la WebView
Ajoutez une méthode _doShowUrl() à controller.js. Cette méthode ouvre une nouvelle fenêtre de l'application Chrome via chrome.app.window.create() avec webview.html comme source de la fenêtre:
Controller.prototype._parseForURLs = function (text) {
var re = /(https?:\/\/[^\s"<>,]+)/g;
return text.replace(re, '<a href="$1" data-src="$1">$1</a>');
};
Controller.prototype._doShowUrl = function(e) {
// only applies to elements with data-src attributes
if (!e.target.hasAttribute('data-src')) {
return;
}
e.preventDefault();
var url = e.target.getAttribute('data-src');
chrome.app.window.create(
'webview.html',
{hidden: true}, // only show window when webview is configured
function(appWin) {
appWin.contentWindow.addEventListener('DOMContentLoaded',
function(e) {
// when window is loaded, set webview source
var webview = appWin.contentWindow.
document.querySelector('webview');
webview.src = url;
// now we can show it:
appWin.show();
}
);
});
};
// Export to window
window.app.Controller = Controller;
})(window);
Dans le rappel chrome.app.window.create(), notez comment l'URL de la WebView est définie via l'attribut de balise src.
Enfin, ajoutez un écouteur d'événements de clic dans le constructeur Controller pour appeler doShowUrl() lorsqu'un utilisateur clique sur un lien:
function Controller(model, view) {
...
this.router = new Router();
this.router.init();
this.$todoList.addEventListener('click', this._doShowUrl);
window.addEventListener('load', function () {
this._updateFilterState();
}.bind(this));
...
}
Lancer votre application Todo terminée
Vous avez terminé l'étape 4. Si vous actualisez votre application et ajoutez une tâche avec une URL complète commençant par http:// ou https://, vous devriez obtenir un résultat semblable à celui-ci:
Pour en savoir plus
Pour plus d'informations sur certaines des API présentées à cette étape, reportez-vous à:
Prêt à passer à l'étape suivante ? Passez à l'Étape 5 : Ajoutez des images à partir du Web »