Override JS function of website from injected script from extension

user_8884201 0
Viewed 1626

Hello folks I'm trying to develop an extension for my chrome browser to add emoticons to the chat of a website that i usually visit, so on that page yo need to pay 25 box if you want to purchase an emoticon for me its very expensive so I decided to create a extension to inject some emotes, the problem is I can't override his functions to insert my own emotes I have tried several times and didn't work I share you the original script and my injected script if someone can orient me I 'll be very helpfully, I have ruduced original script bucause it have hundreds of emotes so I just leave a few as reference.

Original Script:

function clsEmoticons() {
    this.Insert = Insert;
    this.Handle = Handle;

    function Insert(obj, txt) {
        var cursorPos = $('#' + obj).prop('selectionStart');
        var v = $('#' + obj).val();
        var textBefore = v.substring(0, cursorPos);
        var textAfter = v.substring(cursorPos, v.length);
        $('#' + obj).val(textBefore + txt + textAfter);
    }

    function Handle(v1, response, the_channel, isGuest) {
        if (the_channel != "e") {
            try {
                the_channel = ChatV2.appChannel;
                the_channel = the_channel.toLowerCase();
            } catch (e) {}
        }
        response = response.replaceAll3(":)", "<img class=\"chat_img smile\" src=\"https://cdn.website.com/img/clear.png\" border=\"0\" /> ");
        if (!isGuest) {

            response = response.replaceAll3("(WCV)", "<img class=\"chat_img vsemoji_WCV_000\" src=\"https://cdn.website.com/img/clear.png\" border=\"0\" />");
        }
        if (the_channel == "test") {
            response = response.replaceAll3("bounce", "<img class=\"chat_img bounce\" src=\"https://cdn.website.com/img/clear.png\" border=\"0\" />");
        }
        return response;
    }
}
var ChatEmoticons = new clsEmoticons();

Injected script:

https://pastebin.com/w2KtXAG7

google-chrome javascript
2 Answers

You can't override the functions defined by a webpage with content scripts injection because the content scripts run in their own environment.

Content scripts execute in a special environment called an isolated world. They have access to the DOM of the page they are injected into, but not to any JavaScript variables or functions created by the page. It looks to each content script as if there is no other JavaScript executing on the page it is running on. The same is true in reverse: JavaScript running on the page cannot call any functions or access any variables defined by content scripts.

user_63459580

There is a SO answer that should be helpful to you: Insert code into the page context using a content script

Content scripts don't have access to the JavaScript function or variables created in the page, but they do have access to the DOM. So we can try creating a script tag wrapping the function that we need to run in the context of the page and inject into the DOM through the content script.

Kindly try and let me know if you face any issues.

user_60167790
Related