1. 什么是自动化项目搭建

当一个软件开发工程师接到一个新的Web项目开发的时候，往往需要完成一些准备工作，例如，选择web框架，项目的目录结构设计，数据库的连接配置，Redis/Kafka连接和配置；甚至包括一些基础功能的实现和封装，例如 MySQL库增删查改操作的封装，登录功能，以及登录token的验证。这个过程通常称为
项目初始化
或
项目搭建
。

当我们的大部分项目都会用到这些基础功能，我们会将这个搭建好的项目放到一个单独的代码仓库，当需要开发新的项目时就从从这个仓库拉取代码，在这个项目代码的基础上继续开发。这项目通常被称为
种子项目
或
模板项目
。

每次从模板项目拉取代码，都需要手动修改
模板项目
的名称，例如：将
template-project
改为
company-user-project
或
company-payment-project
。甚至在使用
模板
项目的时候，会有个性化的需求，
company-user-project
需要使用MySQL数据库，
company-payment-project
需要使用MongoDB数据库，我们可以进一步实现脚手架工具。通过可选配置的方式生成个性化的
模板项目
，这样的工具我们通常称为
脚手架工具
。

图：Spring initializr

自动化测试工程师在接到新需求时，也需要完成类似项目初始化的工作（例如选择测试框架、设计目录结构、集成测试报告，以及各种主流的测试库等）。此外，也包括实现一些基础用例或封装一些通用操作，比如系统的注册、登录用例，封装随机数的生成等等。毫无疑问，这个过程也被认为是
自动化项目搭建

当我们搭建好了自动化测试项目，同样可以将其作为
模板项目
使用。然后，基于
模板项目
，我们可以更加快速的编写自动化测试用例。

为什么要介绍这个概念，是因为网上看到大量的文章将
自动化测试项目搭建
叫做
自动化测试框架开发
，这显然是错误的认知，因为两者的角度和目的是不同的。

• 自动化测试项目搭建： 服务于公司具体业务，为了更快速地编写业务的测试用例。

• 自动化测试框架开发： 为了解决一类通用问题，开发设计的一种通用的能力，从而定义解决问题的方法和结构。

2. 为什么设计自动化测试框架

开发框架的原因可以有多种角度，以下是比较常见的原因。

2.1 提高开发效率

现有框架可能存在以下问题：

• 现有框架使用过程中存在过多的第三方依赖，安装和配置比较繁琐。
• 使用复杂，测试工程师需要花费过多时间学习或适配。

通过开发更贴合需求的自动化测试框架，可以减少重复性劳动，提升开发效率。

2.2.满足特定类型需求

现有框架存在无法满足特定类型的业务的测试需求（例如，gRPC、Kafka的测试用例编写），需要在现有框架的基础上做更多的功能扩展和封装。

通过开发功能更加强大的框架，更好的解决现有业务类型的自动化测试需求。

2.3 提供更优的设计理念

提供更优的设计理念或创新技术实现。

• 创新性设计：基于新的架构或设计模式提供更高性能、更易扩展的解决方案。
• 领域驱动：专注于某一特定领域（如关键字驱动，数据驱动、方法链）的最佳实践。

2.4.提升团队协作

规范团队协作，提升开发体验和代码一致性。

• 框架可以规范团队的开发方式，减少个性化差异带来的协作成本。
• 提供标准化的工具链、模块和流程，确保团队代码质量和一致性。

3. 自动化测试框架设计的方向

当我们决定去设计自动化测试框架，那么可以有两个方向：
从零开始设计
和
基于单元测试框架二次开发
。

3.1 从零开始设计

从零开始设计自动化测试框架，例如针对一款的编程语言，单元测试框架一般需要作为基础库被设计并集成到编程语言中。

标准化的测试结构

单元测试框架提供了一种统一的结构化方式，让开发者以一致的方式组织和运行测试。

• 生命周期方法
  : 通常框架会定义一套标准化的生命周期钩子，用于在每个测试方法执行前后进行资源管理：
  setup/beforeEach
  : 在每个测试运行之前初始化测试环境（如创建测试数据、实例化对象）。
  teardown/afterEach
  : 在每个测试运行后清理资源（如关闭数据库连接、删除临时文件）。

• 测试方法的命名
  : 通常有特定约定，比如以
  test_
  开头（Python 的 unittest）或
  @Test
  注解（Java 的 JUnit）。 这种约定使得框架可以自动发现测试方法。

• 独立性
  : 每个测试方法应保持独立，不依赖其他测试。测试之间的隔离有助于更快定位问题。

断言机制

断言（Assertions）是单元测试的核心，用于验证被测代码的行为是否符合预期。

断言的作用:

1. 通过对输入和输出的验证，确保代码逻辑正确。
2. 如果断言失败，测试会立即终止并报告错误。

测试发现

测试发现是单元测试框架的一项重要功能，能够自动找到符合规范的测试。

框架会扫描特定的模块或文件夹，找到符合命名约定的方法。例如：在 Python 中，pytest 会自动发现以
test_
开头的方法。在 Java 的 JUnit 中，
@Test
注解标识的方法会被识别为测试方法。

测试套件和测试运行器

测试套件和运行器使得开发者可以高效地组织和执行测试。

• 测试套件（Test Suite）

测试套件是一个集合，用于将多个测试用例组合在一起运行。方便地对一组相关的测试进行分组管理。

• 测试运行器（Test Runner）

测试运行器负责执行测试并收集测试结果。

测试报告和结果反馈

测试报告用于展示测试的执行结果，帮助开发者快速了解代码的健康状态。测试结果分类

• 通过（Pass）: 测试正常完成且所有断言成功。
• 失败（Fail）: 测试未通过，某个断言失败。
• 错误（Error）: 测试执行过程中抛出了未预期的异常。
• 跳过（Skip/Ignore）: 测试因某些条件未被执行。

扩展：xUnit 被认为是许多主流编程语言的单元测试框架的雏形和灵感来源。xUnit 是一种架构模式，最早由 Kent Beck 和 Erich Gamma 在 SUnit（Smalltalk 的单元测试框架）中提出，并成为了测试框架设计的标准。其设计思想和概念被广泛应用到其他语言中，例如 JUnit（Java）、NUnit（.NET）、pytest（Python）等。

3.2 基于单元测试框架二次开发

基于单元测试框架二次开发，在单元测试框架的基础上，更偏注重于扩展各种测试能力。

通常，单元测试框架已经提供了基础的测试能力，为了更好的支撑各种类型的测试，我们可以在此基础上进行扩展，以便于满足不同类型的需求。

基于单元测试框架二次开发的方向比较多，取决于基于框架设计的定位和目标。以下是常见的扩展功能。

数据驱动

数据驱动是自动化测试最常见的功能之一，可以有效的减少样例代码的编写，从而提高测试用例编写的效率。

• 数据驱动装饰器

可以通过数据驱动装饰器来驱动测试测试用例（方法）， 例如，Seldom框架的
@data([])
装饰器。

• 数据驱动文件

通过取数驱动文件读取不同类型的数据文件。例如，Seldom框架的
@data_file("./data/file.json")
管理测试数据。

定制化测试报告

测试报告是自动化测试框架的非常重要的功能，我们需要对报告做一些定制化开发。

• 个性化测试样式和内容

例如显示公司logo、人员个名称和角色等。

• 生成不同的报告类型

不同的运行模式需要不同的报告类型。例如，本地执行需要HTML格式的报告，CI/CD 或平台化执行需要XML、JSON格式的测试报告。

脚手架工具

集成脚手架工具，可以快速的生成
自动化测试项目模板
。

关于自动化测试项目模板，文章的开头已经介绍，这里不再阐述。

集成消息功能

每个公司都有自己的通讯工具，邮件、钉钉、企微、飞书等。 通过调用相关工具的API，实现发消息功能，可以让测试的运行结果更快的发送给相关人员。

集成各种测试库

基于框架的定位，可以集成不同类型的测试库，并对这些库进行二次开发，使框架的使用更加高效统一。

• Web UI测试

如果是为了实现Web UI自动化测试，那么可以集成 Selenium、Playwright等测试库，并对这些库的API进行二次封装。

• API 测试

如果是为支持接口测试，可以集成 Requests、webSocket、gRPC等测试库，并对这些库的API进行二次封装。

• App UI测试

如果是为了实现App UI自动化测试，那么可以集成 Appium、uiautomator2 等测试库，并对这些库的API进行二次封装。

4. 自动化测试框架设计基本准则

4.1 独立的名字和版本管理

我们应该把框架当成一个独立的项目来进行开发、维护和升级。

框架的命名

首先，应该为框架起一个独立的名字，既可以以某个动物或植物命名，比如，Python（蟒蛇）或Lettuce（生菜）；也可以按照框架的本意命名，比如， Robot Framework（自动化框架）或unittest（单元测试）；还可以是缩写合成词，比如，pytest = Python + Test、Appium = Application + Selenium等，关键是简单好记。

版本号管理

其次，框架应该有自己的版本号，推荐使用GNU风格的版本号命名。

格式：
主版本号.子版本号[.修正版本号[.编译版本号]]

• 主版本号：重构版本。
• 子版本号：重大功能改进。
• 修正版本号：小升级或者bug修复。
• 编译版本号：一般是编译器在编译过程中自动生成的，我们只定义其格式，并不进行人为的控制。

独立的安装

最后，框架应该提供独立的安装，比如，Python使用
pip
命令进行安装。

对于开源的项目来说，例如，需要创建setup.py或pyproject.toml打包文件，将项目打包成.whl格式的文件，提交到pypi.org官方仓库。

4.2 具备通用性

作为一款框架，其定位和目标一定是解决一类通用问题并提供能力。

例如：
数据驱动
、
自动化发邮件
、
生成随机数
、
数据缓存
、
命令行工具
这些都与具体公司业务无关，提供的是通用的能力。

4.3 清晰的定位和目标

自动化测试框架被设计的初衷一定是为更好的了解决某一类问题。在设计之初，我们应该有一个清晰的目标和定位。

从无到有地解决一类问题

xUnit在单元测试框架领域具有开创性意义。前文有对 xUnit 进行介绍。

更加简单地解决一类问题

Flask是一个使用Python编写的轻量级Web框架，通过它，我们可以只简单地编写几行代码就搭建一个Web服务。

提供更加强大且丰富的功能

Django是一个开放源代码的由Python编写的Web框架。

Django虽然学习成本较高，但是它功能提供了 ORM（关系对象映射）、Admin管理系统、模板系统、Cache系统、表单处理、会话（session）、国际化等，这些功能几乎都是开箱即用的，可以用来实现一个较为复杂的系统。

最后，当你要设计一个自动化测试框架的时候，不妨思考一下，设计目标是什么？为了解决什么问题？是否已经有更好的开源框架可以直接使用。

5. 相关书籍推荐

那么，是否有一本书能讲清楚
自动化测试框架设计
?

答案是：《自动化测试框架设计》一书

本书由虫师编著，作为 SeldomQA GitHub千星开源项目的开发者，在
自动化测试框架设计
、
定制化测试报告设计
、
设计模式
，以及
测试平台开发
方面有着深厚技术积累和独特的设计理念。

书中浅显易懂的介绍了 SeldomQA 相关项目中的诸多设计和封装技术。并且，介绍了一个开源自动化测试框架从设计到发布的整个流程。

此外，书中还介绍了如何打通
自动化框架
和
自动化测试平台
，这是一种独特的技术方案，为自动化测试平台提供了新的设计思路。

最后，结合当下热门的AI技术，作者还介绍AI在自动化领域的探索方向。

PrefPPO 首次（？）出现在 PEBBLE，作为 pebble 的一个 baseline，是用 PPO 复现 Christiano et al. (2017) 的 PbRL 算法。

For evaluation, we compare to Christiano et al. (2017), which is the current state-of-the-art approach using the same type of feedback. The primary differences in our method are (1) the introduction of unsupervised pre-training, (2) the accommodation of off-policy RL, and (3) entropy-based sampling. We re-implemented Christiano et al. (2017) using the state-of-the-art on-policy RL algorithm: PPO (Schulman et al., 2017). We use the same reward learning framework and ensemble disagreement-based sampling as they proposed. We refer to this baseline as Preference PPO.

Christiano et al. (2017) 这篇文章的题目是 Deep reinforcement learning from human preferences，发表在 NeurIPS 2017；arxiv：
https://arxiv.org/abs/1706.03741
，GitHub：
https://github.com/mrahtz/learning-from-human-preferences（用
TensorFlow 实现的）。

01 论文阅读：Deep reinforcement learning from human preferences

1.1 intro

intro：

• 大规模应用 RL 的限制是，许多任务涉及复杂、定义不明确或难以指定的目标。（举了一些例子）
• 如果有人类 demo（专家数据），可以 inverse RL 或 behavior cloning，但是很多任务难以给出人类 demo，比如控制奇形怪状的 跟人类很不像的机器人。
• 我们的 PbRL 思路：从 human feedback 中学习 reward model，当作 RL 中的奖励函数。这可以解决上面的两个问题，允许 non-expert user 来给 feedback，并且（据论文说）可以节省一个数量级的 feedback 数量。
• human feedback 的形式：让 human 看两段 video，指出哪一段更好（即 preference）。

Related Work：

• 列举了很多从 human 打分或排序中学 RL 的工作。还有一些工作在 RL 之外的 setting 使用 preference。
• Akrour 2012 和 2014 年的工作，貌似也算是 PbRL，但他们的方法是在整个 trajectory 上打 preference，不像我们只需要比较两个较短的 video segment。
  
  • Akrour 2012：April: Active preference learning-based reinforcement learning. Joint European Conference on Machine Learning and Knowledge Discovery in Databases（好像是 ECML PKDD，不知道是什么概念）2012。
  • Akrour 2014：Programming by feedback. ICML 2014。
• 从 feedback 里学 reward model 的方法，貌似跟 Wilson et al. (2012）工作比较像。
  
  • Wilson et al. (2012)：A Bayesian approach for policy learning from trajectory preference queries. NeurIPS 2012。

1.2 Method

首先介绍了一下 PbRL 的 setting：

• 定义 segment
  \(\sigma = ((s_0, a_0), ... (s_{k-1}, a_{k-1}))\)
  ，是长为 k 的轨迹段。
• 定义 preference
  \(\sigma_0\succ\sigma_1\)
  表示轨迹段 σ0 比 σ1 更好。接下来，我们用这些 preference 数据学出 reward model。

然后是 method：（发现这篇文章好像没给伪代码）

• 我们要维护一个 reward model
  \(\hat r\)
  ，和一个 policy
  \(\pi\)
  。
• 大概重复这样的过程：
  
  • 用目前的 policy
    \(\pi\)
    生成 query
    \((\sigma_0,\sigma_1)\)
    ；
  • 把 query 给 human 比较得到 preference 数据；
  • 用新 preference 数据学 reward model；
  • 把 reward model 当作奖励函数，去学 RL、更新 policy
    \(\pi\)
    。

① 把 reward model 当作奖励函数，去学 RL、更新 policy
\(\pi\)
：

• 论文声称
  \(\hat r\)
  可能是非平稳的（因为 reward model 一直在更新），所以他们想用 policy gradient 方法，因为 policy gradient 方法对奖励函数具有鲁棒性。
• 他们用 A2C（advantage actor-critic）做 Atari，用 TRPO 做 MuJoco。调整了 TRPO 的 entropy bonus，MuJoCo 的 swimmer 任务使用 0.001 的 entropy bonus，其他任务使用 0.01 的 entropy bonus。
• 把 reward model 产生的
  \(\hat r\)
  归一化到 0 均值 1 标准差。

② 用目前的 policy
\(\pi\)
生成 query
\((\sigma_0,\sigma_1)\)
：

• preference 数据的形式是
  \((\sigma_0,\sigma_1, p)\)
  ，其中 p 是一个 {0,1} 上的分布。
• 如果 human 能打出 preference，那么 p = 0 或 1。如果 human 分不出来，则 p 是 01 上的均匀分布。如果 human 感觉 query 是不可比的，那么不会使用这个 query 学 reward model。

③ 用新 preference 数据学 reward model：

• 我们使用 Bradley-Terry model 来建模
  \(\hat r\)
  和 preference 之间的关系：

• 
  
  \[\hat P[\sigma_0\succ \sigma_1] = \frac{\exp\sum\hat r(s_t^0,a_t^0)}
  {\exp\sum\hat r(s_t^0,a_t^0) + \exp\sum\hat r(s_t^1,a_t^1)} ~~.
  \tag{1}
  \]
  
  

• 然后，我们去优化 cross-entropy loss：

• 
  
  \[L(\hat r) = -\sum_{(\sigma_0,\sigma_1,p)} \left(
  p(0)\log \hat P[\sigma_0\succ \sigma_1] + p(1)\hat P[\sigma_1\succ \sigma_0]\right)
  \tag{2}
  \]
  
  

• （以上流程已经变成经典的 PbRL 做法）

• 他们还加了三个小 trick：

  
  
  • 对 reward model 进行 ensemble，学 n 个独立的 reward model，用它们每个人单独归一化后的值 取平均 作为
    \(\hat r\)
    的值。
  • 把一部分 preference 数据拿出来做验证集，以调整神秘的 L2 正则化的权重参数，并添加神秘 dropout，以避免 reward model 过拟合（？）
  • label smoothing（？）貌似是当 human 打出 p = 0 的时候，认为 p = 0 的概率是 0.95，p = 1 的概率是 0.05。

query selection：

• 即，我们现在有很多 trajectory，要从里面截出 segment、组成 segment pair，作为 query 送给人去比较。应该如何选取 segment pair 作为 query？
• 这里使用了基于 disagreement 的 query selection，貌似是让每个 reward model 给出
  \(\hat P[\sigma_0\succ \sigma_1]\)
  的值，计算这些值的方差，然后选一个方差最大的 query。

1.3 实验结果

算法是在 TensorFlow 中写的。Github：
https://github.com/mrahtz/learning-from-human-preferences（貌似不是官方代码…）

• preference 一些是人类打的，另一些是 scripted teacher 打的。
  
  • Appendix B 中有让人类打 preference 的一些 prompt，感觉很有趣。
  • scripted teacher：上面公式 (1) 中用任务的真 reward 替换
    \(\hat r\)
    ，反向生成 preference。
• MuJoCo 实验中，分别使用真 reward、1400 700 350 个 scripted teacher queries、和 750 个 human queries。
  
  • （个人理解，这里的 750 human queries 包含的 label 少于 750 个，因为人类认为不可比的 query 应该会直接扔掉）
  • MuJoCo 实验中，很多 task 都做了 1e7 步，相比 pebble 来说学的很慢；pebble 1e6 步就能学出来。
• Atari 实验中，分别使用真 reward、10k 5.6k 3.3k 个 scripted teacher queries、和 5.5k 个 human queries。（好多 human label…… 这要打好久好久；如此充足的实验，真是 solid work 呀）
• 这些实验没有得出 human label 比 scripted teacher 好用的结论，论文说，可能是因为 human 犯错、不同 human 的打标签准则不一样等原因。
• 一些 Appendix A 里的实验细节：
  
  • 有些环境会提前结束 episode，比如当 agent 倒下、死亡或到达目的地（？）他们声称这种 done 信号可能会提供 task 信息，因此魔改了环境，规避掉了 episode 长度可变的情况（？）使得 agent 死亡时得到一个大惩罚，或者 agent 到达目的地的时候直接 reset env 而不 done（？）
  • 在 MuJoCo 中，在实验开始前直接用随机 policy 打 25% 的 queries，然后以一个随时间递减的 rate 来打 preference；segment length = 15 - 60，取决于具体 task。
  • 在 Atari 中，reward model 和 policy 的输入是一样的，都是一个处理图像的卷积网络（无端联想，听说 DPO 的主要贡献是可以省掉 LLM RLHF 的 reward model，因为 reward model 应该跟 policy 一样大，所以省掉它可以节约很多显存）。
  • Atari 其实跑的是 A3C，在实验开始前打 500 个 query，segment length = 25。
• 3.2 节还在 MuJoCo 里学习了 hopper 后空翻的 novel behavior，据文章说，可以保证后空翻后 hopper 脚着地。使用 900 个 human query 学习的。3.2 节还有其他的 novel behavior。
• 3.3 节做了非常充分的 ablation study。发现 segment 长度 = 1 貌似会性能变差，reward model 不加正则化影响不大，把 query selection 改成随机好像也影响不大，以及，最好边更新 policy 边拿最新轨迹打 preference。

02 PEBBLE 中的 PrefPPO 实现

PEBBLE 中的 PrefPPO 实现，直接魔改了 stable_baselines3 的 PPO 模型；他们写了一个叫做 PPO_REWARD 的新类，把所有跟 reward model 的交互都封装到 model.learn() 函数里了。

2.1 reward model 如何构建

跟 pebble 的 reward model 一样。

如果 state 和 action 都是了连续的（比如普通的 cheetah walker），那么就把 state 和 action concat 起来，作为 reward model 的输入。

如果 state 是图像，action 是离散的（比如 Christiano 2017 论文中的 Pong 环境），那么（按照 Christiano 2017 复现代码），…… 好像直接拿 state 图像来算 reward 了，没有 concat 一个 one-hot action 或者数值 action。

2.2 PPO_REWARD 的 model.learn()

PPO 的大概流程：收集 rollout → 计算 rollout 的 advantage 之类 → 计算 loss 并 backward → 收集新 rollout…

在收集 rollout 的过程中，PrefPPO 把要收集的真实 task reward 替换成了
\(\hat r\)
，并把 rollout 数据都添加到 query 的备选中。

在收集 rollout 前后，貌似都有调用 learn_reward() 函数来训练 reward model，这个函数首先收集 query，然后拿收集的 query 学习 reward model。跟 pebble 基本一样。

【引言】

本项目是一个简单的随机数生成器应用，用户可以通过设置随机数的范围和个数，并选择是否允许生成重复的随机数，来生成所需的随机数列表。生成的结果可以通过点击“复制”按钮复制到剪贴板。

【环境准备】

• 操作系统：Windows 10
• 开发工具：DevEco Studio NEXT Beta1 Build Version: 5.0.3.806
• 目标设备：华为Mate60 Pro
• 开发语言：ArkTS
• 框架：ArkUI
• API版本：API 12

【关键技术点】

1. 用户界面设计

用户界面主要包括以下几个部分：

• 标题栏：显示应用名称。
• 输入框：用户可以输入随机数的起始值、结束值和生成个数。
• 开关：用户可以选择生成的随机数是否允许重复。
• 生成按钮：点击后生成随机数。
• 结果显示区：显示生成的随机数，并提供复制功能。

2. 随机数生成算法

随机数生成是本项目的重点。根据用户是否允许生成重复的随机数，算法分为两种情况：

2.1 不允许重复

当用户选择不允许生成重复的随机数时，程序使用一个 Set 来存储生成的随机数，利用 Set 的特性自动去重。具体步骤如下：

1）计算范围：计算用户指定的随机数范围 range = endValue - startValue + 1。

2）生成随机数：使用一个临时数组 tempArray 来辅助生成不重复的随机数。每次生成一个随机索引 randomIndex，从 tempArray 中取出或计算一个新的随机数 randomNum，并将其添加到 Set 中。

3）更新临时数组：将 tempArray 中末尾的元素移动到随机位置，以确保下次生成的随机数仍然是唯一的。

if (!this.isUnique) {
  if (countValue > range) {
    // 显示错误提示
    this.getUIContext().showAlertDialog({
      title: '错误提示',
      message: `请求的随机数数量超过了范围内的总数`,
      confirm: {
        defaultFocus: true,
        value: '我知道了',
        fontColor: Color.White,
        backgroundColor: this.primaryColor,
        action: () => {}
      },
      onWillDismiss: () => {},
      alignment: DialogAlignment.Center,
    });
    return;
  }
  for (let i = 0; i < countValue; i++) {
    let randomIndex = Math.floor(Math.random() * (range - i));
    let randomNum = 0;
    if (tempArray[randomIndex] !== undefined) {
      randomNum = tempArray[randomIndex];
    } else {
      randomNum = startValue + randomIndex;
    }
    generatedNumbers.add(randomNum);
    if (tempArray[range - 1 - i] === undefined) {
      tempArray[range - 1 - i] = startValue + range - 1 - i;
    }
    tempArray[randomIndex] = tempArray[range - 1 - i];
  }
  this.generatedNumbers = JSON.stringify(Array.from(generatedNumbers));
}

3. 剪贴板功能

为了方便用户使用，程序提供了将生成的随机数复制到剪贴板的功能。具体实现如下：

private copyToClipboard(text: string): void {
  const pasteboardData = pasteboard.createData(pasteboard.MIMETYPE_TEXT_PLAIN, text);
  const systemPasteboard = pasteboard.getSystemPasteboard();
  systemPasteboard.setData(pasteboardData);
  promptAction.showToast({ message: '已复制' });
}

【完整代码】

// 导入剪贴板服务模块，用于后续实现复制功能
import { pasteboard } from '@kit.BasicServicesKit';
// 导入用于显示提示信息的服务
import { promptAction } from '@kit.ArkUI';

// 使用装饰器定义一个入口组件，这是应用的主界面
@Entry
@Component
struct RandomNumberGenerator {
  // 定义基础间距，用于布局中的间距设置
  @State private baseSpacing: number = 30;
  // 存储生成的随机数字符串
  @State private generatedNumbers: string = '';
  // 应用的主题色
  @State private primaryColor: string = '#fea024';
  // 文本的颜色
  @State private fontColor: string = "#2e2e2e";
  // 输入框是否获取焦点的状态变量
  @State private isFocusStart: boolean = false;
  @State private isFocusEnd: boolean = false;
  @State private isFocusCount: boolean = false;
  // 是否允许生成的随机数重复
  @State private isUnique: boolean = true;
  // 随机数生成的起始值
  @State private startValue: number = 0;
  // 随机数生成的结束值
  @State private endValue: number = 0;
  // 要生成的随机数个数
  @State private countValue: number = 0;

  // 生成随机数的方法
  private generateRandomNumbers(): void {
    const startValue = this.startValue; // 获取当前设定的起始值
    const endValue = this.endValue; // 获取当前设定的结束值
    const countValue = this.countValue; // 获取当前设定的生成个数
    const range: number = endValue - startValue + 1; // 计算生成范围


    // 用于存储生成的随机数
    const generatedNumbers = new Set<number>(); // 使用Set来自动去重
    const tempArray: number[] = []; // 临时数组，用于辅助生成不重复的随机数

    // 如果不允许重复，则使用去重算法生成随机数
    if (!this.isUnique) {
      // 如果请求的随机数数量超过了范围内的总数，则显示错误提示
      if (countValue > range) {
        this.getUIContext().showAlertDialog({
          title: '错误提示',
          message: `请求的随机数数量超过了范围内的总数`,
          confirm: {
            defaultFocus: true,
            value: '我知道了',
            fontColor: Color.White,
            backgroundColor: this.primaryColor,
            action: () => {} // 点击确认后的回调
          },
          onWillDismiss: () => {}, // 对话框即将关闭时的回调
          alignment: DialogAlignment.Center, // 对话框的对齐方式
        });
        return;
      }

      for (let i = 0; i < countValue; i++) {
        let randomIndex = Math.floor(Math.random() * (range - i)); // 在剩余范围内选择一个随机索引
        let randomNum = 0;
        if (tempArray[randomIndex] !== undefined) { // 如果索引位置已有值，则使用该值
          randomNum = tempArray[randomIndex];
        } else {
          randomNum = startValue + randomIndex; // 否则计算新的随机数
        }
        generatedNumbers.add(randomNum); // 添加到Set中，自动去重
        if (tempArray[range - 1 - i] === undefined) { // 更新末尾元素的位置
          tempArray[range - 1 - i] = startValue + range - 1 - i;
        }
        tempArray[randomIndex] = tempArray[range - 1 - i]; // 将末尾元素移到随机位置
      }
      // 将生成的随机数转换成JSON格式的字符串
      this.generatedNumbers = JSON.stringify(Array.from(generatedNumbers));
    } else {
      // 如果允许重复，则直接生成随机数
      for (let i = 0; i < this.countValue; i++) {
        let randomNumber = this.startValue + Math.floor(Math.random() * (this.endValue - this.startValue));
        tempArray.push(randomNumber);
      }
      // 将生成的随机数转换成JSON格式的字符串
      this.generatedNumbers = JSON.stringify(tempArray);
    }
  }

  // 将生成的随机数复制到剪贴板的方法
  private copyToClipboard(text: string): void {
    const pasteboardData = pasteboard.createData(pasteboard.MIMETYPE_TEXT_PLAIN, text); // 创建剪贴板数据
    const systemPasteboard = pasteboard.getSystemPasteboard(); // 获取系统剪贴板
    systemPasteboard.setData(pasteboardData); // 设置剪贴板数据
    // 显示复制成功的提示信息
    promptAction.showToast({ message: '已复制' });
  }

  // 构建页面布局的方法
  build() {
    Column() {
      // 标题栏，展示应用名
      Text("随机数生成")
        .width('100%') // 设置宽度为100%
        .height(54) // 设置高度为54
        .fontSize(18) // 设置字体大小为18
        .fontWeight(600) // 设置字体粗细为600
        .backgroundColor(Color.White) // 设置背景颜色为白色
        .textAlign(TextAlign.Center) // 设置文本居中对齐
        .fontColor(this.fontColor); // 设置文本颜色

      // 随机数范围设置区域
      Column() {
        Row() {
          Text(`随机数范围`)
            .fontWeight(600) // 设置字体粗细为600
            .fontSize(18) // 设置字体大小为18
            .fontColor(this.fontColor); // 设置文本颜色
        }
        .margin({ top: `${this.baseSpacing}lpx`, left: `${this.baseSpacing}lpx` }); // 设置边距

        // 输入随机数范围的两个值
        Row() {
          TextInput({ placeholder: '开始(>=)' }) // 输入框，显示占位符
            .layoutWeight(1) // 设置布局权重为1
            .type(InputType.Number) // 设置输入类型为数字
            .placeholderColor(this.isFocusStart ? this.primaryColor : Color.Gray) // 设置占位符颜色
            .fontColor(this.isFocusStart ? this.primaryColor : this.fontColor) // 设置文本颜色
            .borderColor(this.isFocusStart ? this.primaryColor : Color.Gray) // 设置边框颜色
            .borderWidth(1) // 设置边框宽度
            .borderRadius(10) // 设置圆角半径
            .backgroundColor(Color.White) // 设置背景颜色
            .showUnderline(false) // 不显示下划线
            .onBlur(() => this.isFocusStart = false) // 输入框失去焦点时的处理
            .onFocus(() => this.isFocusStart = true) // 输入框获得焦点时的处理
            .onChange((value: string) => this.startValue = Number(value)); // 输入值变化时的处理

          // 分隔符
          Line().width(10) // 设置分隔符宽度

          TextInput({ placeholder: '结束(<=)' }) // 输入框，显示占位符
            .layoutWeight(1) // 设置布局权重为1
            .type(InputType.Number) // 设置输入类型为数字
            .placeholderColor(this.isFocusEnd ? this.primaryColor : Color.Gray) // 设置占位符颜色
            .fontColor(this.isFocusEnd ? this.primaryColor : this.fontColor) // 设置文本颜色
            .borderColor(this.isFocusEnd ? this.primaryColor : Color.Gray) // 设置边框颜色
            .borderWidth(1) // 设置边框宽度
            .borderRadius(10) // 设置圆角半径
            .backgroundColor(Color.White) // 设置背景颜色
            .showUnderline(false) // 不显示下划线
            .onBlur(() => this.isFocusEnd = false) // 输入框失去焦点时的处理
            .onFocus(() => this.isFocusEnd = true) // 输入框获得焦点时的处理
            .onChange((value: string) => this.endValue = Number(value)); // 输入值变化时的处理
        }
        .margin({
          left: `${this.baseSpacing}lpx`, // 左边距
          right: `${this.baseSpacing}lpx`, // 右边距
          top: `${this.baseSpacing}lpx`, // 上边距
        });

        // 输入生成随机数的个数
        Text('生成随机数个数')
          .fontWeight(600) // 设置字体粗细为600
          .fontSize(18) // 设置字体大小为18
          .fontColor(this.fontColor) // 设置文本颜色
          .margin({ left: `${this.baseSpacing}lpx`, top: `${this.baseSpacing}lpx` }); // 设置边距

        Row() {
          TextInput({ placeholder: '' }) // 输入框，显示占位符
            .layoutWeight(1) // 设置布局权重为1
            .type(InputType.Number) // 设置输入类型为数字
            .placeholderColor(this.isFocusCount ? this.primaryColor : Color.Gray) // 设置占位符颜色
            .fontColor(this.isFocusCount ? this.primaryColor : this.fontColor) // 设置文本颜色
            .borderColor(this.isFocusCount ? this.primaryColor : Color.Gray) // 设置边框颜色
            .borderWidth(1) // 设置边框宽度
            .borderRadius(10) // 设置圆角半径
            .backgroundColor(Color.White) // 设置背景颜色
            .showUnderline(false) // 不显示下划线
            .onBlur(() => this.isFocusCount = false) // 输入框失去焦点时的处理
            .onFocus(() => this.isFocusCount = true) // 输入框获得焦点时的处理
            .onChange((value: string) => this.countValue = Number(value)); // 输入值变化时的处理
        }
        .margin({
          left: `${this.baseSpacing}lpx`, // 左边距
          right: `${this.baseSpacing}lpx`, // 右边距
          top: `${this.baseSpacing}lpx`, // 上边距
        });

        // 设置数字是否可重复的开关
        Row() {
          Text('数字是否可重复')
            .fontWeight(400) // 设置字体粗细为400
            .fontSize(16) // 设置字体大小为16
            .fontColor(this.fontColor) // 设置文本颜色
            .layoutWeight(1); // 设置布局权重为1

          Toggle({ type: ToggleType.Checkbox, isOn: this.isUnique }) // 切换按钮
            .width('100lpx') // 设置宽度
            .height('50lpx') // 设置高度
            .borderColor(Color.Gray) // 设置边框颜色
            .selectedColor(this.primaryColor) // 设置选中时的颜色
            .onChange((isOn: boolean) => this.isUnique = isOn) // 切换状态变化时的处理
            .align(Alignment.End); // 设置对齐方式为右对齐
        }
        .margin({
          top: `${this.baseSpacing}lpx`, // 上边距
        })
        .width('100%') // 设置宽度为100%
        .padding({
          left: `${this.baseSpacing}lpx`, // 左内边距
          right: `${this.baseSpacing}lpx`, // 右内边距
          top: `${this.baseSpacing / 3}lpx`, // 上内边距
        })
        .hitTestBehavior(HitTestMode.Block) // 设置点击测试行为
        .onClick(() => this.isUnique = !this.isUnique); // 点击时切换状态

        // 生成随机数的按钮
        Text('开始生成')
          .fontColor(Color.White) // 设置文本颜色为白色
          .backgroundColor(this.primaryColor) // 设置背景颜色为主题色
          .height(54) // 设置高度为54
          .textAlign(TextAlign.Center) // 设置文本居中对齐
          .borderRadius(10) // 设置圆角半径
          .fontSize(18) // 设置字体大小为18
          .width(`${650 - this.baseSpacing * 2}lpx`) // 设置宽度
          .margin({
            top: `${this.baseSpacing}lpx`, // 上边距
            left: `${this.baseSpacing}lpx`, // 左边距
            right: `${this.baseSpacing}lpx`, // 右边距
            bottom: `${this.baseSpacing}lpx` // 下边距
          })
          .clickEffect({ level: ClickEffectLevel.HEAVY, scale: 0.8 }) // 设置点击效果
          .onClick(() => this.generateRandomNumbers()); // 点击时生成随机数
      }
      .width('650lpx') // 设置宽度
      .margin({ top: 20 }) // 设置上边距
      .backgroundColor(Color.White) // 设置背景颜色为白色
      .borderRadius(10) // 设置圆角半径
      .alignItems(HorizontalAlign.Start); // 设置水平对齐方式为左对齐

      // 显示生成的随机数
      Column() {
        Text(`生成的随机数为：`)
          .fontWeight(600) // 设置字体粗细为600
          .fontSize(18) // 设置字体大小为18
          .fontColor(this.fontColor) // 设置文本颜色
          .margin({
            top: `${this.baseSpacing}lpx`, // 上边距
            left: `${this.baseSpacing}lpx`, // 左边距
          });

        Text(`${this.generatedNumbers}`) // 显示生成的随机数
          .width('650lpx') // 设置宽度
          .fontColor(this.primaryColor) // 设置文本颜色为主题色
          .fontSize(18) // 设置字体大小为18
          .textAlign(TextAlign.Center) // 设置文本居中对齐
          .padding({ left: 5, right: 5 }) // 设置内边距
          .margin({
            top: `${this.baseSpacing / 3}lpx` // 上边距
          });

        // 复制生成的随机数到剪贴板的按钮
        Text('复制')
          .enabled(this.generatedNumbers ? true : false) // 按钮是否可用
          .fontColor(Color.White) // 设置文本颜色为白色
          .backgroundColor(this.primaryColor) // 设置背景颜色为主题色
          .height(54) // 设置高度为54
          .textAlign(TextAlign.Center) // 设置文本居中对齐
          .borderRadius(10) // 设置圆角半径
          .fontSize(18) // 设置字体大小为18
          .width(`${650 - this.baseSpacing * 2}lpx`) // 设置宽度
          .margin({
            top: `${this.baseSpacing}lpx`, // 上边距
            left: `${this.baseSpacing}lpx`, // 左边距
            right: `${this.baseSpacing}lpx`, // 右边距
            bottom: `${this.baseSpacing}lpx` // 下边距
          })
          .clickEffect({ level: ClickEffectLevel.HEAVY, scale: 0.8 }) // 设置点击效果
          .onClick(() => this.copyToClipboard(this.generatedNumbers)); // 点击时复制随机数
      }
      .width('650lpx') // 设置宽度
      .backgroundColor(Color.White) // 设置背景颜色为白色
      .borderRadius(10) // 设置圆角半径
      .margin({ top: `${this.baseSpacing}lpx` }) // 设置上边距
      .alignItems(HorizontalAlign.Start); // 设置水平对齐方式为左对齐
    }
    .height('100%') // 设置高度为100%
    .width('100%') // 设置宽度为100%
    .backgroundColor("#f2f3f5"); // 设置背景颜色
  }
}

大家好，我是程序员鱼皮。

大家如果平时使用网站或产品时出现了问题，一般都会去寻找 “联系客服” 的位置，从而获得人工的帮助。我们团队的面试刷题产品 - 面试鸭最近就遇到了这样一个难题：明明我们网站右下角就有联系客服按钮、而且我们每道面试题目下方都有反馈按钮，但是很多用户还是不知道怎么给我们反馈问题。

我们利用第三方网站统计工具进行分析，发现整整一个月客服按钮的点击数竟然才 20 多？！感觉毛用没有啊！

于是，我就拉着开发同学一起开会讨论，希望解决这个问题。

我说：作为良心产品，我要让用户都知道怎么找我们反馈问题！怎么实现我不管，明天上线！

开发小 A 当时就这个表情：

结果，一天后，小 A 竟然真的拿电脑来给我看效果了。我一看，立刻就红温了，就跟刚煮熟的螃蟹似的：

这。。这 ** 是客服？我们这可是一个正经网站啊！

不过仔细想一想，感觉还挺不错的，这下网站可真是充满了吸引力啊！应该会有很多同学点击了（狗头）。

我本来以为这个客服形象需要花费很长时间开发，结果小 A 跟我说：可简单了，一会儿就搞定了~

于是，我也去学习了解了一下，确实简单，这篇文章就分享给大家。

⭐️ 喜欢看视频的同学，更推荐看视频教程哦：
https://bilibili.com/video/BV1FeUaYDEKr/

网站看板娘教程

其实前面我们看到的动漫看板娘，是运用了 Live2D 技术实现的。

Live2D 是一种将 2D 图像转换为各种动画效果的技术。通过骨骼动画和物理引擎等技术，能够实现类似 3D 的立体动画效果，但实际仍然是 2D 图像的变形和运动。

相比于 GIF 图片，Live2D 模型可以实时和用户进行互动，更加吸引用户。

怎么样，是不是迫不及待也想给自己的网站整一个呢？

下面只用 1 分钟，手把手教你怎么给网站快速添加一个可爱的 Live2D 看板娘。对于提高网页点击率和用户访问时长来说，应该还是很有帮助的。

来不及学的朋友，记得点个收藏，以后说不定用得上。

一、准备工作

首先，我们需要准备 2 样东西：一套 Live2D 模型文件，和让网站加载模型的 JS 脚本。

1、模型文件

每个 Live2D 模型都对应了一组文件，定义了模型信息、物理效果、姿势动作、图片资源等，结构十分复杂：

而且模型文件格式又分为 MOC 和 MOC3 两个版本，MOC3 的模型不仅视觉效果更好，还支持更复杂、更自然流畅的动作，但相应的文件结构会更复杂。我们开头看到的网站中的二次元红衣子女，就是用的 MOC3 的模型。

虽然模型复杂，不过别担心，我们可以通过 Live2D 官网和 GitHub 的开源项目搜到现成的模型文件：

• Live2D 官方：
  https://www.live2d.com/zh-CHS/learn/sample

• ⭐️ 有很多模型和示例站点：
  https://github.com/imuncle/live2d

• 模型收集：
  https://github.com/Eikanya/Live2d-model

友情提示，由于 Live2D 的开发是需要大量时间精力的，
一般高质量的模型都有版权保护，所以请大家谨慎使用
。

2、JS 脚本

有了模型文件，我们怎么让它出现在网站上呢？这就需要 JS 脚本。

我们可以利用 WebGL 这一主流的图形渲染技术来编写 JS 脚本。但这个技术有一定的复杂度和学习成本，我想哪怕你是一个经验丰富的网站开发者，也不会想要自己写 WebGL 代码去加载 Live2D 模型的。

我们可以使用一些现成的库来简化编码，比如 2D 渲染引擎 pixi.js，或者使用 Live2D 官方提供的 Web SDK。

但是，如果你没有两把刷子，估计看不懂那破朔迷离的官方文档。所以呢，要说贴心，还得是咱广大网友，在 GitHub 上开源了不少开箱即用的 Live2D 加载库。

经过我的一番对比，还是 star 数高的这个库最好用。使用它，不用自己写一行代码，就能给网站增加看板娘！下面来试一试。

开源仓库：
https://github.com/stevenjoezhang/live2d-widget
（不包含模型）

二、快速接入看板娘

如果你是小白，只需要复制下面这一行自动加载脚本的代码， 放到你网站 html 页面的
head
或
body
中，就可以加载看板娘：

<script src="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>

来，运行网页看下效果，看板娘直接就出来了有没有！还支持对话、换模型、换衣服、截图功能：

哎呀，突然感觉自己成为前端大佬了，好有成就感啊！

为什么只用这一行代码，就实现了呢？

其实，我们刚刚是加载了项目作者在远程服务器上为我们提供的 JS 脚本，这个脚本会帮我们从远程服务器下载模型文件。

这就意味着什么呢？如果你想要自己定义加载哪些模型、以及对话的内容，就不是很方便，因为你无法登录到别人的服务器去修改脚本。

作者虽然也考虑到了这一点，但他的做法是搞了个 PHP 的后端项目，通过接口的方式来动态获取要加载的模型列表和对话信息。

我就给网站加个看板娘，你还让我去搭一个后端？还让我去搞 PHP？那我必然是不会这么干的！

下面鱼皮教大家一种更简单的方式，来自定义看板娘。

三、自定义

1、改造项目

首先，将上述开源项目完整下载到本地，用一个编辑器打开。

找到
autoload.js
文件，这是整个 Live2D 加载的入口，我们可以看到默认情况下是从远程地址加载的模型列表和对话信息。

其中，initWidget 方法非常关键，顾名思义，作用是初始化组件。点进去，可以看到加载组件的方法（loadWidget），这里新建了一个模型对象。

再点进去，就进入了模型定义文件，默认情况下，是通过网络请求从远程服务器上加载的模型列表配置。

那我们只要把这段逻辑改为从本地加载我自己写的模型列表配置，就可以了呀~

没错，想到这里，可能有些同学就直接去爆改这个源文件了，但这是很不优雅的！

我们可以复制该模型定义文件，得到一个新的
本地模型定义文件
，保证函数和大多数代码不变，只需要将部分代码修改为加载本地特定位置下的模型文件和模型配置文件。

这段代码大家暂时不用关注，文末我会分享源码

然后，修改加载组件的方法，根据开发者传入的配置信息，决定是否从本地加载模型，不就可以了么？

做完这些之后，你需要重新打包一下修改完的文件。由于项目用了 npm 进行管理，你需要先安装 Node.js 服务，然后在项目内安装依赖、再执行 build 打包，就得到了新的加载文件（waifu-tips.js）。

2、效果展示

改造完毕，下面我们来使用一下改造后的项目吧~

先随便写一个小网站：

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Live2D 看板娘</title>
 </head>
 <body>
   <script src="./autoload.js"></script>
 </body>
</html>

将模型文件和模型列表配置文件放到项目根目录中：

大家可以自行修改模型列表配置文件
model_list.json
（数组的每个元素都是一个模型、二维数组的每个元素是不同的皮肤）：

最后，修改 autoload.js 加载文件的配置，包括将 live2d 路径改为当前路径，修改初始化组件配置为本地（使用本地模型、指定模型文件路径、模型列表配置文件的路径），还可以自定义要使用的工具：

// 改为相对路径
const live2d_path = "./";
// ...
// 初始化组件
initWidget({
 isLocalModel: true, // 使用本地模型
 waifuPath: live2d_path + "waifu-tips.json",
 modelsPath: live2d_path + "model",
 modelListPath: live2d_path + "model/model_list.json",
 tools: ["hitokoto", "asteroids", "switch-model", "switch-texture", "photo", "info", "quit"]
});

大功告成，我们来双击文件运行一下~

结果，运行失败啦！不是哥们，你人呢？

为什么模型没加载出来呢，看下 F12 控制台的报错就知道了：

这是因为浏览器为了安全，限制了从本地文件系统直接加载资源的能力。所以我们需要在本地启动一个服务器来运行网页，这一步难不倒大家。可以直接用开发工具自带的服务器，点一下图标就能正确运行了，也可以自己安装一个 serve 工具。

这样，我们的 Live2D 看板娘，就完美加载出来啦~

四、更多操作

接下来你还可以通过修改配置文件（waifu-tips.json）来自定义对话，通过修改工具文件
tools.js
来自定义点击模型旁边图标时执行的操作，通过加一些 CSS 代码来调整模型的位置等等。

改完后不要忘记重新 build 打包哦

还可以通过 F12 查看到对应的元素，修改样式文件调整位置，比如：

<style>
 #waifu {
   right: 40px !important;
   left: unset !important;
}
</style>

以上就是本期分享，我把魔改后的代码开源到了
自己的 GitHub 仓库
，大家可以直接使用，让你的网站魅力无穷！

不过代价就是模型文件比较大，可能会消耗大量的带宽和流量。我们也在纠结是否真的要给网站应用这个功能，欢迎大家给我们一些建议吧~

更多编程学习资源

• Java前端程序员必做项目实战教程+毕设网站

• 程序员免费编程学习交流社区（自学必备）

• 程序员保姆级求职写简历指南（找工作必备）

• 程序员免费面试刷题网站工具（找工作必备）

• 最新Java零基础入门学习路线 + Java教程

• 最新Python零基础入门学习路线 + Python教程

• 最新前端零基础入门学习路线 + 前端教程

• 最新数据结构和算法零基础入门学习路线 + 算法教程

• 最新C++零基础入门学习路线、C++教程

• 最新数据库零基础入门学习路线 + 数据库教程

• 最新Redis零基础入门学习路线 + Redis教程

• 最新计算机基础入门学习路线 + 计算机基础教程

• 最新小程序入门学习路线 + 小程序开发教程

• 最新SQL零基础入门学习路线 + SQL教程

• 最新Linux零基础入门学习路线 + Linux教程

• 最新Git/GitHub零基础入门学习路线 + Git教程

• 最新操作系统零基础入门学习路线 + 操作系统教程

• 最新计算机网络零基础入门学习路线 + 计算机网络教程

• 最新设计模式零基础入门学习路线 + 设计模式教程

• 最新软件工程零基础入门学习路线 + 软件工程教程

Chrome 浏览器 131 版本新特性

一、Chrome 浏览器 131 版本新特性

1.
在 iOS 上使用 Google Lens 搜索

自 Chrome 126 版本以来，用户可以通过 Google Lens 搜索屏幕上看到的任何图片或文字。

要使用此功能，请访问网站，并点击聚焦时出现在地址栏的 Google Lens 搜索按钮，或者点击桌面右键菜单、桌面和移动端的三点菜单。用户可以在屏幕上任意点击、选中或拖动以搜索内容，并通过在搜索框中添加关键词或问题来优化搜索。

管理员可以通过名为 LensOverlaySettings 的策略控制此功能。进行搜索时，屏幕截图会被发送到 Google 服务器，但不会关联任何 ID 或账户，且不会被任何人查看，内容信息也不会被记录。我们已在 iOS 的 Chrome 131 版本中开始逐步推出此功能，并计划在 Chrome 132 版本中全面推出。

1.1.
适用版本：

• Chrome 126
  (适用于 ChromeOS、Linux、macOS、Windows)：在 1% 的稳定版中发布该功能
• Chrome 127
  (适用于 ChromeOS、Linux、macOS、Windows)：在 100% 的稳定版中发布该功能
• Chrome 131
  (适用于 iOS)：开始推出该功能
• Chrome 132
  (适用于 iOS)：在 100% 的稳定版中发布该功能

2.
iOS 上的异步实时安全浏览检查

目前，安全浏览检查是在页面加载的阻塞路径上进行的，这意味着用户在检查完成之前无法看到页面。为了提升 Chrome 的加载速度，在 Chrome 122 版本（iOS 上为 Chrome 131 版本）之后，实时安全浏览检查将不再阻塞页面加载。

2.1.
适用版本：

• Chrome 122：Android、ChromeOS、Linux、macOS、Windows
• Chrome 131：iOS

3.
适用于 macOS 的 PWA Shim 临时代码签名

在 macOS 上安装渐进式 Web 应用程序（PWA）时创建的应用程序 Shim 的代码签名将更改为在应用程序安装时生成的临时代码签名。

代码签名由 macOS 用于标识应用程序。这些临时签名会让每个 PWA 应用 Shim 在 macOS 上拥有唯一的身份。

可以使用 chrome://flags/#use-adhoc-signing-for-web-app-shims 标志开启该功能进行测试。

如果该功能与现有的安全策略不兼容，可以使用 AdHocCodeSigningForPWAsEnabled 策略禁用该功能，以便管理员部署更新的端点安全策略。

3.1.
适用版本：

• Chrome 129 on macOS
  ：此功能可以通过标志（chrome://flags/#use-adhoc-signing-for-web-app-shims）开启。
• Chrome 131 on macOS
  ：该功能开始逐步向稳定版推出，初始推出率为 1%。

4.
从 Google Drive 中选择文件

从 Chrome 131 开始，iOS 版 Chrome 用户可以直接从 Google Drive 将文件上传到网页，而无需先将其下载到设备上。

5.
Chrome PDF 查看器 OCR 功能

Chrome 桌面版现在使扫描的 PDF 更加易于访问。通过设备上的光学字符识别（OCR）技术来确保隐私（不会将内容发送到 Google），Chrome 自动转换扫描的 PDF，让用户可以选择文本、使用 Ctrl+F 搜索、复制和粘贴。该功能不会绕过受保护的 PDF，仅对用户有访问权限的 PDF 使用 OCR。

• Chrome 131
  适用于 ChromeOS、Linux、macOS 和 Windows。

6.
桌面端新标签页的 iOS 版 Chrome 推广

桌面端的新标签页中将显示 iOS 版 Chrome 的推广信息。此推广旨在提高用户对 iOS 版 Chrome 的认知，并提供简单的安装方式。

可以使用现有的 PromotionsEnabled 和 NTPMiddleSlotAnnouncementVisible 策略来控制此功能。

7.
跨配置文件的密码重用检测

之前，公司凭证的密码重用检测只能在公司配置文件中检测到。现在，在受管理的浏览器上，密码重用检测可以在所有非隐身模式的配置文件中检测公司凭证的重用。

更新了跨配置文件密码重用检测的标准，以更准确地反映受管理的企业账户。

8.
Android 版 Chrome 现已支持第三方自动填充和密码管理服务

此前，Android 版 Chrome 中的第三方自动填充和密码管理服务是通过辅助功能 API 实现的。

在 Chrome M131 版本中，增加了对 Android 自动填充的直接支持，这意味着这些第三方服务可以在不依赖辅助功能 API 的情况下与 Android 版 Chrome 配合使用，从而提升 Chrome 和第三方自动填充服务的性能。

要使用此功能，用户需要在 Android 设置中配置好第三方提供商。然后，在 Chrome 中访问设置 -> 自动填充服务，并选择“使用其他服务进行自动填充”。

如果用户未更改这两个设置，Chrome 将继续使用 Google 的服务来自动填充密码、支付和地址信息。是否允许用户使用第三方自动填充服务可由新的策略
ThirdPartyPasswordManagersAllowed
控制。

9.
弃用安全浏览扩展报告功能

Chrome 正在弃用安全浏览扩展报告功能，该功能曾通过收集参与用户的遥测信息来增强所有用户的安全性，并用于 Google 安全浏览保护。收集的数据包括访问网页的 URL、有限的系统信息和部分页面内容。

此功能现已被增强保护模式取代。建议用户切换到增强保护模式，以便在启用 Chrome 最强安全性功能的同时，继续提供对所有用户的安全保护。

10.
不再信任 Entrust 证书

由于 Entrust 持续存在合规问题，Chrome 将在 Chrome 131 及更高版本的 Windows、macOS、ChromeOS、Android 和 Linux 中默认更改对 Entrust 颁发的公开信任 TLS 服务器认证（网站）证书的信任方式。iOS 的政策不允许在 iOS 版 Chrome 中使用 Chrome 根存储。

具体而言，通过 Entrust 根 CA 证书验证并存储于 Chrome 根存储中的 TLS 证书，如果：

• 签发日期为 2024 年 11 月 11 日之后
  ，将不再被默认信任。
• 签发日期为 2024 年 11 月 11 日或之前
  ，则不受此更改的影响。
• Chrome 131 on Android、ChromeOS、Linux、macOS、Windows
  ：所有依赖 Chrome 根存储的 Chrome 131 及更高版本将执行该阻止操作，但阻止仅适用于 2024 年 11 月 11 日后签发的证书。

11.
iOS 上的不安全表单警告

自 Chrome 125 起，Chrome 浏览器在 iOS 上会阻止从安全页面提交到不安全页面的表单。当 Chrome 检测到不安全的表单提交时，会显示一个警告，要求用户确认提交。此举的目的是防止在没有用户明确批准的情况下，通过明文传输泄露表单数据。提供了一个名为
InsecureFormsWarningsEnabled
的策略，用于控制此功能。

• Chrome 125 在 iOS 上
  ：此功能开始推出。
• Chrome 131 在 iOS 上
  ：InsecureFormsWarningsEnabled 策略将被移除。

12.
具有高级检查的 PartitionAlloc (PA/AC)

PartitionAlloc (PA) 及其相关的内存安全项目包含一系列高级保护措施，这些措施默认情况下被禁用（或仅在调试版本中启用），因为它们可能会对性能产生影响。尽管立即为所有用户启用该功能可能不可行，但仍然有机会在特定的有限条件下部分启用它。

13.
简化的登录和同步体验

从 Chrome 131 开始，启用 Chrome 同步的现有用户将体验到简化和整合的登录与同步流程。

Chrome 同步不再作为设置中的独立功能显示，也不再单独列出。相反，用户只需登录 Chrome，即可在 Google 帐户中使用和保存信息，如密码、书签等，前提是遵循相关的企业政策。

与之前一样，保存和访问 Chrome 数据到 Google 帐户的功能仍然可以通过 SyncTypesListDisabled 进行控制。登录 Chrome 的功能仍然可以通过 BrowserSignin 来关闭，如同以前一样。

需要注意的是，这些更改不会影响用户在 Web 上登录 Google 服务（如 Gmail）的能力，即使他们未登录 Chrome，也不会影响他们保持 Chrome 未登录状态的能力，或者控制与 Google 帐户同步的信息。

14.
能源节省模式下的标签冻结

当启用能源节省模式时，Chrome 会冻结那些已隐藏且静默超过 5 分钟并且占用大量 CPU 的标签，除非：

• 该标签提供音频或视频会议功能，通过麦克风、摄像头、屏幕、窗口或标签捕获，或者有一个 RTCPeerConnection 正在使用打开的 RTCDataChannel 或一个活跃的 MediaStreamTrack。
• 该标签控制一个外部设备，通过 Web USB、Web Bluetooth、Web HID 或 Web Serial 被检测到。

此功能通过减少 CPU 使用，延长电池寿命并加速 Chrome 浏览器的运行。

该功能将在 Chrome 131 中开始向 1% 的稳定版用户逐步推出，随后会逐渐扩展到 100% 的稳定版用户。

15.
更新 Google Play 服务以修复设备上的密码问题

使用旧版 Google Play 服务的用户将会在设备上的密码功能上遇到功能减少的问题，并且密码管理器可能很快完全无法使用。这些用户需要更新 Google Play 服务，或者根据他们的状态，系统将引导他们通过其他故障排除方法进行解决。这是一个正在进行的迁移过程，仅影响使用 Google 密码管理器的 Android 用户。

16.
用于 TLS 的 X25519Kyber768 密钥封装机制

从 Chrome 124 开始，Chrome 在所有桌面平台上默认启用了基于 NIST 标准（ML-KEM）的新后量子安全 TLS 密钥封装机制 X25519Kyber768。该机制旨在保护 Chrome 与支持 ML-KEM 的服务器之间的网络流量，防止未来量子计算机解密。这一变更对于服务器运营商应当是透明的。此密码算法将用于 TLS 1.3 和 QUIC 连接。

17.
CSS 锚点定位属性
inset-area
的废弃

CSS 工作组（CSSWG）决定将 inset-area 属性重命名为 position-area。

通过此次功能更新，position-area 属性作为 inset-area 的同义词发布，标志着 inset-area 属性的废弃和移除。

这一变更将影响使用 inset-area 属性的开发者，未来应该使用新的 position-area 属性来替代旧的名称。

18.
改进
<details>
和
<summary>
元素的样式结构

为 <details> 和 <summary> 元素提供更多的 CSS 样式支持，使这些元素可以在更多构建披露小部件或手风琴小部件的网页中使用。

这项更改移除了以前限制设置这些元素的 display 属性的限制，并新增了 ::details-content 伪元素，用于样式化用于扩展和折叠的部分容器。

19.
键盘锁定和指针锁定权限

当网站请求使用键盘锁定或指针锁定时，浏览器可能会向用户显示权限提示，并将用户的偏好设置保存为内容设置。这些设置可以通过权限 API 进行查询。此措施有助于减少对这些 API 的滥用。

20.
移除非标准的
GPUAdapterrequestAdapterInfo()
方法

WebGPU 工作组（WG）决定，requestAdapterInfo() 方法触发权限提示的方式不切实际，因此他们移除了该选项，并用 GPUAdapter 的 info 属性替代。这样，网页开发者可以同步地获取相同的 GPUAdapterInfo 值。

21.
<select>
解析器放宽

此更改使 HTML 解析器在 <select> 元素中允许更多的标签，除了 <option>、<optgroup> 和 <hr>。

这项更改是为了支持可自定义的 <select> 功能，但由于它可以单独实现并且风险较小，因此首先推出。

此功能受临时策略 SelectParserRelaxationEnabled 控制。该策略将在 Chrome 136 版本中停止生效。

22.
支持外部 SVG 资源用于
clip-path
、
fill
、
stroke
和
marker-*
属性

此更改允许在 clip-path、fill、stroke 和 marker-* 属性中使用外部 SVG 资源的引用。例如，可以使用如下语法：

clip-path: url("resources.svg#myPath");

可以在 CSS 中直接引用外部 SVG 文件中的路径、标记或填充/描边服务器，从而使图形元素的样式更加灵活和可重用。

23.
支持非特殊方案 URL

Chrome 130 开始支持非特殊方案的 URL，例如 git://example.com/path。之前，Chromium 的 URL 解析器不支持非特殊 URL，且解析非特殊 URL 时会将路径视为不透明的，这与 URL 标准不一致。现在，Chromium 的 URL 解析器已正确解析非特殊 URL，遵循 URL 标准。

23.1.
适用版本：

• Chrome 130
  在 Windows、macOS、Linux、Android 上支持非特殊方案的 URL。
• Chrome 131
  在 Windows、macOS、Linux、Android 上继续支持。
• Chrome 134
  在 Windows、macOS、Linux、Android 上将移除此功能标志。

24.
翻译功能与 Google Lens 搜索结合

增强现实（AR）翻译功能正在被集成到 Google Lens 搜索功能中。

25.
Chrome 浏览器中的新策略

26.
Chrome 浏览器移除的策略

二、Chrome 131 版本更新日期

1. Chrome 131

1.1. Beta 版

2024 年 10 月 16 日，星期三

1.2. 稳定版本

2024 年 11 月 5 日，星期二

参考资料

• Chrome Enterprise and Education release notes