From b636d4399e891cf02dae26bec285d80f836b58f2 Mon Sep 17 00:00:00 2001 From: Uiolee <22849383+uiolee@users.noreply.github.com> Date: Fri, 7 Jul 2023 22:59:50 +0800 Subject: [PATCH 01/21] Update manifest_version (#14078) --- .../webextensions/manifest.json/manifest_version/index.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/files/zh-cn/mozilla/add-ons/webextensions/manifest.json/manifest_version/index.md b/files/zh-cn/mozilla/add-ons/webextensions/manifest.json/manifest_version/index.md index c0975592224c9b..8f5f0cab3ec3ce 100644 --- a/files/zh-cn/mozilla/add-ons/webextensions/manifest.json/manifest_version/index.md +++ b/files/zh-cn/mozilla/add-ons/webextensions/manifest.json/manifest_version/index.md @@ -24,8 +24,6 @@ slug: Mozilla/Add-ons/WebExtensions/manifest.json/manifest_version 此键指定扩展使用的 manifest.json 的版本。 -目前，此值必须为 2。 - ## 示例 ```json From e015116d35b4e53ee74956351e9eacd26ff34440 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Fri, 7 Jul 2023 23:03:19 +0800 Subject: [PATCH 02/21] Bump prettier from 2.8.8 to 3.0.0 (#14059) Bumps [prettier](https://github.com/prettier/prettier) from 2.8.8 to 3.0.0. - [Release notes](https://github.com/prettier/prettier/releases) - [Changelog](https://github.com/prettier/prettier/blob/main/CHANGELOG.md) - [Commits](https://github.com/prettier/prettier/compare/2.8.8...3.0.0) --- updated-dependencies: - dependency-name: prettier dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 51066a7d7d4f3f..635fa84f21beab 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,6 @@ "lint-staged": "13.2.3", "markdownlint-cli2": "0.8.1", "markdownlint-rule-search-replace": "1.1.0", - "prettier": "2.8.8" + "prettier": "3.0.0" } } diff --git a/yarn.lock b/yarn.lock index be81df4dfd5f5d..f0ec1a33271ef0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -511,10 +511,10 @@ pidtree@^0.6.0: resolved "https://registry.yarnpkg.com/pidtree/-/pidtree-0.6.0.tgz#90ad7b6d42d5841e69e0a2419ef38f8883aa057c" integrity sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g== -prettier@2.8.8: - version "2.8.8" - resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da" - integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q== +prettier@3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.0.0.tgz#e7b19f691245a21d618c68bc54dc06122f6105ae" + integrity sha512-zBf5eHpwHOGPC47h0zrPyNn+eAEIdEzfywMoYn2XPi0P44Zp0tSq64rq0xAREh4auw2cJZHo9QUob+NqCQky4g== queue-microtask@^1.2.2: version "1.2.3" From 305e6f9b4b7673ddaf46d96811b6d59a772b3ce0 Mon Sep 17 00:00:00 2001 From: Fina <42113148+BSPR0002@users.noreply.github.com> Date: Fri, 7 Jul 2023 23:23:42 +0800 Subject: [PATCH 03/21] [zh-CN]Init /files/zh-cn/web/api/file_system_access_api/index.md (#14021) Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com> --- .../web/api/file_system_access_api/index.md | 239 ++++++++++++++++++ 1 file changed, 239 insertions(+) create mode 100644 files/zh-cn/web/api/file_system_access_api/index.md diff --git a/files/zh-cn/web/api/file_system_access_api/index.md b/files/zh-cn/web/api/file_system_access_api/index.md new file mode 100644 index 00000000000000..75ac1c828c5144 --- /dev/null +++ b/files/zh-cn/web/api/file_system_access_api/index.md @@ -0,0 +1,239 @@ +--- +title: 文件系统访问 API +slug: Web/API/File_System_Access_API +--- + +{{securecontext_header}}{{DefaultAPISidebar("File System Access API")}} + +文件系统访问 API 允许开发者使用文件读写以及文件管理功能。 + +## 概念与用法 + +此 API 允许程序与用户本地设备上的或是用户能够访问的网络文件系统上的文件进行交互。此 API 的核心功能包括读取文件、写入或保存文件以及访问目录结构。 + +大多数与文件和目录的交互都通过句柄来完成。父类 {{domxref('FileSystemHandle')}} 派生出两个子类：{{domxref('FileSystemFileHandle')}} 和 {{domxref('FileSystemDirectoryHandle')}}，分别表示文件句柄和目录句柄。 + +一个句柄代表了用户操作系统上的一个文件或目录。你可以通过调用诸如 {{domxref('window.showOpenFilePicker()')}} 和 {{domxref('window.showDirectoryPicker()')}} 一类的方法向用户显示一个文件选择器或目录选择器，以此来获得句柄。一旦调用了这些函数，选择器就会出现，用户可以用它选择一个文件或目录。只要这个步骤成功完成，就会返回句柄。 + +你还可以从以下途径获得句柄： + +- {{domxref('HTML Drag and Drop API', 'HTML 拖放 API', '', 'nocode')}} 的 {{domxref('DataTransferItem.getAsFileSystemHandle()')}} 方法。 +- [文件处理 API](https://developer.chrome.com/en/articles/file-handling/)。 + +每种句柄都提供了其独有的功能，取决于你使用的种类，会有些许差异（详见[接口](#接口)部分）。在获得句柄后，你便可以访问文件的数据或是被选中的目录的信息（包含子目录）。此 API 开辟了 web 此前一直缺乏的潜在功能。但不论如何，安全性是设计 API 时的首要考量，除非用户明确授权，否则就不允许访问文件和目录的数据。 + +> **备注：** 使用此 API 的特性时可能会抛出的各种异常已在规范定义的相关页面中列出。然而，API 与底层操作系统的交互使得实际情况更加复杂。这里提供一篇关于[在规范中列出错误对应表](https://github.com/whatwg/fs/issues/57)的提议，其中包含了一些有用的信息。 + +> **备注：** 基于 {{domxref("FileSystemHandle")}} 的对象能够被序列化存储至 {{domxref("IndexedDB API", "IndexedDB", "", "nocode")}} 数据库实例中, 也可以通过 {{domxref("window.postMessage", "postMessage()")}} 移交。 + +### 源私有文件系统 + +[源私有文件系统](https://fs.spec.whatwg.org/#origin-private-file-system)（下文简称“OPFS”）是页面所属的源专用的存储端点，它提供对一种经过高度性能优化的特殊文件的访问能力的选择，例如，对文件内容的原地、独占写入访问。 + +在 OPFS 中存储数据近似于浏览器提供的其他页面源私有存储机制（如 {{domxref("IndexedDB API", "IndexedDB API", "", "nocode")}}）。其意味着，在 OPFS 中的文件相较于用选择器选择的文件有以下不同点： + +- 访问 OPFS 中的文件不需要用户授权。 +- 清除站点数据会删除 OPFS。 +- OPFS 受浏览器配额限制。 + +在 OPFS 内可以通过以下三步来操作文件： + +1. {{domxref("StorageManager.getDirectory()")}} 方法，可以在 worker 线程或主线程中调用 [`navigator.storage.getDirectory()`](/zh-CN/docs/Web/API/Navigator/storage)，返回一个允许你访问某个目录以及其内容的 {{domxref("FileSystemDirectoryHandle")}} 对象——它代表 OPFS 的根目录。 +2. 调用 {{domxref("FileSystemDirectoryHandle.getFileHandle()")}} 方法获得一个 {{domxref('FileSystemFileHandle')}} 对象，其表示目录中指定文件的句柄。 +3. 调用文件句柄的 {{domxref('FileSystemFileHandle.createSyncAccessHandle', 'createSyncAccessHandle()')}} 方法，获得一个 {{domxref('FileSystemSyncAccessHandle')}} 对象，用于读写文件。这是一种用于高性能*同步*读写操作的句柄（其他类型的句柄是异步的）。此类的同步特性带来了性能优势，可用于异步操作开销较大的情景（例如 [WebAssembly](/zh-CN/docs/WebAssembly)）。注意：此方法为 [Web Worker](/zh-CN/docs/Web/API/Web_Workers_API) 专用。 + +虽然浏览器一般通过将 OPFS 的内容持久化到磁盘的某个位置来实现这一特性，但并非意在让用户可以轻易访问。虽然浏览器会让人产生文件是真实存在的感觉，但它们可能被存储在数据库或者其他数据结构中，你是不能指望能一一对应地找到那些被创建出来的文件的。 + +> **备注：** 使用 {{domxref('FileSystemSyncAccessHandle.write()')}} 的写入操作是原地的，即，写入到写入器中的更改会同时写入到实际的底层文件。这不同于此 API 中其他那些在关闭了写入流后才会将更改提交到磁盘的写入机制（例如 {{domxref('FileSystemFileHandle.createWritable()')}}）。 + +### 保存文件 + +此 API 也提供“保存”功能： + +- 对于异步句柄，使用 {{domxref('FileSystemWritableFileStream')}} 接口。当你想要保存的数据是 {{domxref('Blob')}}、{{jsxref("String")}} 对象、字符串字面量或 {{jsxref('ArrayBuffer', 'buffer')}} 形式的时候，你可以打开一个写入流把数据保存到文件。可以是已经存在的文件，也可以是新文件。 +- 对于同步的 {{domxref('FileSystemSyncAccessHandle')}}，使用 {{domxref('FileSystemSyncAccessHandle.write', 'write()')}} 方法写入更改。你还可以选择调用 {{domxref('FileSystemSyncAccessHandle.flush', 'flush()')}} 以使更改在指定的时间点写入磁盘（或者你也可以让底层操作系统在其认为合适的时间点执行写入，这么做大多数情况下应该都不会有问题）。 + +## 接口 + +- {{domxref("FileSystemHandle")}} + **`FileSystemHandle`** 接口的对象代表一个条目。多个句柄可以指代同一个条目。大多数情况你都不会直接用到 `FileSystemHandle`，而是会用到它的两个子接口 {{domxref('FileSystemFileHandle')}} 和 {{domxref('FileSystemDirectoryHandle')}}。 +- {{domxref("FileSystemFileHandle")}} + 提供一个文件系统条目的句柄。 +- {{domxref("FileSystemDirectoryHandle")}} + 提供一个文件系统目录的句柄。 +- {{domxref("FileSystemSyncAccessHandle")}} + 提供一个文件系统条目的同步句柄，用于在磁盘上原地操作单个文件。其在文件读写上的同步特性可在异步操作开销较大的情境中使关键方法拥有更优秀的性能，例如 [WebAssembly](/zh-CN/docs/WebAssembly)。此类只能在 [Web Worker](/zh-CN/docs/Web/API/Web_Workers_API) 中操作[源私有文件系统](#源私有文件系统)上的文件时访问。 +- {{domxref("FileSystemWritableFileStream")}} + 属于 {{domxref('WritableStream')}} 对象，附加了便于操作磁盘上单个文件的方法。 + +## 示例 + +### 访问文件 + +以下代码允许用户在文件选择器中选择一个文件。 + +```js +async function getFile() { + // 打开文件选择器并从结果中解构出第一个句柄 + const [fileHandle] = await window.showOpenFilePicker(); + const file = await fileHandle.getFile(); + return file; +} +``` + +下面的异步函数可以显示一个文件选择器，并在选择了文件时使用 `getFile()` 方法取得内容。 + +```js +const pickerOpts = { + types: [ + { + description: "Images", + accept: { + "image/*": [".png", ".gif", ".jpeg", ".jpg"], + }, + }, + ], + excludeAcceptAllOption: true, + multiple: false, +}; + +async function getTheFile() { + // 打开文件选择器并从结果中解构出第一个句柄 + const [fileHandle] = await window.showOpenFilePicker(pickerOpts); + + // 获取文件内容 + const fileData = await fileHandle.getFile(); +} +``` + +### 访问目录 + +下面的示例能够取得指定名称的目录的句柄，如果目录不存在，则创建。 + +```js +const dirName = "directoryToGetName"; + +// 假设我们已经有一个目录句柄：'currentDirHandle' +const subDir = currentDirHandle.getDirectoryHandle(dirName, { create: true }); +``` + +下面的异步函数使用 `resolve()` 来查找被选择文件相对于指定目录句柄的路径。 + +```js +async function returnPathDirectories(directoryHandle) { + // 通过显示文件选择器来获得一个文件句柄 + const [handle] = await self.showOpenFilePicker(); + if (!handle) { + // 如果用户取消了选择或者打开文件失败 + return; + } + + // 检查文件句柄是否存在于目录句柄的目录中 + const relativePaths = await directoryHandle.resolve(handle); + + if (relativePaths === null) { + // 不在目录句柄中 + } else { + // relativePaths 是一个包含名称的数组，指示相对路径 + + for (const name of relativePaths) { + // 打印数组的每个元素 + console.log(name); + } + } +} +``` + +### 写入文件 + +以下异步函数能够打开一个文件选择器，并在选择了文件时返回一个 {{domxref('FileSystemFileHandle')}}。然后使用 {{domxref('FileSystemFileHandle.createWritable()')}} 方法创建一个写入流。 + +然后将用户定义的一个 {{domxref('Blob')}} 写入流中，随后关闭该流。 + +```js +async function saveFile() { + // 创建一个新句柄 + const newHandle = await window.showSaveFilePicker(); + + // 创建一个 FileSystemWritableFileStream 用于写入 + const writableStream = await newHandle.createWritable(); + + // 写入我们的文件 + await writableStream.write(imgBlob); + + // 关闭文件并将内容写入到磁盘 + await writableStream.close(); +} +``` + +下面的示例展示能够向 `write()` 方法传递的不同选项。 + +```js +// 只传递数据（没有选项） +writableStream.write(data); + +// 向流中指定位置写入数据 +writableStream.write({ type: "write", position, data }); + +// 将文件当前的指针更新到指定的偏移位置 +writableStream.write({ type: "seek", position }); + +// 裁切文件的字节长度为 size 变量的大小 +writableStream.write({ type: "truncate", size }); +``` + +### 在 OPFS 中同步读写文件 + +这个示例展示如何在[源私有文件系统](#源私有文件系统)中同步读写文件。 + +以下异步事件处理函数处于 Web Worker 上下文，从主线程接收消息。 + +- 创建一个异步文件访问句柄。 +- 获取文件大小并创建一个 {{jsxref("ArrayBuffer")}} 来容纳它。 +- 将文件内容读取到 buffer 中。 +- 将消息编码，并将其写入到文件末尾。 +- 将更改持久化至磁盘并关闭访问句柄。 + +```js +onmessage = async (e) => { + // 获取从主线程发往 worker 的消息 + const message = e.data; + + // 获取 OPFS 中 draft 文件的句柄 + const root = await navigator.storage.getDirectory(); + const draftHandle = await root.getFileHandle("draft.txt", { create: true }); + // 获取同步访问句柄 + const accessHandle = await draftHandle.createSyncAccessHandle(); + + // 获取文件大小 + const fileSize = accessHandle.getSize(); + // 将文件内容读取到 buffer + const buffer = new DataView(new ArrayBuffer(fileSize)); + const readBuffer = accessHandle.read(buffer, { at: 0 }); + + // 将消息写入到文件末尾 + const encoder = new TextEncoder(); + const encodedMessage = encoder.encode(message); + const writeBuffer = accessHandle.write(encodedMessage, { at: readBuffer }); + + // 将更改持久化至磁盘 + accessHandle.flush(); + + // 用完 FileSystemSyncAccessHandle 记得把它关闭 + accessHandle.close(); +}; +``` + +> **备注：** 在规范早期版本中，{{domxref("FileSystemSyncAccessHandle")}} 的 {{domxref("FileSystemSyncAccessHandle.close()", "close()")}}、{{domxref("FileSystemSyncAccessHandle.flush()", "flush()")}}、{{domxref("FileSystemSyncAccessHandle.getSize()", "getSize()")}} 和 {{domxref("FileSystemSyncAccessHandle.truncate()", "truncate()")}} 被不合逻辑地指定为异步方法。此问题现已被[修正](https://github.com/whatwg/fs/issues/7)，但某些浏览器依然支持异步版本。 + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- [文件系统访问 API：简化本地文件访问](https://web.dev/file-system-access/) From a76e413ce6c7782e080c0315a936446186b269f7 Mon Sep 17 00:00:00 2001 From: A1lo Date: Fri, 7 Jul 2023 23:29:18 +0800 Subject: [PATCH 04/21] fix broken links to webextensions repo main branch (#14072) --- .../extending_the_developer_tools/index.md | 2 +- .../internationalization/index.md | 6 ++-- .../manifest.json/homepage_url/index.md | 2 +- .../user_interface/devtools_panels/index.md | 2 +- .../working_with_the_tabs_api/index.md | 33 ++++++++----------- .../your_first_webextension/index.md | 2 +- .../webextensions/content_scripts/index.md | 2 +- .../internationalization/index.md | 8 ++--- .../manifest.json/homepage_url/index.md | 2 +- .../context_menu_items/index.md | 4 +-- .../user_interface/sidebars/index.md | 4 +-- .../user_interface/toolbar_button/index.md | 2 +- .../your_first_webextension/index.md | 2 +- .../your_second_webextension/index.md | 6 ++-- 14 files changed, 35 insertions(+), 42 deletions(-) diff --git a/files/zh-cn/mozilla/add-ons/webextensions/extending_the_developer_tools/index.md b/files/zh-cn/mozilla/add-ons/webextensions/extending_the_developer_tools/index.md index 7ab07a85345ba9..4420fd9c3eb5cb 100644 --- a/files/zh-cn/mozilla/add-ons/webextensions/extending_the_developer_tools/index.md +++ b/files/zh-cn/mozilla/add-ons/webextensions/extending_the_developer_tools/index.md @@ -148,4 +148,4 @@ The following are not supported: The [webextensions-examples](https://github.com/mdn/webextensions-examples) repo on GitHub, contains several examples of extensions that use devtools panels: -- [devtools-panels](https://github.com/mdn/webextensions-examples/blob/master/devtools-panels/) use devtools panels: +- [devtools-panels](https://github.com/mdn/webextensions-examples/tree/main/devtools-panels) use devtools panels: diff --git a/files/zh-cn/mozilla/add-ons/webextensions/internationalization/index.md b/files/zh-cn/mozilla/add-ons/webextensions/internationalization/index.md index a18f4fb669fd61..e266cfec990427 100644 --- a/files/zh-cn/mozilla/add-ons/webextensions/internationalization/index.md +++ b/files/zh-cn/mozilla/add-ons/webextensions/internationalization/index.md @@ -55,7 +55,7 @@ slug: Mozilla/Add-ons/WebExtensions/Internationalization 因此[在我们这个示例应用](https://github.com/mdn/webextensions-examples/tree/main/notify-link-clicks-i18n/_locales)中，我们有如下几个目录："en"（英语）、"de"（德语）、"nl"（荷兰语）以及 "ja"（日语）。每个目录都包含一个 `messages.json` 文件。 -现在我们来看其中一个文件（[\_locales/en/messages.json](https://github.com/mdn/webextensions-examples/blob/master/notify-link-clicks-i18n/_locales/en/messages.json)）的结构： +现在我们来看其中一个文件（[\_locales/en/messages.json](https://github.com/mdn/webextensions-examples/blob/main/notify-link-clicks-i18n/_locales/en/messages.json)）的结构： ```json { @@ -97,7 +97,7 @@ slug: Mozilla/Add-ons/WebExtensions/Internationalization ### 在 manifests 中检索本地化的字符串 -你的 [manifest.json](https://github.com/mdn/webextensions-examples/blob/master/notify-link-clicks-i18n/manifest.json) 包含显示给用户的字符串，例如附加组件的名称和描述。如果你将这些字符串国际化，并将合适的翻译放到 messages.json 中，则用户将根据当前语言区域看到适当的字符串翻译。 +你的 [manifest.json](https://github.com/mdn/webextensions-examples/blob/main/notify-link-clicks-i18n/manifest.json) 包含显示给用户的字符串，例如附加组件的名称和描述。如果你将这些字符串国际化，并将合适的翻译放到 messages.json 中，则用户将根据当前语言区域看到适当的字符串翻译。 要将这些字符串国际化，按如下格式指定： @@ -148,7 +148,7 @@ header { - {{WebExtAPIRef("i18n.getAcceptLanguages()")}} 和 {{WebExtAPIRef("i18n.getUILanguage()")}} 这两个方法可以在你需要根据语言区域自定义用户界面时使用 — 或许你希望根据用户想要的语言在首选项列表更高层显示首选项，或只显示和特定语言有关的文化信息，又或是按浏览器语言显示格式化过的日期。 - {{WebExtAPIRef("i18n.detectLanguage()")}} 这个方法可以用来检测用户提交内容的语言，并将其正确格式化。 -在我们的 [notify-link-clicks-i18n](https://github.com/mdn/webextensions-examples/tree/main/notify-link-clicks-i18n) 示例中，[后台脚本](https://github.com/mdn/webextensions-examples/blob/master/notify-link-clicks-i18n/background-script.js)包含下列代码： +在我们的 [notify-link-clicks-i18n](https://github.com/mdn/webextensions-examples/tree/main/notify-link-clicks-i18n) 示例中，[后台脚本](https://github.com/mdn/webextensions-examples/blob/main/notify-link-clicks-i18n/background-script.js)包含下列代码： ```js var title = browser.i18n.getMessage("notificationTitle"); diff --git a/files/zh-cn/mozilla/add-ons/webextensions/manifest.json/homepage_url/index.md b/files/zh-cn/mozilla/add-ons/webextensions/manifest.json/homepage_url/index.md index 2353ae575ab927..7bf7ecb0e07281 100644 --- a/files/zh-cn/mozilla/add-ons/webextensions/manifest.json/homepage_url/index.md +++ b/files/zh-cn/mozilla/add-ons/webextensions/manifest.json/homepage_url/index.md @@ -36,7 +36,7 @@ original_slug: Mozilla/Add-ons/WebExtensions/manifest.json/主页地址 ## 示例 ```json -"homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/beastify" +"homepage_url": "https://github.com/mdn/webextensions-examples/tree/main/beastify" ``` ## 浏览器兼容性 diff --git a/files/zh-cn/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.md b/files/zh-cn/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.md index 44e8b04cfdf5ee..97cd4a7ce305aa 100644 --- a/files/zh-cn/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.md +++ b/files/zh-cn/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.md @@ -62,4 +62,4 @@ For details on how to create icons to use with your developer tools panel, see [ ## Examples -The [webextensions-examples](https://github.com/mdn/webextensions-examples) repository on GitHub includes the [devtools-panels](https://github.com/mdn/webextensions-examples/blob/master/devtools-panels/) example which implements a devtools panel. +The [webextensions-examples](https://github.com/mdn/webextensions-examples) repository on GitHub includes the [devtools-panels](https://github.com/mdn/webextensions-examples/tree/main/devtools-panels) example which implements a devtools panel. diff --git a/files/zh-cn/mozilla/add-ons/webextensions/working_with_the_tabs_api/index.md b/files/zh-cn/mozilla/add-ons/webextensions/working_with_the_tabs_api/index.md index 85fb8d4ee026fc..390931f98fe214 100644 --- a/files/zh-cn/mozilla/add-ons/webextensions/working_with_the_tabs_api/index.md +++ b/files/zh-cn/mozilla/add-ons/webextensions/working_with_the_tabs_api/index.md @@ -63,7 +63,7 @@ To see how {{WebExtAPIRef("tabs.query")}} and {{WebExtAPIRef("tabs.Tab")}} are u ### manifest.json -Here is the [manifest.json](https://github.com/mdn/webextensions-examples/blob/master/tabs-tabs-tabs/manifest.json): +Here is the [manifest.json](https://github.com/mdn/webextensions-examples/blob/main/tabs-tabs-tabs/manifest.json): ```json { @@ -73,7 +73,7 @@ Here is the [manifest.json](https://github.com/mdn/webextensions-examples/blob/m "default_popup": "tabs.html" }, "description": "A list of methods you can perform on a tab.", - "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/tabs-tabs-tabs", + "homepage_url": "https://github.com/mdn/webextensions-examples/tree/main/tabs-tabs-tabs", "manifest_version": 2, "name": "Tabs, tabs, tabs", "permissions": [ @@ -141,7 +141,7 @@ Here is a summary of the above does: ### tabs.js -In [tabs.js](https://github.com/mdn/webextensions-examples/blob/master/tabs-tabs-tabs/tabs.js), we’ll see how the list of tabs is built and added to the popup. +In [tabs.js](https://github.com/mdn/webextensions-examples/blob/main/tabs-tabs-tabs/tabs.js), we’ll see how the list of tabs is built and added to the popup. #### Creating the popup @@ -465,27 +465,20 @@ The latter is the most useful, as it allows an extension to use {{WebExtAPIRef(" { "description": "Adds a page action to toggle applying CSS to pages.", - "manifest_version": 2, - "name": "apply-css", - "version": "1.0", - "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/apply-css", - - "background": { + "manifest_version": 2, + "name": "apply-css", + "version": "1.0", + "homepage_url": "https://github.com/mdn/webextensions-examples/tree/main/apply-css", + "background": { "scripts": ["background.js"] - }, - - "page_action": { - - "default_icon": "icons/off.svg", - "browser_style": true - }, + }, - "permissions": [ - "activeTab", - "tabs" - ] + "page_action": { + "default_icon": "icons/off.svg" + }, + "permissions": ["activeTab", "tabs"] } ``` diff --git a/files/zh-cn/mozilla/add-ons/webextensions/your_first_webextension/index.md b/files/zh-cn/mozilla/add-ons/webextensions/your_first_webextension/index.md index 7ea0d186103121..9b5374b188898c 100644 --- a/files/zh-cn/mozilla/add-ons/webextensions/your_first_webextension/index.md +++ b/files/zh-cn/mozilla/add-ons/webextensions/your_first_webextension/index.md @@ -70,7 +70,7 @@ cd borderify 扩展应该有一个图标。这将显示在附加组件管理器加载项的列表中。我们的 manifest.json 保证了会有一个图标“icons/border-48.png”。 -在“borderify”目录下直接创建“icons”目录，并在“icons”目录下保存一个名为“border-48.png”的图标。你可以使用[我们示例](https://github.com/mdn/webextensions-examples/blob/master/borderify/icons/border-48.png)中的图标，来自谷歌 Material Design 的图标库，遵循 [Creative Commons Attribution-ShareAlike](http://creativecommons.org/licenses/by-sa/3.0/) 协议。 +在“borderify”目录下直接创建“icons”目录，并在“icons”目录下保存一个名为“border-48.png”的图标。你可以使用[我们示例](https://github.com/mdn/webextensions-examples/blob/main/borderify/icons/border-48.png)中的图标，来自谷歌 Material Design 的图标库，遵循 [Creative Commons Attribution-ShareAlike](http://creativecommons.org/licenses/by-sa/3.0/) 协议。 如果您选择使用自己的图标，它也应该是 48×48 像素的。你也可以为高分辨率显示器提供一个 96x96 的像素图标，在 manifest.json 的 `icons` 对象中添加 `96` 属性即可： diff --git a/files/zh-tw/mozilla/add-ons/webextensions/content_scripts/index.md b/files/zh-tw/mozilla/add-ons/webextensions/content_scripts/index.md index 9026b5361f2701..de55f5f5f994ea 100644 --- a/files/zh-tw/mozilla/add-ons/webextensions/content_scripts/index.md +++ b/files/zh-tw/mozilla/add-ons/webextensions/content_scripts/index.md @@ -233,7 +233,7 @@ function notify(message) { } ``` -這個範例來自 GitHub 上的 [notify-link-clicks-i18n](https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n)，稍微經過修改。 +這個範例來自 GitHub 上的 [notify-link-clicks-i18n](https://github.com/mdn/webextensions-examples/tree/main/notify-link-clicks-i18n)，稍微經過修改。 ### 基於連線的訊息 diff --git a/files/zh-tw/mozilla/add-ons/webextensions/internationalization/index.md b/files/zh-tw/mozilla/add-ons/webextensions/internationalization/index.md index 047616fc8be10b..6ddb7ee1940b20 100644 --- a/files/zh-tw/mozilla/add-ons/webextensions/internationalization/index.md +++ b/files/zh-tw/mozilla/add-ons/webextensions/internationalization/index.md @@ -7,7 +7,7 @@ slug: Mozilla/Add-ons/WebExtensions/Internationalization [WebExtension](/zh-TW/docs/Mozilla/Add-ons/WebExtensions) API 有個相當方便、能用於國際化的模組：[i18n](/zh-TW/docs/Mozilla/Add-ons/WebExtensions/API/i18n)。我們將在這篇文章內探索本功能，並提供實際做動的範例。專供 extensions 組建所使用的 i18n 系統 API，用法與坊間諸如 [i18n.js](http://i18njs.com/) 的函式庫相似。 -> **備註：** 本例所使用的套件：[notify-link-clicks-i18n](https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n) 能在 GitHub 找到。看各章節時，請配著原始碼觀看。 +> **備註：** 本例所使用的套件：[notify-link-clicks-i18n](https://github.com/mdn/webextensions-examples/tree/main/notify-link-clicks-i18n) 能在 GitHub 找到。看各章節時，請配著原始碼觀看。 ## 剖析國際化的套件 @@ -53,7 +53,7 @@ Every i18n system requires the provision of strings translated into all the diff Note that if the subtag includes a basic language plus a regional variant, then the language and variant are conventionally separated using a hyphen: for example, "en-US". However, in the directories under `_locales`, **the separator must be an underscore**: "en_US". -So [for example, in our sample app](https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n/_locales) we have directories for "en" (English), "de" (German), "nl" (Dutch), and "ja" (Japanese). Each one of these has a `messages.json` file inside it. +So [for example, in our sample app](https://github.com/mdn/webextensions-examples/tree/main/notify-link-clicks-i18n/_locales) we have directories for "en" (English), "de" (German), "nl" (Dutch), and "ja" (Japanese). Each one of these has a `messages.json` file inside it. Let's now look at the structure of one of these files ([\_locales/en/messages.json](https://github.com/mdn/webextensions-examples/blob/master/notify-link-clicks-i18n/_locales/en/messages.json)): @@ -150,7 +150,7 @@ So, you've got your message strings set up, and your manifest. Now you just need - The {{WebExtAPIRef("i18n.getAcceptLanguages()")}} and {{WebExtAPIRef("i18n.getUILanguage()")}} methods could be used if you needed to customize the UI depending on the locale — perhaps you might want to show preferences specific to the users' preferred languages higher up in a prefs list, or display cultural information relevant only to a certain language, or format displayed dates appropriately according to the browser locale. - The {{WebExtAPIRef("i18n.detectLanguage()")}} method could be used to detect the language of user-submitted content, and format it appropriately. -In our [notify-link-clicks-i18n](https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n) example, the [background script](https://github.com/mdn/webextensions-examples/blob/master/notify-link-clicks-i18n/background-script.js) contains the following lines: +In our [notify-link-clicks-i18n](https://github.com/mdn/webextensions-examples/tree/main/notify-link-clicks-i18n) example, the [background script](https://github.com/mdn/webextensions-examples/blob/master/notify-link-clicks-i18n/background-script.js) contains the following lines: ```js var title = browser.i18n.getMessage("notificationTitle"); @@ -391,7 +391,7 @@ padding-left: 1.5em; ## Testing out your extension -Starting in Firefox 45, you can install extensions temporarily from disk — see [Loading from disk](/zh-TW/Add-ons/WebExtensions/Packaging_and_installation#Loading_from_disk). Do this, and then try testing out our [notify-link-clicks-i18n](https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n) extension. Go to one of your favourite websites and click a link to see if a notification appears reporting the URL of the clicked link. +Starting in Firefox 45, you can install extensions temporarily from disk — see [Loading from disk](/zh-TW/Add-ons/WebExtensions/Packaging_and_installation#Loading_from_disk). Do this, and then try testing out our [notify-link-clicks-i18n](https://github.com/mdn/webextensions-examples/tree/main/notify-link-clicks-i18n) extension. Go to one of your favourite websites and click a link to see if a notification appears reporting the URL of the clicked link. Next, change Firefox's locale to one supported in the extension that you want to test. diff --git a/files/zh-tw/mozilla/add-ons/webextensions/manifest.json/homepage_url/index.md b/files/zh-tw/mozilla/add-ons/webextensions/manifest.json/homepage_url/index.md index 7545f92910f576..51037cf56eed71 100644 --- a/files/zh-tw/mozilla/add-ons/webextensions/manifest.json/homepage_url/index.md +++ b/files/zh-tw/mozilla/add-ons/webextensions/manifest.json/homepage_url/index.md @@ -35,7 +35,7 @@ slug: Mozilla/Add-ons/WebExtensions/manifest.json/homepage_url ## 範例 ```json -"homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/beastify" +"homepage_url": "https://github.com/mdn/webextensions-examples/tree/main/beastify" ``` ## 瀏覽器兼容性 diff --git a/files/zh-tw/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.md b/files/zh-tw/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.md index 3b0bb422fa856a..28cbd142e7ba44 100644 --- a/files/zh-tw/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.md +++ b/files/zh-tw/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.md @@ -53,5 +53,5 @@ browser.contextMenus.onClicked.addListener(function(info, tab) { GitHub 上的[webextensions-examples](https://github.com/mdn/webextensions-examples) 程式庫包含了兩個建立快捷選單的範例： -- [menu-demo](https://github.com/mdn/webextensions-examples/tree/master/menu-demo) 替瀏覽器的快捷選單添加幾個項目。 -- [context-menu-copy-link-with-types](https://github.com/mdn/webextensions-examples/tree/master/context-menu-copy-link-with-types) 替連結添加一個快捷選單項，以純文字或 rich HTML 的形式複製連結的 UR。 +- [menu-demo](https://github.com/mdn/webextensions-examples/tree/main/menu-demo) 替瀏覽器的快捷選單添加幾個項目。 +- [context-menu-copy-link-with-types](https://github.com/mdn/webextensions-examples/tree/main/context-menu-copy-link-with-types) 替連結添加一個快捷選單項，以純文字或 rich HTML 的形式複製連結的 UR。 diff --git a/files/zh-tw/mozilla/add-ons/webextensions/user_interface/sidebars/index.md b/files/zh-tw/mozilla/add-ons/webextensions/user_interface/sidebars/index.md index 561e44bb9fbbd0..4f4a48d95d1192 100644 --- a/files/zh-tw/mozilla/add-ons/webextensions/user_interface/sidebars/index.md +++ b/files/zh-tw/mozilla/add-ons/webextensions/user_interface/sidebars/index.md @@ -22,7 +22,7 @@ browser.windows.getCurrent({ populate: true }).then((windowInfo) => { }); ``` -如果側邊欄要在不同的視窗顯示不同內容這會很有用。範例請看 ["annotate-page" 範例](https://github.com/mdn/webextensions-examples/tree/master/annotate-page)。 +如果側邊欄要在不同的視窗顯示不同內容這會很有用。範例請看 ["annotate-page" 範例](https://github.com/mdn/webextensions-examples/tree/main/annotate-page)。 側邊欄文件與後端腳本以及彈出視窗享有一樣的權限。他們可以透過{{WebExtAPIRef("runtime.getBackgroundPage()")}}直接讀取後端頁面（只要側邊欄隸屬於隱私模式的視窗），並且可以透過一些 messaging APIs 與內容腳本或原生應用互動，像是{{WebExtAPIRef("tabs.sendMessage()")}}與{{WebExtAPIRef("runtime.sendNativeMessage()")}}。 @@ -52,4 +52,4 @@ browser.windows.getCurrent({ populate: true }).then((windowInfo) => { ## 範例 -GitHub 上的 [webextensions-examples](https://github.com/mdn/webextensions-examples) 程式庫包含了建立側邊欄的 [annotate-page](https://github.com/mdn/webextensions-examples/tree/master/annotate-page) 範例。 +GitHub 上的 [webextensions-examples](https://github.com/mdn/webextensions-examples) 程式庫包含了建立側邊欄的 [annotate-page](https://github.com/mdn/webextensions-examples/tree/main/annotate-page) 範例。 diff --git a/files/zh-tw/mozilla/add-ons/webextensions/user_interface/toolbar_button/index.md b/files/zh-tw/mozilla/add-ons/webextensions/user_interface/toolbar_button/index.md index 92f97d39e8d1d0..b5ef1b1a1ce64d 100644 --- a/files/zh-tw/mozilla/add-ons/webextensions/user_interface/toolbar_button/index.md +++ b/files/zh-tw/mozilla/add-ons/webextensions/user_interface/toolbar_button/index.md @@ -48,4 +48,4 @@ browser.browserAction.onClicked.addListener(handleClick); GitHub 上的[擴充套件範例](https://github.com/mdn/webextensions-examples)程式庫包含兩個建立工具列按鈕的範例： - [bookmark-it](https://github.com/mdn/webextensions-examples/blob/master/bookmark-it/) 使用不含彈出視窗的工具列按鈕。 -- [beastify](https://github.com/mdn/webextensions-examples/tree/master/beastify) 使用包含彈出視窗的工具列按鈕。 +- [beastify](https://github.com/mdn/webextensions-examples/tree/main/beastify) 使用包含彈出視窗的工具列按鈕。 diff --git a/files/zh-tw/mozilla/add-ons/webextensions/your_first_webextension/index.md b/files/zh-tw/mozilla/add-ons/webextensions/your_first_webextension/index.md index 98ca83e754bbff..88f5de329dc7ed 100644 --- a/files/zh-tw/mozilla/add-ons/webextensions/your_first_webextension/index.md +++ b/files/zh-tw/mozilla/add-ons/webextensions/your_first_webextension/index.md @@ -7,7 +7,7 @@ slug: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension 我們會在這篇文章詳細講解 Firefox 的 WebExtension 的製作。這支附加元件會在 "mozilla.org" 網域底下的所有網頁，增加紅色外框。 -範例的原始碼也放在 GitHub 喔：。 +範例的原始碼也放在 GitHub 喔：。 首先勒，你需要 Firefox 45.0 或以上的版本。 diff --git a/files/zh-tw/mozilla/add-ons/webextensions/your_second_webextension/index.md b/files/zh-tw/mozilla/add-ons/webextensions/your_second_webextension/index.md index c97bb2a8ad300f..748a35608395fb 100644 --- a/files/zh-tw/mozilla/add-ons/webextensions/your_second_webextension/index.md +++ b/files/zh-tw/mozilla/add-ons/webextensions/your_second_webextension/index.md @@ -35,7 +35,7 @@ slug: Mozilla/Add-ons/WebExtensions/Your_second_WebExtension - 內容腳本與整個 extension 間的溝通 - 打包 extension 所需的資源，讓網頁可以存取 -也可以在 GitHub 上找到範例的原始碼： +也可以在 GitHub 上找到範例的原始碼： 實作這個 extension 前，請先確認你的 Firefox 有 45.0 或更新的版本。 @@ -59,7 +59,7 @@ cd beastify "version": "1.0", "description": "Adds a browser action icon to the toolbar. Click the button to choose a beast. The active tab's body content is then replaced with a picture of the chosen beast. See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples#beastify", - "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/beastify", + "homepage_url": "https://github.com/mdn/webextensions-examples/tree/main/beastify", "icons": { "48": "icons/beasts-48.png" }, @@ -317,7 +317,7 @@ browser.runtime.onMessage.addListener(beastify); 最後，我們需要將動物的照片放進來 -新增一個名為 "beasts" 的資料夾，並把三張動物的圖片放進此資料夾中，請取相對應的檔名。可以使用[範例圖片](https://github.com/mdn/webextensions-examples/tree/master/beastify/beasts) ，或從這邊下載： +新增一個名為「beasts」的資料夾，並把三張動物的圖片放進此資料夾中，請取相對應的檔名。可以使用[範例圖片](https://github.com/mdn/webextensions-examples/tree/main/beastify/beasts)，或從這邊下載： ![](frog.jpg)![](snake.jpg)![](turtle.jpg) From 506312b6cc7fe08c8473ce9a3e21f2dadd9fa577 Mon Sep 17 00:00:00 2001 From: MDN Web Docs GitHub Bot <108879845+mdn-bot@users.noreply.github.com> Date: Fri, 7 Jul 2023 18:20:32 +0200 Subject: [PATCH 05/21] [es] sync translated content (#14068) es: sync translated content --- files/es/_redirects.txt | 1 + files/es/_wikihistory.json | 2 +- .../add-ons/webextensions/{what_next_ => what_next}/index.md | 3 ++- 3 files changed, 4 insertions(+), 2 deletions(-) rename files/es/mozilla/add-ons/webextensions/{what_next_ => what_next}/index.md (98%) diff --git a/files/es/_redirects.txt b/files/es/_redirects.txt index bff9519f07f16a..0274a6f0b650e6 100644 --- a/files/es/_redirects.txt +++ b/files/es/_redirects.txt @@ -1274,6 +1274,7 @@ /es/docs/Mozilla/Add-ons/WebExtensions/Que_son_las_WebExtensions /es/docs/Mozilla/Add-ons/WebExtensions/What_are_WebExtensions /es/docs/Mozilla/Add-ons/WebExtensions/Tu_primera_WebExtension /es/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension /es/docs/Mozilla/Add-ons/WebExtensions/Tutorial /es/docs/Mozilla/Add-ons/WebExtensions/Your_second_WebExtension +/es/docs/Mozilla/Add-ons/WebExtensions/What_next_ /es/docs/Mozilla/Add-ons/WebExtensions/What_next /es/docs/Mozilla/Add-ons/WebExtensions/user_interface/Accion_navegador /es/docs/Mozilla/Add-ons/WebExtensions/user_interface/Toolbar_button /es/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_action /es/docs/Mozilla/Add-ons/WebExtensions/user_interface/Toolbar_button /es/docs/Plantillas_en_Firefox_3 /es/docs/Mozilla/Firefox/Releases/3/Templates diff --git a/files/es/_wikihistory.json b/files/es/_wikihistory.json index 9cb5965c039da5..13225883dc1477 100644 --- a/files/es/_wikihistory.json +++ b/files/es/_wikihistory.json @@ -2840,7 +2840,7 @@ "modified": "2020-11-23T00:59:33.889Z", "contributors": ["kenliten", "hecaxmmx", "13539"] }, - "Mozilla/Add-ons/WebExtensions/What_next_": { + "Mozilla/Add-ons/WebExtensions/What_next": { "modified": "2019-03-18T20:43:00.251Z", "contributors": ["chicocoulomb"] }, diff --git a/files/es/mozilla/add-ons/webextensions/what_next_/index.md b/files/es/mozilla/add-ons/webextensions/what_next/index.md similarity index 98% rename from files/es/mozilla/add-ons/webextensions/what_next_/index.md rename to files/es/mozilla/add-ons/webextensions/what_next/index.md index 5285e3ca8eb9e1..2278b7ada295ee 100644 --- a/files/es/mozilla/add-ons/webextensions/what_next_/index.md +++ b/files/es/mozilla/add-ons/webextensions/what_next/index.md @@ -1,6 +1,7 @@ --- title: What next? -slug: Mozilla/Add-ons/WebExtensions/What_next_ +slug: Mozilla/Add-ons/WebExtensions/What_next +original_slug: Mozilla/Add-ons/WebExtensions/What_next_ --- {{AddonSidebar}} From 9cd1d9191ac7dda6214c66a2bb4b6e9465a3b60d Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 3 Jul 2023 00:43:03 +0900 Subject: [PATCH 06/21] =?UTF-8?q?2023/04/13=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/html/element/pre/index.md | 154 +++++++++++++++---------- 1 file changed, 90 insertions(+), 64 deletions(-) diff --git a/files/ja/web/html/element/pre/index.md b/files/ja/web/html/element/pre/index.md index 6080a9b37e29fd..c0fb2a4e6a3d65 100644 --- a/files/ja/web/html/element/pre/index.md +++ b/files/ja/web/html/element/pre/index.md @@ -1,6 +1,8 @@ --- -title: '
: 整形済みテキスト要素'
+title: "
: 整形済みテキスト要素"
 slug: Web/HTML/Element/pre
+l10n:
+  sourceCommit: 942a529383ee7ee3996fb234187641c08935f3ff
 ---
 
 {{HTMLSidebar}}
@@ -9,16 +11,98 @@ slug: Web/HTML/Element/pre
 
 {{EmbedInteractiveExample("pages/tabbed/pre.html", "tabbed-standard")}}
 
+`
` タグ内で `<`、`>`、`&`、`"` などの予約文字を表示する必要がある場合は、それぞれの [HTML エンティティ](/ja/docs/Glossary/Entity)を用いてエスケープする必要があります。
+
+## 属性
+
+この要素は[グローバル属性](/ja/docs/Web/HTML/Global_attributes)のみがあります。
+
+- `cols` {{non-standard_inline}} {{deprecated_inline}}
+  - : 1 行あたりの*望ましい*文字数を示します。これは [`width`](#width) の標準外の別名です。同様の効果を得るには、CSS の {{Cssxref("width")}} を使用してください。
+- `width` {{deprecated_inline}} {{Non-standard_Inline}}
+  - : 1 行あたりの*望ましい*文字数を示します。この属性は技術的には実装されていますが、視覚上の効果はありません。同様の効果を得るには、CSS の {{Cssxref("width")}} を使用してください。
+- `wrap` {{non-standard_inline}} {{Deprecated_Inline}}
+  - : テキストがはみ出た場合の処理に関する*ヒント*を示します。現行のブラウザーはこのヒントを無視して、視覚上の効果をもたらしません。同様の効果を得るには、CSS の {{Cssxref("white-space")}} を使用してください。
+
+## アクセシビリティの考慮
+
+整形済みテキストを使用して作成した画像や図には、代替説明を提供することが重要です。代替説明は、画像や図のコンテンツを明確かつ簡潔に記述する必要があります。
+
+弱視の人やスクリーンリーダーなどの支援技術を使って閲覧している人は、整形済みテキスト文字が順番に読み上げられたときに何を表しているのか理解できないかもしれません。
+
+{{HTMLElement("figure")}} 要素と {{HTMLElement("figcaption")}} 要素の組み合わせや、`pre` 要素の [ARIA](/ja/docs/Web/Accessibility/ARIA) の `role` と [`aria-label`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-label) 属性によって補われます。整形済み ASCII アートは代替テキストを持つ画像としてアナウンスされ、`figcaption` は画像のキャプションとして機能します。
+
+### 例
+
+```html
+

+  
+      __________________
+  < 私は牧場の達人です。>
+      ------------------
+          \   ^__^
+           \  (oo)\_______
+              (__)\       )\/\
+                  ||----w |
+                  ||     ||
+  

+  

+    「私は牧場の達人です。」と言っている牛。牛は整形済みテキストで表現されている。
+  

+

+```
+
+- [MDN「WCAG を理解する」ガイドライン 1.1 の説明](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#ガイドライン_1.1_—_非テキストコンテンツのための代替テキストの提供)
+- [H86: Providing text alternatives for ASCII art, emoticons, and leetspeak | W3C Techniques for WCAG 2.0](https://www.w3.org/TR/WCAG20-TECHS/H86.html)
+
+## 例
+
+### 基本的な例
+
+#### HTML
+
+```html
+
CSS を使用してフォントの色を変更するのは簡単です。

+
+body {
+  color: red;
+}
+

+```
+
+#### 結果
+
+{{EmbedLiveSample("Basic_example")}}
+
+### 予約文字のエスケープ
+
+#### HTML
+
+```html
+
+let i = 5;
+
+if (i < 10 && i > 0)
+  return "1 桁の数値"
+

+```
+
+#### 結果
+
+{{EmbedLiveSample("Escaping_reserved_characters")}}
+
+## 技術的概要
+
 
@@ -26,7 +110,7 @@ slug: Web/HTML/Element/pre
     
@@ -38,7 +122,7 @@ slug: Web/HTML/Element/pre
     
@@ -62,65 +146,6 @@ slug: Web/HTML/Element/pre
   

   
     

       
-        コンテンツカテゴリー
       
       
-        フローコンテンツ、知覚可能コンテンツ
       

       許可されている内容
       
-        記述コンテンツ
       

       許可されている親要素
       
-        フローコンテンツを受け入れるすべての要素
       

 

 
-## 属性
-
-この要素は[グローバル属性](/ja/docs/Web/HTML/Global_attributes)のみを持ちます。
-
-- `cols` {{non-standard_inline}}{{deprecated_inline}}
-  - : 1 行あたりの*望ましい*文字数を示します。これは [`width`](/ja/docs/Web/HTML/Element/pre#width) の標準外の別名です。同様の効果を得るには、CSS の {{Cssxref("width")}} を使用してください。
-- `width` {{deprecated_inline}}
-  - : 1 行あたりの*望ましい*文字数を示します。この属性は技術的には実装されていますが、視覚上の効果はありません。同様の効果を得るには、CSS の {{Cssxref("width")}} を使用してください。
-- `wrap` {{non-standard_inline}}
-  - : テキストがはみ出た場合の処理に関する*ヒント*を示します。現行のブラウザーはこのヒントを無視して、視覚上の効果をもたらしません。同様の効果を得るには、CSS の {{Cssxref("white-space")}} を使用してください。
-
-## 例
-
-### HTML
-
-```html
-
-
-body {
-  color: red;
-}
-

-```
-
-### 結果
-
-{{EmbedLiveSample("Example")}}
-
-## アクセシビリティの考慮
-
-整形済みテキストを使用して作られた絵や図に対して、別な説明を提供することは重要です。この別な説明は、明確かつ簡潔に絵や図の中身を説明するものにしてください。
-
-弱視の人や、読み上げソフトのような支援技術を使用している人は、順番に読んだときに整形済みテキストで表現されているものが何か理解できないかもしれません。
-
-{{HTMLElement("figure")}} および {{HTMLElement("figcaption")}} 要素の組み合わせに、 [`id`](/ja/docs/Web/HTML/Global_attributes#id) および [ARIA](/ja/docs/Web/Accessibility/ARIA) `role` および `aria-labelledby` 属性を補ったもので、整形済みテキストを図形として扱い、 `figcaption` を図形の別の説明として提供することができます。
-
-### 例
-
-```
-

-  
-  __________________
-< 私は牧場の達人です。>
-  ------------------
-         \   ^__^
-          \  (oo)\_______
-             (__)\       )\/\
-                 ||----w |
-                 ||     ||
-  

-  

-    「私は牧場の達人です。」と言っている牛。牛は整形済みテキストで表現されている。
-  

-

-```
-
-- [MDN "WCAG を理解する ― ガイドライン 1.1 の解説"](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_—_providing_text_alternatives_for_non-text_content)
-- [H86: Providing text alternatives for ASCII art, emoticons, and leetspeak | W3C Techniques for WCAG 2.0](https://www.w3.org/TR/WCAG20-TECHS/H86.html)
-
 ## 仕様書
 
 {{Specifications}}
@@ -132,4 +157,5 @@ body {
 ## 関連情報
 
 - CSS: {{Cssxref('white-space')}}, {{Cssxref('word-break')}}
+- [HTML エンティティ](/ja/docs/Glossary/Entity)
 - 関連する要素: {{HTMLElement("code")}}

From 72087de41c4a8c3c1f9d8197a3c92cc8c18aa6d2 Mon Sep 17 00:00:00 2001
From: Jason Ren <40999116+jasonren0403@users.noreply.github.com>
Date: Sat, 8 Jul 2023 01:07:30 +0800
Subject: [PATCH 07/21] [zh-cn] update HTML summary element (#14064)

Co-authored-by: A1lo 
---
 files/zh-cn/web/html/element/summary/index.md | 153 +++++++++++++++---
 1 file changed, 127 insertions(+), 26 deletions(-)

diff --git a/files/zh-cn/web/html/element/summary/index.md b/files/zh-cn/web/html/element/summary/index.md
index d2cb63866fd509..969bae02784538 100644
--- a/files/zh-cn/web/html/element/summary/index.md
+++ b/files/zh-cn/web/html/element/summary/index.md
@@ -1,44 +1,145 @@
 ---
-title: 
+title: ：摘要展现元素
 slug: Web/HTML/Element/summary
 ---
 
 {{HTMLSidebar}}
 
-## 概述
+[HTML](/zh-CN/docs/Web/HTML) **`` 元素** 指定了 {{HTMLElement("details")}} 元素展开盒子的内容的摘要，标题或图例。点击 `` 元素可以切换父元素 `
` 开启和关闭的状态。
 
-**HTML `` 元素** 用作 一个{{HTMLElement("details")}}元素的一个内容的摘要，标题或图例。
+{{EmbedInteractiveExample("pages/tabbed/summary.html","tabbed-shorter")}}
 
-> **备注：** 如果 `` 元素在浏览器内不能被正确解析和渲染，，则会展示\
标签内的其他内容。
+## 属性
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
标签闭合开始标签和结束标签都不能省略。
父级元素{{ HTMLElement("summary") }}元素是{{ HTMLElement("details") }} 元素的子元素。
文档规范HTML5, section 4.11.2

+本元素仅包含[全局属性](/zh-CN/docs/Web/HTML/Global_attributes)。
 
-## 属性
+## 使用注意
+
+`` 元素的内容可以是任意标题内容、纯文本，或是可以在段落内使用的 HTML 代码。
+
+`` 元素*仅*可作为 `
` 元素的第一个子节点。当用户在 `` 元素上点击时，父元素 `
` 会切换开启和关闭的状态，并会向 `
` 元素发送 {{domxref("HTMLDetailsElement/toggle_event", "toggle")}} 事件，令用户得知这样的状态改变何时发生。
+
+### 默认标签文字
+
+如果一个 `
` 元素的第一个子节点不是 `` 元素，{{Glossary("user agent", "用户代理")}}会使用一个默认字符串（通常为“详细信息”或“详情”）作为展开盒子的标签内容。
 
-本元素仅支持[全局属性](/zh-CN/docs/HTML/Global_attributes)。
+### 默认样式
 
-## DOM 接口
+根据 HTML 规范，`` 元素的默认样式包括 `display: list-item`。这使得改变或移除显示为标签旁边的展现部件的图标成为可能，默认的图标通常是一个三角形。
 
-本元素支持 {{domxref("HTMLElement")}} 接口。
+你也可以将样式改变为 `display: block` 来移除展开三角形。
+
+参见[浏览器兼容性](#浏览器兼容性)以了解其中的细节，因为并不是所有浏览器支持这个元素的全部功能。
+
+对于基于 Webkit 的浏览器，例如 Safari，可以通过非标准的 CSS 伪元素 `::-webkit-details-marker` 来控制图标显示。要删除展开三角形，请使用 `summary::-webkit-details-marker { display: none }`。
 
 ## 示例
 
-请参考 {{ HTMLElement("details") }} 页面内有关 \元素的示例。
+下面有一些 `` 元素的用法示例。你可以在 {{HTMLElement("details")}} 元素的文档中找到更多示例。
+
+### 基本示例
+
+一个简单的例子显示了在 {{HTMLElement("details")}} 元素中如何使用 ``：
+
+```html
+

+  概况
+  
    
+    
  1. 手上的现钱：$500.00
    2. 
+    
  2. 当前发票：$75.30
    3. 
+    
  3. 到期日：5/6/19
    4. 
+  

+

+```
+
+#### 结果
+
+{{EmbedLiveSample("基本示例", 650, 120)}}
+
+### 使用标题元素作为总结
+
+你可以在 `` 元素中像这样使用标题元素：
+
+```html
+

+  
概况

+  
    
+    
  1. 手上的现钱：$500.00
    2. 
+    
  2. 当前发票：$75.30
    3. 
+    
  3. 到期日：5/6/19
    4. 
+  

+

+```
+
+#### 结果
+
+{{EmbedLiveSample("使用标题元素作为总结", 650, 120)}}
+
+目前这有一些间距问题，可以用 CSS 解决。
+
+> **警告：** 因为 `` 元素的默认角色是 [button](/zh-CN/docs/Web/Accessibility/ARIA/Roles/button_role)（它将所有角色从子元素中剥离），这个例子对于使用辅助技术的用户来说是不可行的，例如屏幕阅读器。`
` 的角色将被删除，因此对这些用户来说，不会被视为标题。
+
+### summary 元素中的 HTML
+
+这个示例给 `` 元素增加了一些语义，以表明标签的重要性：
+
+```html
+

+  概况
+  
    
+    
  1. 手上的现钱：$500.00
    2. 
+    
  2. 当前发票：$75.30
    3. 
+    
  3. 到期日：5/6/19
    4. 
+  

+

+```
+
+#### 结果
+
+{{EmbedLiveSample("summary_元素中的_HTML", 650, 120)}}
+
+## 技术概要
+
+
+  
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+  
+
允许的内容
+        短语内容，或标题内容元素之一
+      
标签省略否，开始和结束标签都不能省略
允许的父元素{{HTMLElement("details")}} 元素
隐式 ARIA 角色
+        button
+      
允许的 ARIA 角色没有允许的 role
DOM 接口{{domxref("HTMLElement")}}

 
 ## 规范
 
@@ -50,4 +151,4 @@ slug: Web/HTML/Element/summary
 
 ## 参见
 
-- {{ HTMLElement("details") }}
+- {{HTMLElement("details")}}

From ca6a5e9636e83ab0a56e137aedfd7596ea91de10 Mon Sep 17 00:00:00 2001
From: Lonely Almond 972 
Date: Sat, 8 Jul 2023 15:24:39 +0800
Subject: [PATCH 08/21] Modify link and symbols (#13982)

Co-authored-by: A1lo 
---
 .../vue_first_component/index.md                          | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_first_component/index.md b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_first_component/index.md
index eaae0dd7773290..9d53f487d2756e 100644
--- a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_first_component/index.md
+++ b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_first_component/index.md
@@ -7,7 +7,7 @@ slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_compon
 
 现在是时候深入了解 Vue，并创建我们自己的自定义组件了--我们将从创建一个组件来表示待办事项列表中的每个项目开始。在这一过程中，我们将学习一些重要的概念，例如在其他组件中调用组件，通过道具向它们传递数据，以及保存数据状态。
 
-> **备注：** 如果你需要根据我们的版本检查您的代码，你可以在我们的 [todo-vue](https://github.com/mdn/todo-vue) 仓库找到中找到示例 Vue 程序代码的完成版本。有关运行中的实时版本，请参见 。
+> **备注：** 如果你需要根据我们的版本检查您的代码，你可以在我们的 [todo-vue](https://github.com/mdn/todo-vue) 仓库找到中找到示例 Vue 程序代码的完成版本。有关运行中的实时版本，请参见 。
 
 
@@ -64,7 +64,7 @@ slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_compon
 现在我们可以开始为`ToDoItem`添加实际内容了。Vue 模板目前只允许一个根元素--一个元素需要包裹模板内的所有内容（Vue 3 发布后会改变这种情况）。我们将为该根元素使用一个[`
`](/zh-CN/docs/Web/HTML/Element/div)。
 
 1. 现在在你的组件模板中添加一个空的`
`。
-2. 在那个`
`里面，让我们添加一个`checkbox`和一个对应的`label`。给复选框添加一个`id`，并添加一个`for`属性，将复选框映射到标签上，如下图所示。.
+2. 在那个 `
` 里面，让我们添加一个 `checkbox` 和一个对应的 `label`。给复选框添加一个 `id`，并添加一个 `for` 属性，将复选框映射到标签上，如下所示：
 
     ```html