在现有的Production React网站上构建Chrome扩展程序 [英] Building Chrome Extensions on Existing Production React Websites

问题描述

背景:我已经在使用react的生产站点(Yelp，Zillow，Trulia，Reddit)上开发了许多浏览器扩展.我还没有上过React的课程(我正在计划这样做)，但是我的问题是:

1. 生产反应站点中的类的命名方式稳定(许多类中添加了怪异的数字和字母)，如果它们不稳定，它们将多久更改一次，并且有什么方法可以使它们更稳定这些类型的项目的选择器?

2. 当类是完全不可读的类时，有没有办法以更易读的格式查看类名?例如< div class =''_ 2jJNpBqXMbbyOiGCElTYxZ''>

我不希望构建这些扩展，并让它们在有次要发行版的时候就被破坏(我知道它们会随着站点的重大更新而崩溃，但希望它们对于次要发行版是稳定的).

示例:定位这样的跨度

 < 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> 

具有这样的查询选择:

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

解决方案

没有办法获得原始名称，也没有什么可以阻止站点开发人员每天或每天几次更新随机部分，因此找到了一种不依赖于此的方法确切的名字.

• 尝试查找非随机属性
• 使用元素之间的关系(组合器)
• 使用部分匹配，例如 foo.querySelector('[class * =" reviewCount'];')

准备好扩展，即使只是偶尔也不可避免.

Background: I've been developing a bunch of browsers extensions on production sites (Yelp, Zillow, Trulia, Reddit) which use react. I've yet to take a course on React (I'm planning on doing it) but my questions are:

1. How stably named are the classes in production react sites (many of the classes have weird numbers and letters appended) and if they are not stable, how often do they change and is there any way to get a more stable selector for these types of items?

2. When classes are completely non-human readable, is there any way to view the class name in a more human readable format? e.g. <div class="_2jJNpBqXMbbyOiGCElTYxZ">

I'd hate to build these extensions and have them break whenever there is a minor release (I know they will break as the site is significantly updated but would prefer if they were stable for minor releases).

Example: Targeting a span like this

<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>

with a queryselection like this:

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

解决方案

There's no way to get the original names and nothing precludes the site developers from updating the random parts any day or several times a day so find a way to not depend on the exact names.

• Try finding the non-randomized attributes
• Use relations between elements (combinators)
• Use partial matching like foo.querySelector('[class*="reviewCount"]')

And get ready to having your extension inevitably break even if only occasionally.

这篇关于在现有的Production React网站上构建Chrome扩展程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！