Chrome 91 版的新功能

Pete LePage

以下是一些注意事項：

我是 Pete LePage，現在在家工作並拍攝影片，讓我們一起來看看 Chrome 91 有哪些新功能可供開發人員使用！

File System Access API 的建議名稱

今年 Fugu 專案推出的 API 中，我最喜歡的 API 之一就是 File System Access API。使用者授予權限後，應用程式就能與使用者裝置上的檔案互動，就像其他已安裝的應用程式一樣，讓您打造更自然的使用者體驗。

從 Chrome 91 開始，您現在可以建議要與之互動的檔案或目錄名稱和位置。如要這麼做，請將 suggestedName 屬性做為 showSaveFilePicker 選項的一部分傳遞。

const fileHandle = await self.showSaveFilePicker({
  suggestedName: 'Untitled Text.txt',
  types: [{
    description: 'Text documents',
    accept: {
      'text/plain': ['.txt'],
    },
  }],
});

預設的起始目錄也是如此。舉例來說，文字編輯器可能會在 documents 資料夾中啟動檔案儲存或檔案開啟對話方塊。而圖片編輯器可能會從 pictures 資料夾開始。您可以傳遞 startIn 屬性，建議預設的啟動目錄。

const fileHandle = await self.showOpenFilePicker({
  startIn: 'documents'
});

請參閱 Tom 的檔案系統存取權文章，瞭解詳情。

讀取剪貼簿中的檔案

還有另一個新推出的 API，可用於與 Chrome 91 中的檔案互動。在電腦上，網頁應用程式現在可以讀取剪貼簿中的檔案。(Safari 自 2018 年起就支援從剪貼簿讀取檔案)。

當然，您無法取得剪貼簿的無限制存取權，因此必須設定 paste 事件監聽器。接著，您可以在事件處理常式中存取剪貼簿中每個檔案的內容。

window.addEventListener('paste', onPaste);

async function onPaste(e) {
  const file = e.clipboardData.files[0];
  const contents = await file.text();
  ...
}

在聯盟網站上分享憑證

如果您的網站有多個網域，且這些網域共用相同的帳戶管理後端，您現在可以將網站彼此關聯，讓使用者只需儲存一次憑證，即可在任何關聯網站中使用 Chrome 密碼管理工具的建議。

當您的網站由不同的頂層網域 (例如 google.com 和 google.ca) 提供服務時，這會是理想的做法。或者，您可能有多個網域名稱。

如要關聯網站，您必須建立 assetlinks.json 檔案，定義網域之間的關係。在下方範例中，我會告訴瀏覽器 .com 和 .co.uk 網域皆相關，且可共用憑證。

[{
  "relation": ["delegate_permission/common.get_login_creds"],
  "target": {
    "namespace": "web",
    "site": "https://www.example.com"
  }
 },
{
  "relation": ["delegate_permission/common.get_login_creds"],
  "target": {
    "namespace": "web",
    "site": "https://www.example.co.uk"
  }
 }]

接著，請在每個網域的 .well-known 資料夾中代管 assetlinks.json 檔案。

這項功能將從 Chrome 91 開始逐步推出，可能不會在第一天就推出，因此請參閱「啟用 Chrome 可在相關網站之間共用登入憑證」一文，瞭解最新詳情。

還有更多獎品等著您！

當然，還有許多其他功能。

所有 2021 年 I/O 大會影片現已上線，其中有許多精彩內容，歡迎觀賞！

Web Transport (先前稱為 Quic Transport) 已進行許多變更，並開始進行新的來源測試。

Web Assembly SIMD 已完成原始試用，並開放所有使用者使用。

更新後的表單元素終於在 Android 上推出，可改善使用者體驗。

<link> 元素的 media 屬性將會為 link rel="icon" 提供支援，也就是說，您可以根據媒體查詢定義不同的圖示。例如深色和淺色模式的圖示不同。

<link
  rel="icon"
  media="(prefers-color-scheme: dark)"
  href="/icons/dark.png">
<link
  rel="icon"
  media="(prefers-color-scheme: light)"
  href="/icons/light.png">

延伸閱讀

這份文件僅涵蓋部分重點。請參閱下方連結，瞭解 Chrome 91 的其他變更。

訂閱

如要隨時掌握最新消息，請訂閱 Chrome 開發人員 YouTube 頻道，這樣一來，我們發布新影片時，你就會收到電子郵件通知。

我是 Pete LePage，Chrome 92 版一推出，我就會在這裡告訴你 Chrome 有哪些新功能！