mirror of
https://github.com/BetterSEQTA/BetterSEQTA-Plus.git
synced 2026-06-05 19:24:39 +00:00
feat: notifications open the message #10
This commit is contained in:
SethBurkart123
+150
-104
@@ -1,120 +1,163 @@
|
||||
// pageState.ts
|
||||
class ReactFiber {
|
||||
constructor(selector, options = {}) {
|
||||
this.selector = selector;
|
||||
this.debug = options.debug || false;
|
||||
this.nodes = [...document.querySelectorAll(selector)]; // Support multiple elements
|
||||
this.fibers = this.nodes.map(node => this.getFiberNode(node));
|
||||
this.components = this.fibers.map(fiber => this.getOwnerComponent(fiber));
|
||||
constructor(selector, options = {}) {
|
||||
this.selector = selector;
|
||||
this.debug = options.debug || false;
|
||||
this.nodes = [...document.querySelectorAll(selector)]; // Support multiple elements
|
||||
this.fibers = this.nodes.map(node => this.getFiberNode(node));
|
||||
this.components = this.fibers.map(fiber => this.getOwnerComponent(fiber));
|
||||
|
||||
if (this.debug) {
|
||||
console.log("📌 Selected Nodes:", this.nodes);
|
||||
console.log("🔍 Found Fibers:", this.fibers);
|
||||
console.log("🛠 Found Components:", this.components);
|
||||
}
|
||||
if (this.debug) {
|
||||
console.log("Selected Nodes:", this.nodes);
|
||||
console.log("🔍 Found Fibers:", this.fibers);
|
||||
console.log("🛠 Found Components:", this.components);
|
||||
}
|
||||
}
|
||||
|
||||
static find(selector, options = {}) {
|
||||
return new ReactFiber(selector, options);
|
||||
}
|
||||
static find(selector, options = {}) {
|
||||
return new ReactFiber(selector, options);
|
||||
}
|
||||
|
||||
getFiberNode(node) {
|
||||
if (!node) return null;
|
||||
const fiberKey = Object.getOwnPropertyNames(node).find(name =>
|
||||
name.startsWith('__reactFiber') || name.startsWith('__reactInternalInstance')
|
||||
);
|
||||
return fiberKey ? node[fiberKey] : null;
|
||||
}
|
||||
getFiberNode(node) {
|
||||
if (!node) return null;
|
||||
const fiberKey = Object.getOwnPropertyNames(node).find(name =>
|
||||
name.startsWith('__reactFiber') || name.startsWith('__reactInternalInstance')
|
||||
);
|
||||
return fiberKey ? node[fiberKey] : null;
|
||||
}
|
||||
|
||||
getOwnerComponent(fiberNode) {
|
||||
let current = fiberNode;
|
||||
while (current) {
|
||||
if (current.stateNode && (current.stateNode.setState || current.stateNode.forceUpdate)) {
|
||||
return current.stateNode;
|
||||
}
|
||||
current = current.return;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
getState(key) {
|
||||
if (!this.components.length) return null;
|
||||
const state = this.components[0]?.state || null;
|
||||
|
||||
if (key === undefined) {
|
||||
return state; // Return entire state
|
||||
} else if (typeof key === 'string') {
|
||||
return state?.[key]; // Return single key
|
||||
} else if (Array.isArray(key)) {
|
||||
// Return object with only specified keys
|
||||
const filteredState = {};
|
||||
for (const k of key) {
|
||||
if (state && Object.hasOwn(state, k)) { // Use Object.hasOwn for safety
|
||||
filteredState[k] = state[k];
|
||||
}
|
||||
}
|
||||
return filteredState;
|
||||
getOwnerComponent(fiberNode) {
|
||||
let current = fiberNode;
|
||||
while (current) {
|
||||
if (current.stateNode && (current.stateNode.setState || current.stateNode.forceUpdate)) {
|
||||
return current.stateNode;
|
||||
}
|
||||
return null; // Invalid key type
|
||||
current = current.return;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
setState(update) {
|
||||
this.components.forEach(component => {
|
||||
if (component?.setState) {
|
||||
if (typeof update === 'function') {
|
||||
// Functional update
|
||||
component.setState(prevState => {
|
||||
const newState = update(prevState);
|
||||
if (this.debug) console.log("✅ Updated State (Functional):", newState);
|
||||
return newState;
|
||||
});
|
||||
} else {
|
||||
// Object update (merge with existing state)
|
||||
component.setState(prevState => {
|
||||
const newState = { ...prevState, ...update }; // Merge here!
|
||||
if (this.debug) console.log("✅ Updated State (Object Merge):", newState);
|
||||
return newState;
|
||||
});
|
||||
}
|
||||
getState(key) {
|
||||
if (!this.components.length) return null;
|
||||
const state = this.components[0]?.state || null;
|
||||
|
||||
if (key === undefined) {
|
||||
return state;
|
||||
} else if (typeof key === 'string') {
|
||||
return state?.[key];
|
||||
} else if (Array.isArray(key)) {
|
||||
const filteredState = {};
|
||||
for (const k of key) {
|
||||
if (state && Object.hasOwn(state, k)) {
|
||||
filteredState[k] = state[k];
|
||||
}
|
||||
});
|
||||
return this;
|
||||
}
|
||||
return filteredState;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
getProp(propName) {
|
||||
if (!this.fibers.length) return null;
|
||||
return this.fibers[0]?.memoizedProps?.[propName];
|
||||
}
|
||||
|
||||
setProp(propName) {
|
||||
this.fibers.forEach(fiber => {
|
||||
if (fiber?.memoizedProps) {
|
||||
fiber.memoizedProps[propName] = value;
|
||||
setState(update) {
|
||||
this.components.forEach(component => {
|
||||
if (component?.setState) {
|
||||
if (typeof update === 'function') {
|
||||
// Functional update
|
||||
component.setState(prevState => {
|
||||
const newState = update(prevState);
|
||||
if (this.debug) console.log("✅ Updated State (Functional):", newState);
|
||||
return newState;
|
||||
});
|
||||
} else {
|
||||
// Object update (merge with existing state)
|
||||
component.setState(prevState => {
|
||||
const newState = {
|
||||
...prevState,
|
||||
...update
|
||||
};
|
||||
if (this.debug) console.log("✅ Updated State (Object Merge):", newState);
|
||||
return newState;
|
||||
});
|
||||
}
|
||||
});
|
||||
return this; // Enable chaining
|
||||
}
|
||||
});
|
||||
return this;
|
||||
}
|
||||
|
||||
getProp(propName) {
|
||||
if (!this.fibers.length) return null;
|
||||
|
||||
if (propName === undefined) {
|
||||
return this.fibers[0]?.memoizedProps;
|
||||
}
|
||||
|
||||
forceUpdate() {
|
||||
this.components.forEach(component => {
|
||||
if (component?.forceUpdate) {
|
||||
component.forceUpdate();
|
||||
if (this.debug) console.log("🔄 Forced React Re-render");
|
||||
}
|
||||
});
|
||||
return this; // Enable chaining
|
||||
}
|
||||
return this.fibers[0]?.memoizedProps?.[propName];
|
||||
}
|
||||
|
||||
setProp(propName) {
|
||||
this.fibers.forEach(fiber => {
|
||||
if (fiber?.memoizedProps) {
|
||||
fiber.memoizedProps[propName] = value;
|
||||
}
|
||||
});
|
||||
return this; // Enable chaining
|
||||
}
|
||||
|
||||
forceUpdate() {
|
||||
this.components.forEach(component => {
|
||||
if (component?.forceUpdate) {
|
||||
component.forceUpdate();
|
||||
if (this.debug) console.log("🔄 Forced React Re-render");
|
||||
}
|
||||
});
|
||||
return this; // Enable chaining
|
||||
}
|
||||
}
|
||||
|
||||
console.log("Window cat: ", window.cat);
|
||||
function makeSerializable(obj) {
|
||||
if (typeof obj !== 'object' || obj === null) {
|
||||
return obj;
|
||||
}
|
||||
|
||||
if (Array.isArray(obj)) {
|
||||
return obj.map(item => makeSerializable(item));
|
||||
}
|
||||
|
||||
const serializableObj = {};
|
||||
for (const key in obj) {
|
||||
if (Object.hasOwn(obj, key)) {
|
||||
let value = obj[key];
|
||||
|
||||
if (typeof value === 'function') {
|
||||
value = '[Function]';
|
||||
} else if (value instanceof HTMLElement) {
|
||||
value = {
|
||||
type: 'HTMLElement',
|
||||
id: value.id,
|
||||
tagName: value.tagName
|
||||
}; // Replace DOM node with ID/tag info
|
||||
} else if (typeof value === 'symbol') {
|
||||
value = value.toString();
|
||||
} else if (typeof value === 'object' && value !== null) {
|
||||
value = makeSerializable(value);
|
||||
}
|
||||
|
||||
serializableObj[key] = value;
|
||||
}
|
||||
}
|
||||
return serializableObj;
|
||||
}
|
||||
|
||||
// Listen for messages from the background script (via window.postMessage)
|
||||
window.addEventListener('message', (event) => {
|
||||
console.log(event)
|
||||
|
||||
if (event.data.type === "reactFiberRequest") {
|
||||
const { selector, action, payload, debug, messageId } = event.data;
|
||||
const fiberInstance = ReactFiber.find(selector, { debug });
|
||||
const {
|
||||
selector,
|
||||
action,
|
||||
payload,
|
||||
debug,
|
||||
messageId
|
||||
} = event.data;
|
||||
const fiberInstance = ReactFiber.find(selector, {
|
||||
debug
|
||||
});
|
||||
|
||||
let response;
|
||||
switch (action) {
|
||||
@@ -124,12 +167,12 @@ window.addEventListener('message', (event) => {
|
||||
case "setState":
|
||||
// Handle both function and object updates
|
||||
if (payload.updateFn) {
|
||||
const updateFn = eval(`(${payload.updateFn})`);
|
||||
fiberInstance.setState(updateFn);
|
||||
const updateFn = eval(`(${payload.updateFn})`);
|
||||
fiberInstance.setState(updateFn);
|
||||
} else {
|
||||
fiberInstance.setState(payload.updateObject);
|
||||
fiberInstance.setState(payload.updateObject);
|
||||
}
|
||||
response = {}; // Acknowledge
|
||||
response = {};
|
||||
break;
|
||||
|
||||
case "getProp":
|
||||
@@ -137,18 +180,21 @@ window.addEventListener('message', (event) => {
|
||||
break;
|
||||
case "setProp":
|
||||
fiberInstance.setProp(payload.propName, payload.value);
|
||||
response = {}; // Acknowledge
|
||||
response = {};
|
||||
break;
|
||||
case "forceUpdate":
|
||||
fiberInstance.forceUpdate();
|
||||
response = {}; // Acknowledge
|
||||
response = {};
|
||||
break;
|
||||
default:
|
||||
console.warn(`[pageState] Unknown action: ${action}`);
|
||||
response = null;
|
||||
}
|
||||
|
||||
// Send the response back to the background script using window.postMessage
|
||||
if (response !== null && typeof response === 'object') {
|
||||
response = makeSerializable(response);
|
||||
}
|
||||
|
||||
window.postMessage({
|
||||
type: "reactFiberResponse",
|
||||
response,
|
||||
|
||||
Reference in New Issue
Block a user