Chrome 91 版的新功能

Pete LePage

以下是一些注意事項：

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

File System Access API 的建議名稱

File System Access API，是我今年在 Fugu 專案中最喜歡的 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 有哪些新功能！