4

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

Rush Dead
  • 41
  • 3
  • "I can't afford to pay for the site's emoticons, so how do I hack the site to inject my own for free?" doesn't sound like a very ethical goal. – nnnnnn Nov 04 '17 at 06:12
  • 2
    I just for me and some friends, I don't want to sell or something, just for fun. – Rush Dead Nov 04 '17 at 06:14
  • Sure, and if you can't afford tickets to a concert it is fine to sneak into the theatre to see it for free "just for fun". – nnnnnn Nov 04 '17 at 06:38
  • I'm not sure I understand what you are trying to do, but if you want to override a method or a class, you need first to make sure you are doing this before the instance is instantiated. Second, if it is a method just override it with func.prototype.methodname=function(){}. if it is a class, search what is the namespace it is in and put your class instead. – ShacharW Nov 04 '17 at 06:39
  • I add a new try in the post and not works... – Rush Dead Nov 04 '17 at 06:50
  • The scripts that you have attached with the question. U tried them with the content script or background scripts? Also are every script that you have attached are the function that you have written to override the original function, or does it have the original function from the web page also? – Keerthi Kumar P Nov 04 '17 at 06:57
  • The first code block it is the original from website, the 3 next blocks are my own scripts to try to override the original function to insert more emoticons. – Rush Dead Nov 04 '17 at 07:01
  • I'll go to edit the post to put my own full script. – Rush Dead Nov 04 '17 at 07:10
  • Now the post is updated. – Rush Dead Nov 04 '17 at 07:17

2 Answers2

1

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.

shawon191
  • 1,945
  • 13
  • 28
  • there is an old extension to justin.tv that inject the same as I want to do streamburner, also on twitch.tv you an find an extension called betterttv so I think could be possible to inject these functions: https://github.com/streamburner/streamburner – Rush Dead Nov 04 '17 at 08:49
  • @RushDead You can inject code to manipulate DOM components, but you can't replace the javascript of a website. It may be possible to accomplish what you're trying to do with DOM manipulation (unless the site does server-side validation, which is highly likely). – shawon191 Nov 04 '17 at 09:41
1

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.

Keerthi Kumar P
  • 1,554
  • 9
  • 14