Javascript 在现有生产网站上构建Chrome扩展

背景：我一直在生产站点（Yelp、Zillow、Trulia、Reddit）上开发一系列使用react的浏览器扩展。我还没有参加关于React的课程（我正计划参加），但我的问题是：

生产站点中的类的命名有多稳定（许多类都附加了奇怪的数字和字母），如果它们不稳定，它们多久会更改一次，有没有办法为这些类型的项获得更稳定的选择器

当类完全非人类可读时，有没有办法以更人类可读的格式查看类名？e、 g.

我不喜欢构建这些扩展，每当出现小版本时就让它们中断（我知道它们会中断，因为站点已经显著更新，但如果它们在小版本中保持稳定，我会更喜欢）

示例：以这样的跨度为目标

<span class="lemon--span__373c0__3997G text__373c0__2Kxyz reviewCount__373c0__2r4xT text-color--black-extra-light__373c0__2OyzO text-align--left__373c0__2XGa-">865</span>

---

没有办法获得原始名称，也没有任何东西可以阻止网站开发人员每天或几次更新随机部分，因此要找到一种不依赖确切名称的方法

• 尝试查找非随机化属性
• 使用元素之间的关系（）
• 像

  foo.querySelector（'[class*=“reviewCount”]'）一样使用（

---

准备好让你的扩展不可避免地收支平衡，即使只是偶尔。没有办法获得原始名称，也没有任何东西阻止网站开发人员每天或几次更新随机部分，因此找到一种不依赖确切名称的方法

• 尝试查找非随机化属性
• 使用元素之间的关系（）
• 像

  foo.querySelector（'[class*=“reviewCount”]'）一样使用（

准备好让你的扩展不可避免地收支平衡，即使只是偶尔

const ratingCountTarget = result
            .closest('.mainAttributes__373c0__1r0QA')
            .querySelector('.reviewCount__373c0__2r4xT');