Bu adımda şunları öğreneceksiniz:
- Uygulamanızın içinde harici web içeriğini güvenli ve korumalı bir şekilde gösterme.
Bu adımın tamamlanması için tahmini süre: 10 dakika.
Bu adımda ne tamamlayacağınızı önizlemek için bu sayfanın en altına atlayın ↓.
Web görünümü etiketi hakkında bilgi
Bazı uygulamaların harici web içeriğini kullanıcıya doğrudan sunması, ancak bunları uygulama deneyiminin içinde tutması gerekir. Örneğin, bir haber toplayıcı, harici sitelerdeki haberleri, orijinal sitenin tüm biçimlendirmesi, resimleri ve davranışıyla birlikte yerleştirmek isteyebilir. Bu ve diğer kullanımlar için Chrome Uygulamaları'nda webview adı verilen özel bir HTML etiketi bulunur.
Web görünümü etiketini uygulama
Yapılacaklar listesi öğesi metnindeki URL'leri aramak ve bir köprü oluşturmak için Todo uygulamasını güncelleyin. Bağlantı tıklandığında, içeriği sunan bir web görünümüyle yeni bir Chrome Uygulaması penceresi (tarayıcı sekmesi değil) açılır.
İzinleri güncelle
manifest.json dosyasında webview iznini isteyin:
"permissions": [
"storage",
"alarms",
"notifications",
"webview"
],
Web görünümü yerleştirme sayfası oluşturma
Proje klasörünüzün kök dizininde yeni bir dosya oluşturun ve dosyaya webview.html adını verin. Bu dosya, tek bir <webview> etiketine sahip temel bir web sayfasıdır:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<webview style="width: 100%; height: 100%;"></webview>
</body>
</html>
Yapılacaklar listesindeki URL'leri ayrıştırma
controller.js'nin sonuna _parseForURLs() adlı yeni bir yöntem ekleyin:
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://" veya "https://" ile başlayan bir dize bulunduğunda, URL'yi sarmalamak için bir HTML bağlantı etiketi oluşturulur.
Yapılacaklar listesinde köprü oluştur
controller.js içinde showAll() dosyasını bulun. Daha önce eklenen _parseForURLs() yöntemini kullanarak bağlantıları ayrıştırmak için showAll() uygulamasını güncelleyin:
/**
* 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));
};
Aynı işlemi showActive() ve showCompleted() için de yapın:
/**
* 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));
};
Son olarak editItem() için _parseForURLs() ekleyin:
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() ürününde, etiketin innerHTML yerine etiketin innerText öğesini kullanacak şekilde kodu düzeltin:
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;
...
}
Web görünümü içeren yeni bir pencere aç
controller.js dosyasına bir _doShowUrl() yöntemi ekleyin. Bu yöntem, chrome.app.window.create() aracılığıyla, pencere kaynağı olarak webview.html'nin kullanıldığı yeni bir Chrome Uygulaması penceresi açar:
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() geri çağırmasında web görünümü URL'sinin src etiket özelliği aracılığıyla nasıl ayarlandığına dikkat edin.
Son olarak, kullanıcı bir bağlantıyı tıkladığında doShowUrl() çağrısı yapmak için Controller oluşturucunun içine bir tıklama etkinliği işleyici ekleyin:
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));
...
}
Tamamlanmış Todo uygulamanızı başlatma
4. Adımı tamamladınız! Uygulamanızı yeniden yükler ve tam URL'si http:// veya https:// ile başlayan bir yapılacaklar listesi öğesi eklerseniz şunun gibi bir şey görürsünüz:
Daha fazla bilgi için
Bu adımda tanıtılan API'lerden bazıları hakkında daha ayrıntılı bilgi için aşağıdaki makalelere bakın:
Bir sonraki adıma geçmeye hazır mısınız? 5. Adım - Web'den resim ekleme » adımına gidin.