Bu adımda şunları öğreneceksiniz:
- Uygulamanızda 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 tamamlayacağınız işlemleri önizlemek için bu sayfanın en altına gidin ↓.
Web Görünümü etiketi hakkında bilgi
Bazı uygulamaların harici web içeriğini doğrudan kullanıcıya sunması ancak bu içeriği uygulama deneyiminde 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. Chrome uygulamaları, bu ve diğer kullanımlar için webview adlı özel bir HTML etiketine sahiptir.
WebView etiketini uygulama
To Do uygulamasında, yapılacaklar listesi öğesi metninde URL'leri arayıp köprü oluşturacak şekilde güncelleme yapın. Bağlantı tıklandığında, içeriği sunan bir web görünümünün bulunduğu 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ştirici sayfası oluşturma
Proje klasörünüzün kökünde yeni bir dosya oluşturun ve dosyayı webview.html olarak adlandırın. Bu dosya, bir <webview> etiketi içeren 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>
To Do öğelerindeki URL'leri ayrıştırma
controller.js dosyasının 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 ankraj etiketi oluşturulur.
Yapılacaklar listesindeki köprüleri oluşturma
showAll() öğesini controller.js içinde bulun. Daha önce eklenen _parseForURLs() yöntemini kullanarak bağlantıları ayrıştıracak şekilde showAll() değerini 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));
};
showActive() ve showCompleted() için de aynı işlemi 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, _parseForURLs()'ü editItem()'a 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() içindeyken kodu, etiketin innerHTML yerine innerText değerini kullanacak şekilde 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 pencere açma
controller.js dosyasına bir _doShowUrl() yöntemi ekleyin. Bu yöntem, chrome.app.window.create() aracılığıyla yeni bir Chrome uygulaması penceresi açar. Pencere kaynağı olarak webview.html kullanılır:
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ğırma işlevinde, web görünümünün URL'sinin src etiket özelliği aracılığıyla nasıl ayarlandığını unutmayın.
Son olarak, kullanıcı bir bağlantıyı tıkladığında doShowUrl() işlevini çağırmak için Controller kurucusunun 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şlatın
4. adımı tamamladınız. Uygulamanızı yeniden yükleyip http:// veya https:// ile başlayan tam URL'ye sahip bir yapılacaklar listesi öğesi eklerseniz şuna benzer 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 makaleleri inceleyin:
Sonraki adıma geçmeye hazır mısınız? 5. Adım - Web'den resim ekleyin » seçeneğine gidin