I was trying to add :emoji: feature on instagram.com but.... | Smarter Dev | Page 1

grave thistle Feb 20, 2023, 4:32 PM

#

my code:-

// ==UserScript==
// @name         Instagram Direct :sob: to 😭
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Replaces :sob: with 😭 in Instagram Direct message textbox
// @author       Your Name
// @match        https://www.instagram.com/direct/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Watch for keypress events on the document object
    document.addEventListener('keydown', function(event) {
        // Check if the keypress was triggered in an input element
        if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA') {
            const messageInput = event.target;

            // Replace :sob: with 😭
            messageInput.value = messageInput.value.replace(/:sob:/g, '😭');
        }
    });
})();

when i type :sob: it doesnt do anything but when i type :sob:/" it gives 😭/
can someone pointout the error

obsidian escarp Feb 20, 2023, 6:11 PM

#

So when you add the /" to the text box the code detects the :sob: bit?

junior rampart Feb 21, 2023, 3:02 AM

#

grave thistle my code:- ``` // ==UserScript== // @name Instagram Direct :sob: to 😭 //...

the error is on the RegExp, try /(:sob:)/g enclosed on parenthesis. It will match the entire token group.
Not sure if it will work, long time I don't mess with RegExp.
You can try using the regexp js contructor too.
replace( new RegExp(":sob:") )

#

Errata:
There was nothing wrong with your code.

#

The "problem" is JS is waiting for a new input to update the value. If you type :sob: and then press any key, like shift for example, it will then update.

#

Here's my try:

const input = document.getElementById("field")

input.addEventListener("focus", ()=> {
    document.addEventListener("keydown", e => {
        const message_input = e.target
        message_input.value = message_input.value.replace(/:sob:/g, 'G');
    })
})

#

you don't need all those conditions btw, just check if the input is on focus with the "focus" listener :)

#

But, if you still want a fix for your condition, you can use an update function to check it every frame!


const input = document.getElementById("field")

// Check if the "input field" is on "focus
input.addEventListener("focus", ()=> {

    //Checks if some key is being pressed
    input.addEventListener("keydown", e => {
        const message_input = e.target

        //Defines an update function, it will run until the // element loses it focus
        const update = ()=> {
            //updates the value every frame
            message_input.value = message_input.value.replace(/:sob:/g, '😭');

            //calls itself
            requestAnimationFrame(update)
        }
        //calls the update function to finally start the // checking
        update()
    })
})

#

hope it helps you :)

#

I find really difficult to see with discord's text formatting, so here's an image:

grave thistle Feb 21, 2023, 1:31 PM

#

sorry for checking this late

#

i wa sbust with school

grave thistle Feb 21, 2023, 1:31 PM

#

junior rampart Here's my try: ```javascript const input = document.getElementById("field") inp...

the reason why i wasnt doing this was because using field with the event listener doesnt get the element

grave thistle Feb 21, 2023, 1:32 PM

#

junior rampart you don't need all those conditions btw, just check if the input is on focus wit...

i didnt try focus listener let me try it out

grave thistle Feb 21, 2023, 1:36 PM

#

junior rampart I find really difficult to see with discord's text formatting, so here's an imag...

as i thought

#

focus listener also doesnt find

#

the right input

#

            const messageValue = messageInput.value.replace(/:sob:/g, ':sob:');
            messageInput.value = messageValue;```

#

thhis does replace the text all fine

#

but

#

there are two tags that keep theh text value

#

the vaalue in this tag isnt changing

grave thistle Feb 21, 2023, 2:26 PM

#

// @name         Instagram Direct :sob: to 😭
// @namespace    http://tampermonkey.net/
// @version      2.0
// @description  Replaces :sob: with 😭 in Instagram Direct message textbox and adds a space on a new line
// @author       Your Name
// @match        https://www.instagram.com/direct/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Watch for input events on the document object and the targeted textarea
    const targetTextarea = document.evaluate('/html/body/div[2]/div/div/div/div[1]/div/div/div/div[1]/div[1]/div/div[2]/div/section/div/div/div/div/div[2]/div[2]/div/div[2]/div/div/div[2]/textarea', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;

    document.addEventListener('input', function(event) {
        // Check if the input event was triggered in an input element or any textarea
        if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA') {
            const messageInput = event.target;

            // Replace :sob: with 😭 in the value of the message input element
            const messageValue = messageInput.value.replace(/:sob:/g, '😭');
            messageInput.value = messageValue;

            // Dispatch a new input event to ensure any other event listeners are also notified
            messageInput.dispatchEvent(new Event('input', { bubbles: true }));
        }

        // Check if the input event was triggered in the targeted textarea
        if (event.target === targetTextarea) {
            const messageInput = event.target;

            // Replace :sob: with 😭 in the value of the targeted textarea
            const messageValue = messageInput.value.replace(/:sob:/g, '😭');
            messageInput.value = messageValue;

            // Dispatch a new input event to ensure any other event listeners are also notified
            messageInput.dispatchEvent(new Event('input', { bubbles: true }));
        }
    });
})();

#

this should workkk but it is not

junior rampart Feb 21, 2023, 2:34 PM

#

Okay so just to settle it down, you are injecting this JS on Instagram page right?

grave thistle Feb 21, 2023, 2:41 PM

#

junior rampart Okay so just to settle it down, you are injecting this JS on Instagram page righ...

yes

#

https://www.instagram.com/direct/*

junior rampart Feb 21, 2023, 2:41 PM

#

Let me try it then

grave thistle Feb 21, 2023, 2:42 PM

#

okay! 👍

junior rampart Feb 21, 2023, 2:43 PM

#

Oh, friendly advice:
Be cautious with js injections on Instagram.
Got banned many times, and also they are constantly changing the html, is not that reliable.

grave thistle Feb 21, 2023, 2:51 PM

#

junior rampart Oh, friendly advice: Be cautious with js injections on Instagram. Got banned man...

oh i didnt know it was bannable well i would still want to figure this code as in educational project

junior rampart Feb 21, 2023, 2:53 PM

#

const input = document.querySelector("textarea")

input.addEventListener("focus", ()=> {

    input.addEventListener("keydown", e => {
        const message_input = e.target

        const update = ()=> {
            message_input.value = message_input.value.replace(/:sob:/g, '😭');
            requestAnimationFrame(update)
        }
        update()
    })
})

#

inject this, and give it a try

#

It's banneble when you start to messing with requests. For example:
Do you know the "followers" box? That you need to keep scrolling to load in desktop?

#

Every scroll is a req, so its bannable

grave thistle Feb 21, 2023, 2:54 PM

#

junior rampart It's banneble when you start to messing with requests. For example: Do you know ...

yes oh i see i see

#

so unfollow bot should also be

junior rampart Feb 21, 2023, 2:55 PM

#

probably yes

grave thistle Feb 21, 2023, 2:56 PM

#

nope nothing

junior rampart Feb 21, 2023, 2:57 PM

#

what browser are you using?

grave thistle Feb 21, 2023, 2:57 PM

#

chrome latest Version 110.0.5481.104 (Official Build) (64-bit)

junior rampart Feb 21, 2023, 2:58 PM

#

let try it

#

wait just to clarify, because I just did it.
I've copied the text from discord and it came with the " ``` "

#

did you cleaned those?

grave thistle Feb 21, 2023, 3:05 PM

#

junior rampart did you cleaned those?

lmao certainly did

#

i tried a lot of other methods

#

but idk why

#

i cant change that particular tag

junior rampart Feb 21, 2023, 3:06 PM

#

wait, which tag?

#

Maybe I've understood it wrong. You want to change the given text to the emoji, or change some inner HTML tag?

grave thistle Feb 21, 2023, 3:07 PM

#

junior rampart Maybe I've understood it wrong. You want to change the given text to the emoji, ...

so basically there are two event listeners

#

one is our input

formal gullBOT Feb 21, 2023, 3:07 PM

#

@junior rampart

File Attachments Not Allowed

For safety reasons we do not allow file and video attachments.

Code Formatting

You can share your code using triple backticks like this:
```
YOUR CODE
```

Large Portions of Code

For longer scripts use Hastebin or GitHub Gists and share the link here

Ignored these files

2023-02-21_12-03-03_-_Trim.mkv

junior rampart Feb 21, 2023, 3:08 PM

#

grave thistle one is our input

yup

grave thistle Feb 21, 2023, 3:08 PM

#

whhch is getting replaced succesfully

#

in the code i sent you

#

and the other one iss

#

#

this one

#

this tag only updates if i manually kkeypress

#

so i noticed

#

my code replaces the emoji in input

#

but not in this textarea

#

final message gets send thru this only

junior rampart Feb 21, 2023, 3:10 PM

#

got it.
Just test it, it can be done, but it's tricky.

#

let me try

grave thistle Feb 21, 2023, 3:10 PM

#

okkay!

#

i been trying since two days lol i cant find an optimal solution to edit the value in this tag

junior rampart Feb 21, 2023, 3:11 PM

#

Okay, here's the thing:
try the code I've sent, buuuut, instead of just pressing enter, try to press the space bar before

grave thistle Feb 21, 2023, 3:13 PM

#

junior rampart Okay, here's the thing: try the code I've sent, buuuut, instead of just pressing...

hmmm

#

okay

junior rampart Feb 21, 2023, 3:13 PM

#

so, apparently the user needs to update the input after the change, so Instagram accepts it as a valid emoji

grave thistle Feb 21, 2023, 3:15 PM

#

junior rampart so, apparently the user needs to update the input after the change, so Instagram...

mhm isnt that what the first code doing

junior rampart Feb 21, 2023, 3:15 PM

#

actually, changing the html value vs. the user doing an keyboard action are different things.
For example, you can't play audio on a page you've never interacted with

#

usually for security reasons

#

sure, the text field is being updated, but only in your screen. Instagram is calling something somewhere to catch your input everytime you type

#I was trying to add :emoji: feature on instagram.com but....