Itsnotlupus' React Tools

Observe, inspect and perhaps modify a React tree through the React DevTools Hook

Bu script direkt olarak kurulamaz. Başka scriptler için bir kütüphanedir ve meta yönergeleri içerir // @require https://update.greasyfork.org/scripts/473998/1246974/Itsnotlupus%27%20React%20Tools.js

Bu betiği kurabilmeniz için Tampermonkey, Greasemonkey ya da Violentmonkey gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

You will need to install an extension such as Tampermonkey to install this script.

Bu betiği kurabilmeniz için Tampermonkey ya da Violentmonkey gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

Bu betiği kurabilmeniz için Tampermonkey ya da Userscripts gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

You will need to install an extension such as Tampermonkey to install this script.

Bu komut dosyasını yüklemek için bir kullanıcı komut dosyası yöneticisi uzantısı yüklemeniz gerekecek.

(Zaten bir kullanıcı komut dosyası yöneticim var, kurmama izin verin!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(Zateb bir user-style yöneticim var, yükleyeyim!)

Yazar
itsnotlupus
Versiyon
1.1
Oluşturulma
27.08.2023
Güncellenme
07.09.2023
Boyut
3,17 KB
Lisans
MIT

A scrappy little library that plugs into React and tries to get useful bits user scripts can leverage.

Sample usage:

const stuff = new ReactTools();

stuff.observe(root => {
  console.log("A react tree was updated, and here's the fiber tree for it:", root);
});

// If the site you're targeting uses Redux and wasn't written by psychopaths, this will usually work.
// (The tree will need to get rendered first. You can use observe() to wait for it.)

const reduxStore = stuff.getProp("store");

findNodesWithProp() and updateNodeProps() are a bit trickier to use.
You'll want to install the React Dev Tools to see what props are actually available on each node.
See https://greasyfork.org/en/scripts/444804-crunchyroll-watchlist-userscript/code for an example use in tweakPlayer()
That crunchyroll script no longer works, but the code shows how to make this stuff work:
Mutating react props from outside of React is almost futile, since they get overwritten almost immediately.
But "almost" is the operative word there. You can effectively control React component props by:

  • having a React observer
  • that finds the node(s) you care about on every iteration with findNodesWithProp()
  • and reset the props you need with updateNodeProps()

Important Notes:

This library doesn't use the React DevTools Hook correctly.
There are almost certainly better way to use the hook APIs to do the things it does.
And yet it works (for me.)