На этом этапе вы узнаете:
- Как безопасно и изолированно отображать внешний веб-контент внутри вашего приложения.
Примерное время выполнения этого шага: 10 минут.
Чтобы просмотреть то, что вы выполните на этом этапе, прыгните вниз этой страницы ↓ .
Подробнее о теге веб-просмотра
Некоторым приложениям необходимо представлять внешний веб-контент непосредственно пользователю, но хранить его внутри приложения. Например, агрегатор новостей может захотеть встроить новости с внешних сайтов со всем форматированием, изображениями и поведением исходного сайта. Для этих и других целей в приложениях Chrome есть специальный HTML-тег под названием webview .
Реализация тега веб-просмотра
Обновите приложение Todo, чтобы оно выполняло поиск URL-адресов в тексте элемента задачи и создавало гиперссылку. При нажатии на ссылку открывается новое окно приложения Chrome (а не вкладка браузера) с веб-просмотром, представляющим контент.
Обновить разрешения
В файле Manifest.json запросите разрешение webview :
"permissions": [
"storage",
"alarms",
"notifications",
"webview"
],
Создание страницы внедрения веб-просмотра
Создайте новый файл в корне папки вашего проекта и назовите его webview.html . Этот файл представляет собой базовую веб-страницу с одним тегом <webview> :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<webview style="width: 100%; height: 100%;"></webview>
</body>
</html>
Анализ URL-адресов в задачах
В конце контроллера.js добавьте новый метод _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);
Всякий раз, когда обнаруживается строка, начинающаяся с «http://» или «https://», вокруг URL-адреса создается тег привязки HTML.
Отображение гиперссылок в списке дел
Найдите showAll() в контроллере.js . Обновите showAll() для анализа ссылок с помощью добавленного ранее метода _parseForURLs() :
/**
* 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));
};
Сделайте то же самое для showActive() и 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));
};
И, наконец, добавьте _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);
...
}
По-прежнему в editItem() исправьте код, чтобы он использовал innerText метки вместо 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;
...
}
Открыть новое окно, содержащее веб-просмотр
Добавьте метод _doShowUrl() в контроллер.js . Этот метод открывает новое окно приложения Chrome через chrome.app.window.create() с webview.html в качестве источника окна:
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);
Обратите внимание, что в обратном вызове chrome.app.window.create() URL-адрес веб-просмотра задается с помощью атрибута тега src .
Наконец, добавьте прослушиватель событий щелчка внутри конструктора Controller , чтобы вызывать doShowUrl() , когда пользователь нажимает на ссылку:
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));
...
}
Запустите готовое приложение Todo.
Вы закончили Шаг 4! Если вы перезагрузите приложение и добавите элемент задачи с полным URL-адресом, начинающимся с http:// или https://, вы должны увидеть что-то вроде этого:
Для дополнительной информации
Более подробную информацию о некоторых API, представленных на этом этапе, см.:
Готовы перейти к следующему шагу? Перейдите к шагу 5. Добавление изображений из Интернета »