add: copy code add-on

[thakyZ]

I hate having to go into the inspect element to copy the code for a redeem in a notification, so I, made this.
If you need me to change anything, let me know I'll be happy to!

[SirStendec]

Hi, sorry for the delay on looking at PRs.

I'm a bit concerned that you're attaching a mutation observer to document.body here with those flags. Given how frequently the DOM changes on Twitch, that's a lot of processing overhead for something that is going to appear very infrequently. I effectively never get a notification with a redemption code in it so I can't really test this myself, but can this be refactored to have less processing?

[thakyZ]

Okay, I'll work on it, I unfortunately don't know what methods to use as the documentation for this code is basically non-existent, but maybe I didn't look correctly for a documentation website. But, yea, thank you for the input, I'll see to the changes being fixed.

What could help, is if you know of a way I can bind the execution of the DOM manipulation to the notifications dialog opening. I cannot seem to figure out what I would do for that.

[SirStendec]

Alright, so, I looked into notifications a little for you. I believe your code is looking for the window that opens when someone clicks the notification, and not for toasts, right?

There's a React class-based component that handles that, so you can use the site.fine module to find it and set up events. Specifically, you'll want to inject site.fine into your add-on's module, then define a FineWrapper for the notification manager, and finally register event handlers. You can keep your DOM mutation code for after the events fire, but this will make the events themselves much more manageable. The code would be something like:

// top of file
const MY_RAF = Symbol('my-unique-raf');

// in constructor()
this.inject('site.fine');
this.NotificationManager = this.fine.define(
    'notification-manager',
    n => n.readNotification && n.toggleCenter && n.deleteNotification
);

// in onEnable()
this.NotificationManager.on('mount', this.checkNotifications, this);
this.NotificationManager.on('update', this.checkNotifications, this);

// later
checkNotifications(inst) {
    const node = this.fine.getChildNode(inst);
    if (node && !node[MY_RAF])
        node[MY_RAF] = requestAnimationFrame(() => {
            node[MY_RAF] = null;

            // do something with node here
        });
}

That triggers whenever the user opens or closes the notification window, or even changes the page. In that example, node is a DOM node that contains the entire notification tree including the window and all the notifications within it so you can just adapt your existing dom modifications to work there.

[thakyZ]

Here is a little update, gotta wait for a new code redeem to be available for something I play/participate in, to make sure it works. But will be pushing what I have soon.