從擴展注入腳本覆蓋網站的JS功能

Question

大家好我正在嘗試為我的Chrome瀏覽器開發一個擴展程序，將表情符號添加到我經常訪問的網站的聊天中，所以在那個頁面上你需要支付25個盒子，如果你想為我購買一個表情符號它非常昂貴所以我決定創建一個擴展來注入一些表情，問題是我無法覆蓋他的功能插入我自己的表情我已經嘗試了幾次但沒有工作我分享你原來的腳本和我注入的腳本，如果有人可以定向我，我會非常有幫助，因為它有數百種表情，所以我已經修改了原始劇本，所以我只留下一些作為參考。

原始劇本：

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();

注入腳本：

https://pastebin.com/w2KtXAG7

Answer 1

您無法使用內容腳本注入覆蓋網頁定義的功能，因為內容腳本在自己的環境中運行 。

內容腳本在稱為孤立世界的特殊環境中執行。 他們可以訪問注入頁面的DOM，但不能訪問頁面創建的任何JavaScript變量或函數。 它將每個內容腳本視為在其運行的頁面上沒有執行其他JavaScript。 反過來也是如此：頁面上運行的JavaScript無法調用任何函數或訪問內容腳本定義的任何變量。

Answer 2

有一個SO答案應該對您有所幫助： 使用內容腳本將代碼插入頁面上下文

內容腳本無權訪問頁面中創建的JavaScript函數或變量，但它們可以訪問DOM。 因此，我們可以嘗試創建一個script標記，包含我們需要在頁面上下文中運行的函數，並通過內容腳本注入DOM。

如果您遇到任何問題，請嘗試告訴我。