Building Chrome Extensions on Existing Production React Websites

问题

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');

回答1:

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.

来源：https://stackoverflow.com/questions/62563329/building-chrome-extensions-on-existing-production-react-websites