W tym kroku poznasz:
- Jak wyświetlać zewnętrzne treści internetowe w aplikacji w bezpieczny sposób w trybie piaskownicy.
Szacowany czas potrzebny na wykonanie tego kroku: 10 minut.
Aby zobaczyć, co wykonasz w tym kroku, przejdź na sam dół strony ↓.
Więcej informacji o tagu WebView
Niektóre aplikacje muszą prezentować zewnętrzne treści internetowe bezpośrednio użytkownikowi, ale pozostawiać je w aplikacji. Na przykład agregator wiadomości może chcieć umieścić w witrynie wiadomości z witryn zewnętrznych z zachowaniem formatu, obrazów i zachowania z pierwotnej witryny. Na potrzeby tych i innych zastosowań Aplikacje Chrome mają niestandardowy tag HTML o nazwie webview.
Implementowanie tagu WebView
Zaktualizuj aplikację Do zrobienia, aby wyszukiwać adresy URL w tekście tego elementu i tworzyć hiperlinki. Kliknięcie linku powoduje otwarcie nowego okna aplikacji Chrome (nie karty przeglądarki) z komponentem WebView prezentującym zawartość.
Aktualizuj uprawnienia
W pliku manifest.json poproś o uprawnienie webview:
"permissions": [
"storage",
"alarms",
"notifications",
"webview"
],
Tworzenie strony do umieszczania komponentów WebView
Utwórz nowy plik w katalogu głównym folderu projektu i nazwij go webview.html. Ten plik to podstawowa strona internetowa z 1 tagiem <webview>:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<webview style="width: 100%; height: 100%;"></webview>
</body>
</html>
Analizuj adresy URL w elementach listy zadań
Na końcu pliku controller.js dodaj nową metodę o nazwie _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);
Po każdym znalezieniu ciągu znaków zaczynającego się od „http://” lub „https://” tworzony jest tag kotwicy HTML, który otacza adres URL.
Renderuj hiperlinki na liście zadań do wykonania.
Znajdź showAll() w pliku controller.js. Zaktualizuj showAll(), aby umożliwić analizowanie linków za pomocą dodanej wcześniej metody _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));
};
Zrób to samo z elementami showActive() i 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));
};
Na koniec dodaj _parseForURLs() do aplikacji 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);
...
}
Pozostając w editItem(), napraw kod tak, aby używał innerText etykiety, a nie innerHTML etykiety:
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;
...
}
Otwórz nowe okno zawierające komponent WebView
Dodaj metodę _doShowUrl() do pliku controller.js. Ta metoda otwiera nowe okno aplikacji Chrome za pomocą chrome.app.window.create() z webview.html jako źródłem okna:
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);
W wywołaniu zwrotnym chrome.app.window.create() sprawdź, jak adres URL komponentu WebView ustawia się za pomocą atrybutu tagu src.
Na koniec dodaj detektor zdarzeń kliknięcia w konstruktorze Controller, aby wywoływać metodę doShowUrl(), gdy użytkownik kliknie link:
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));
...
}
Uruchamianie gotowej aplikacji Todo
Krok 4 został ukończony. Jeśli ponownie załadujesz aplikację i dodasz zadanie do wykonania z pełnym adresem URL zaczynającym się od http:// lub https://, zobaczysz coś takiego:
Więcej informacji
Szczegółowe informacje o niektórych interfejsach API wprowadzonych w tym kroku znajdziesz tutaj:
Chcesz przejść do następnego kroku? Przejdź do Kroku 5 – Dodaj obrazy z internetu »