इस चरण में आपको यह जानकारी मिलेगी:
- अपने ऐप्लिकेशन में, बाहरी वेब कॉन्टेंट को सुरक्षित और सैंडबॉक्स किए गए तरीके से दिखाने का तरीका.
यह चरण पूरा करने में लगने वाला अनुमानित समय: 10 मिनट.
इस चरण में आपको क्या करना है, इसकी झलक देखने के लिए, इस पेज पर सबसे नीचे जाएं ↓.
वेबव्यू टैग के बारे में जानकारी
कुछ ऐप्लिकेशन को उपयोगकर्ता को सीधे बाहरी वेब कॉन्टेंट दिखाना होता है, लेकिन उन्हें ऐप्लिकेशन के अनुभव में ही रखना होता है. उदाहरण के लिए, हो सकता है कि कोई न्यूज़ एग्रीगेटर, बाहरी साइटों से मिली खबरों को ओरिजनल साइट के फ़ॉर्मैट, इमेज, और व्यवहार के साथ एम्बेड करना चाहे. इन और अन्य इस्तेमाल के लिए, Chrome ऐप्लिकेशन में वेबव्यू नाम का कस्टम एचटीएमएल टैग होता है.
वेबव्यू टैग लागू करें
Todo आइटम के टेक्स्ट में यूआरएल खोजने और हाइपरलिंक बनाने के लिए, Todo ऐप्लिकेशन को अपडेट करें. लिंक पर क्लिक करने पर, 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>
'क्या-क्या करना है' आइटम में यूआरएल पार्स करना
controller.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://" से शुरू होने वाली कोई स्ट्रिंग मिलती है, तो यूआरएल के चारों ओर रैप करने के लिए एचटीएमएल ऐंकर टैग बनाया जाता है.
काम की सूची में हाइपरलिंक दिखाएं
controller.js में showAll() ढूंढें. पहले जोड़े गए _parseForURLs() तरीके का इस्तेमाल करके, लिंक पार्स करने के लिए showAll() को अपडेट करें:
/**
* 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() में, कोड को ठीक करें, ताकि वह लेबल के innerHTML के बजाय लेबल के innerText का इस्तेमाल करे:
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;
...
}
वेबव्यू वाली नई विंडो खोलें
controller.js में _doShowUrl() तरीका जोड़ें. इस तरीके से, chrome.app.window.create() के ज़रिए Chrome ऐप्लिकेशन की नई विंडो खोली जाती है. इसमें विंडो के सोर्स के तौर पर 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() कॉलबैक में, ध्यान दें कि 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 ऐप्लिकेशन लॉन्च करना
आपने चौथा चरण पूरा कर लिया है! अगर आपने अपना ऐप्लिकेशन रीलोड किया और http:// या https:// से शुरू होने वाले पूरे यूआरएल के साथ कोई टास्क जोड़ा, तो आपको कुछ ऐसा दिखेगा:
अधिक जानकारी के लिए
इस चरण में शुरू किए गए कुछ एपीआई के बारे में ज़्यादा जानकारी के लिए, यह लेख पढ़ें:
क्या आप अगले चरण पर जाने के लिए तैयार हैं? पांचवां चरण - वेब से इमेज जोड़ना » पर जाएं