Chrome自动填充扩展：如何修改md-select状态及md-text内<b>标签文本？

// 精准定位：结合父级md-select的aria-label，避免多个组件冲突
const targetBold = document.querySelector('[aria-label="iRecommendation: No"] .md-text > b');
if (targetBold) {
  targetBold.textContent = 'Not Qualified'; // 替换成你需要的文本
}

如果页面中只有一个.md-text元素，也可以简化为：

document.querySelector('.md-text > b').textContent = 'Not Qualified';

优先用textContent而非innerHTML，避免XSS风险，也更符合纯文本修改的场景。

二、当前实现方式的问题 #

你现在直接修改aria-label和class的方式仅修改了DOM表面属性，并没有触发Angular Material组件的核心逻辑：

1. Angular Material的md-select依赖ng-model绑定的变量（这里是ia.iRecommendation）同步状态和数据，直接改DOM属性不会更新这个模型变量，导致表单提交时数据可能和显示不一致。
2. 手动替换class可能遗漏组件内部的状态变化，比如ng-dirty这类状态应该由组件自身触发，而非硬编码设置。

三、正确的实现思路（推荐） #

针对Angular Material的md-select，应该通过触发组件原生交互或修改绑定模型来实现自动选择，而非直接修改DOM：

方法1：模拟点击下拉选项（最可靠） #

找到对应值的md-option元素，触发点击事件，让组件自动处理所有状态更新：

// 假设下拉选项的value是"No"，根据实际HTML调整选择器
const targetOption = document.querySelector('md-option[value="No"]');
if (targetOption) {
  targetOption.click();
}

方法2：直接修改Angular模型（需访问组件scope） #

如果能访问到Angular的scope，可以直接修改绑定变量并触发脏检查：

// 找到md-select元素对应的Angular元素
const selectElement = document.querySelector('[ng-model="ia.iRecommendation"]');
if (selectElement) {
  const scope = angular.element(selectElement).scope();
  // 修改绑定的模型值
  scope.ia.iRecommendation = 'No';
  // 触发Angular脏检查，更新视图
  scope.$apply();
}

注意：Chrome扩展的content script运行在隔离上下文，可能需要通过window.postMessage或注入脚本到页面上下文来访问Angular scope。

内容的提问来源于stack exchange，提问作者top redBird12355