Chrome扩展如何获取页面指定元素的title属性及实现方案

你所写的document.getelementbyTitle是不存在的原生JS API，无法通过该方法获取元素，可通过以下几种方式实现需求：

• 按匹配class属性获取元素再取title
  示例代码：

  // 匹配同时携带三个class的a标签，可根据你的需求调整class匹配规则
  const targetLink = document.querySelector('a.c01438.c01439.c01156');
  // 安全取值，避免元素不存在时报错
  const myTitle = targetLink?.title || '';
  

• 按匹配href属性获取元素再取title
  支持多种匹配规则：

  1. 精确匹配href完整值

  const targetLink = document.querySelector('a[href="https://www.1112.com/signup"]');
  const myTitle = targetLink?.title || '';
  

  2. 模糊匹配href包含指定字符串

  // 匹配href包含1112.com的a标签
  const targetLink = document.querySelector('a[href*="1112.com"]');
  const myTitle = targetLink?.title || '';
  

  3. 匹配href开头/结尾为指定字符串

  // 匹配href以https://www.1112.com开头的a标签
  const targetLink = document.querySelector('a[href^="https://www.1112.com"]');
  // 匹配href以/signup结尾的a标签
  // const targetLink = document.querySelector('a[href$="/signup"]');
  const myTitle = targetLink?.title || '';
  

• 按已知title值直接匹配元素
  如果你提前知道要找的title值为1112.com，可以直接按属性匹配：

  const targetLink = document.querySelector('a[title="1112.com"]');
  const myTitle = targetLink?.title || '';
  

注意事项 #

Chrome扩展的内容脚本执行时要确保DOM已加载完成，可通过两种方式处理：

1. 在manifest.json的content_scripts配置项中设置"run_at": "document_idle"（默认值，DOM加载完成后执行）
2. 把获取元素的逻辑包裹在DOM加载完成的回调中：

document.addEventListener('DOMContentLoaded', () => {
  // 此处放置获取元素的相关代码
})

内容的提问来源于stack exchange，提问作者テンカサン