0

There is chrome extension I use for translations:

https://chrome.google.com/webstore/detail/deepl-translator/fjokdddhdjnpombkijbljbeemdmajgfj

But it always shows in the bottom of the page unnecessary elements:

www.deepl.com###lmt_quotes_article

www.deepl.com##.dl_footer

I want to modify the extension so these elements won't appear.

Is there a way to remove it from the extension so these elements won't appear when I open the extension?

I don't know what is exactly the relevant part of the code but you can see the code here:

background file:

'use strict';

function onClickHandler(info, tab) {

    if (info.menuItemId == "DeepL") {
        var widget = 'document.body.innerHTML += \'<div id="DeepLWidget" style="position:fixed; right:10px; top:0px; width:800px; height:430px; border:0; z-index:2147483647; box-shadow: -5px 11px 12px -2px #a9a2a2;"><div style="width:100%; height: 20px; background-color:#042d48; text-align:right; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none;user-select: none; font-family: Arial, Verdana, sans-serif;padding:0;"><div style="float:right; background:#605F61; display:block; height:100%; padding: 0 3px; margin:0;line-height:0px;text-align:center;"><span onclick="return closeDeepLWindow()" style="cursor: pointer;text-decoration:none;color:#fff; display:block; font-size:20px; font-weight:bold; margin-top:8px;">x</span></div></div><iframe style="background: white; height:97%" src="https://www.deepl.com/translator#en/de/{{%TEXT%}}" width="100%" frameborder="0" marginheight="0" marginwidth="0" width="100%" height="97%"></iframe></div>\';';
        var selectionText = encodeURI(info.selectionText);
        selectionText = selectionText.replace("'","\\'");
        widget = widget.replace("{{%TEXT%}}",selectionText);
        widget += 'var _ds = document.createElement("script"); var _is= document.createTextNode("function closeDeepLWindow(){var x = document.querySelector(\'#DeepLWidget\'); x.parentNode.removeChild(x);}"); _ds.appendChild(_is); document.body.appendChild(_ds);';
        chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
            var currentTab = tabs[0];
            if (currentTab) {
                chrome.tabs.executeScript(currentTab.id,{code : widget, runAt: 'document_end'},function (results) {
                    const lastErr = chrome.runtime.lastError;
                    console.log(lastErr);
                });
            }
        });
        chrome.storage.sync.set({'lastText': selectionText}, function() {
            console.log('Saved:' + selectionText);
        });
    }
};


chrome.contextMenus.onClicked.addListener(onClickHandler);

chrome.runtime.onInstalled.addListener(function () {

    chrome.contextMenus.create({
        id : "DeepL",
        title : "Translate using DeepL \"%s\"",
        contexts :["selection"]
    });
    chrome.declarativeContent.onPageChanged.removeRules(undefined, function () {
        chrome.declarativeContent.onPageChanged.addRules([{
            conditions: [
                new chrome.declarativeContent.PageStateMatcher({
                    pageUrl: {
                        hostContains: '.'
                    }
                })
            ],
            actions: [new chrome.declarativeContent.ShowPageAction()]
        }]);
    });
});


popup file:


'use strict';
$(document).ready(function () {
    chrome.tabs.executeScript( {
        code: "window.getSelection().toString();"
    }, function(selection) {
        var selectedText = selection[0];
        var url = 'http://www.deepl.com/';
        if(selectedText!=""){
            url = "https://www.deepl.com/translator#en/de/"+selectedText;
            $("#mainFrame").attr('src',url);
            chrome.storage.sync.set({'lastText': selectedText}, function() {
                console.log('Saved:' + selectedText);
            });
        }else{
            chrome.storage.sync.get(['lastText'], function(result) {
                if(result.lastText!=""){
                    url = "https://www.deepl.com/translator#en/de/"+result.lastText;
                }
                $("#mainFrame").attr('src',url);
            });
        }
    });
});

thanks

Ron
  • 11
  • 1
  • 1
    Possible duplicate of [How to modify an extension from the Chrome Web Store?](https://stackoverflow.com/questions/16680682/how-to-modify-an-extension-from-the-chrome-web-store) – Reinstate Monica Cellio May 17 '19 at 13:23
  • Why don't you file a bug report? By modifying that extension, you could not upgrade it – Nico Haase May 17 '19 at 13:27
  • You could probably use another Chrome extension to fix your problem. Have a look at Stylus, or maybe TamperMonkey. Stylus allows you to add custom CSS and TamperMonkey allows you to run custom Javascript. – Reinstate Monica Cellio May 17 '19 at 13:30

1 Answers1

1

Hey there, I searched for how to modify chrome extensions and this stack answer came up which seems to describe the process comprehensively.

How to modify an extension from the Chrome Web Store?

As for what you have to modify in the source code once you have it, I would either:

  • Find where the elements you want to remove are added and just remove those lines of code

  • Or alternatively if you can find a method that is called when the extension is used, you could add something like

    var element = document.getElementById("element-id");

    element.parentNode.removeChild(element);

If you know the id of the elements you want to remove, if the elements don't have an ID you could try something similar with Xpaths.

James m
  • 144
  • 12
  • FYI if you want to post a duplicate question link then that's a reason for closing, so it's not something that should be posted as an answer. I've added it to the question for you. – Reinstate Monica Cellio May 17 '19 at 13:23
  • I wasn't sure if it would fall under duplicate as there was an additional question of removing elements with the modified extension however I could be mistaken, unfortunately I'm quite new to the community. – James m May 17 '19 at 13:26
  • No that's cool, but a comment would be more relevant. I know you can't post them yet, but once you've got a few points under your belt then you'll be able to. Keep at it :) – Reinstate Monica Cellio May 17 '19 at 13:28
  • 1
    Will do, thank you very much for the hints, I really appreciate it :) – James m May 17 '19 at 13:30
  • Thanks for the replay, but the answer doesn't really answer what i asked. and the question is not a duplicate.i Know how to modify extensions. what i asked is about elements in the web page, elements that are not part of the extension..I can block it easily in ublock but don't know what code should i add so it won't appear in extension, hope i clarified my question, thanks :) – Ron May 17 '19 at 13:34
  • In that case, would you mind adding the xpaths of the elements to this comment and I'll show you what lines of code you can add to the extension so that the elements are automatically removed when the extension is used? Apologies for not getting the answer first time around. It may also be worth adding snippets of source code from the application you're modifying to identify the best place to add these lines of code. Thanks :) – James m May 17 '19 at 13:38
  • Thanks a lot for the help James. actually i don't know much about coding, if i knew i guess it was easy peasy for me, so I don't know exactly what is the xpaths but i put here the code: https://pastebin.com/XtKjACdH .. just need to know where in the code should i put the www.deepl.com###lmt_quotes_article www.deepl.com##.dl_footer elements so they won't appear when i click the extension button.. thanks :) – Ron May 17 '19 at 13:51
  • No Worries @Ron, If you can tell me the name of the chrome extension, I'll use it myself and find a method that works – James m May 17 '19 at 14:10
  • the extension name is: DeepL Translator and the link is: https://chrome.google.com/webstore/detail/deepl-translator/fjokdddhdjnpombkijbljbeemdmajgfj thanks – Ron May 17 '19 at 14:19