fix(twitch): react 18 support

.github/workflows/ci.md

@@ -0,0 +1,35 @@
+# Jobs
+
+## Build job (`ci`)
+
+- Builds the chrome extension with `yarn build:prod` and firefox extension with `[email protected] MV2=true yarn build:prod`
+- Both builds get zipped
+- For chrome: Create CRX from zip with action `cardinalby/webext-buildtools-chrome-crx-action@v2` and private key `secrets.WEB_EXTENSION_CRX`
+- For Firefox: Create XPI from zip with action `kewisch/action-web-ext@v1`
+- CRX and XPI files uploaded as artifact `installable`
+- Chrome zip and Firefox zip uploaded as artifact `build`
+- Both manifest jsons uploaded as artifact `manifest`
+
+## Release job (`release`)
+
+- Creates Github releases and tags
+
+## Side loading deploy job (`deploy`)
+
+- Builds with `yarn build-hosted:prod`
+- Uploads to Cloudflare R2 with action `shallwefootball/s3-upload-action@master`
+  - Endpoint: `secrets.R2_API_ENDPOINT`
+  - Access Key: `secrets.R2_API_AK`
+  - Secret Key: `secrets.R2_API_SECRET`
+  - Bucket: `7tv-extension`
+
+## Push job (`push`)
+
+- Upload zip file (not crx) to chrome web store (cws) with npm package `chrome-webstore-upload-cli`
+  - Extension id: `ammjkodgmmoknidbanneddgankgfejfh`
+  - Client id, client secret, refresh token in `secrets.CWS`
+- Sign XPI file with action `kewisch/action-web-ext@v1`
+  - API key: `secrets.AMO_API_KEY`
+  - API secret: `secrets.AMO_API_SECRET`
+  - upload signed XPI as artifact `installable`
+- Update Github release

CHANGELOG-nightly.md

@@ -3,6 +3,7 @@
 **The changes listed here are not assigned to an official release**.
 
 -   Reinstated animated avatars
+-   Fixed extension not working on twitch for some users (React 18 support)
 
 ### 3.0.16.1000
 

src/common/ReactHooks.ts

@@ -14,9 +14,8 @@ export function getRootVNode(): ReactExtended.ReactVNode | undefined {
 	const element = document.querySelector(REACT_ROOT_SELECTOR);
 	if (!element) return undefined;
 
-	const root = Reflect.get(element, "_reactRootContainer");
-
-	return root?._internalRoot?.current;
+	const root = Reflect.get(element, "_reactRootContainer") || Reflect.get(element, "__reactContainer$");
+	return root?._internalRoot?.current ?? root;
 }
 
 /**
@@ -106,7 +105,7 @@ export function findComponentChildren<T extends ReactExtended.AnyReactComponent>
  */
 export function getVNodeFromDOM(el: Node): ReactExtended.ReactVNode | undefined {
 	for (const k in el) {
-		if (k.startsWith("__reactInternalInstance$")) {
+		if (k.startsWith("__reactInternalInstance$") || k.startsWith("__reactFiber$")) {
 			return Reflect.get(el, k);
 		}
 	}

src/site/twitch.tv/modules/chat-input/ChatInputModule.vue

@@ -57,7 +57,7 @@ for (const hc of hookChecks) {
 			parentSelector: ".chat-input",
 			maxDepth: 20,
 			predicate: (n) => {
-				return n.props.setModifierTray && n.key === hc.key;
+				return n.props?.setModifierTray && n.key === hc.key;
 			},
 		},
 		{