مرحله 4: پیوندهای خارجی را با نمای وب باز کنید

در این مرحله یاد خواهید گرفت:

  • چگونه محتوای وب خارجی را در داخل برنامه خود به صورت ایمن و جعبه ایمنی نشان دهیم.

زمان تخمینی برای تکمیل این مرحله: 10 دقیقه.
برای پیش نمایش آنچه در این مرحله تکمیل می کنید، به پایین این صفحه بروید ↓ .

درباره تگ webview اطلاعاتی کسب کنید

برخی از برنامه ها باید محتوای وب خارجی را مستقیماً به کاربر ارائه دهند اما آنها را در تجربه برنامه نگه دارند. به عنوان مثال، یک جمع‌آورنده اخبار ممکن است بخواهد اخبار سایت‌های خارجی را با تمام قالب‌بندی، تصاویر و رفتار سایت اصلی جاسازی کند. برای این موارد و موارد دیگر، Chrome Apps یک برچسب HTML سفارشی به نام webview دارد.

برنامه Todo با استفاده از نمای وب

تگ webview را پیاده سازی کنید

برنامه Todo را به روز کنید تا URL ها را در متن مورد todo جستجو کنید و یک پیوند ایجاد کنید. وقتی روی پیوند کلیک می‌شود، یک پنجره جدید برنامه Chrome (نه برگه مرورگر) با نمای وب که محتوا را ارائه می‌کند باز می‌شود.

به روز رسانی مجوزها

در manifest.json ، مجوز webview را درخواست کنید: 

"permissions": [
  "storage",
  "alarms",
  "notifications",
  "webview"
],

یک صفحه embedder webview ایجاد کنید

یک فایل جدید در ریشه پوشه پروژه خود ایجاد کنید و نام آن را webview.html بگذارید. این فایل یک صفحه وب اولیه با یک تگ <webview> است: 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <webview style="width: 100%; height: 100%;"></webview>
</body>
</html>

URL ها را در موارد انجام کار تجزیه کنید

در انتهای 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://» شروع می‌شود، یافت می‌شود، یک تگ لنگر HTML ایجاد می‌شود تا اطراف URL را بپیچد.

showAll() در controller.js پیدا کنید. با استفاده از روش _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() کد را تصحیح کنید تا از 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() به controller.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 webview از طریق ویژگی تگ 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 را تمام کردید! اگر برنامه خود را مجدداً بارگیری کنید و یک مورد todo با یک URL کامل که با http:// یا https:// شروع می شود اضافه کنید، باید چیزی شبیه به این را ببینید:

برای اطلاعات بیشتر

برای اطلاعات دقیق تر در مورد برخی از API های معرفی شده در این مرحله، به آدرس زیر مراجعه کنید:

برای ادامه به مرحله بعدی آماده هستید؟ به مرحله 5 بروید - اضافه کردن تصاویر از وب »