如何从Chrome扩展程序弹出窗口中删除网页元素?

时间:2019-05-17 13:04:39

标签: google-chrome google-chrome-extension

我将chrome扩展名用于翻译:

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

但是它总是在页面底部显示不必要的元素:

www.deepl.com ### lmt_quotes_article

www.deepl.com ##。dl_footer

我想修改扩展名,以便这些元素不会出现。

是否有办法将其从扩展程序中删除,因此打开扩展程序时这些元素不会出现?

我不知道代码的确切相关部分是什么,但是您可以在此处查看代码:

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

谢谢

1 个答案:

答案 0 :(得分:1)

嘿,我搜索了如何修改chrome扩展名,然后出现了这个堆栈答案,似乎可以全面描述该过程。

How to modify an extension from the Chrome Web Store?


关于一旦拥有源代码,您必须对其进行修改,我可以:

  • 查找要删除的元素的添加位置,然后删除 那些代码行

  • 或者,如果您可以找到当 使用扩展名,您可以添加

    var element = document.getElementById(“ element-id”);

    element.parentNode.removeChild(element);

如果知道要删除的元素的ID,则如果元素没有ID,则可以尝试使用Xpaths类似的东西。