How can I remove web page element from a chrome extension popup?

Question

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

Answer 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.