时间戳

首页 > 解决方案 > 如何从 chrome 扩展弹出窗口中删除网页元素？

google-chrome - 如何从 chrome 扩展弹出窗口中删除网页元素？

问题描述

我用于翻译的 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);
            });
        }
    });
});

谢谢

标签： google-chromegoogle-chrome-extension

解决方案

嘿那里，我搜索了如何修改 chrome 扩展，这个堆栈答案出现了，它似乎全面地描述了这个过程。

如何从 Chrome 网上应用店修改扩展程序？

至于你必须在源代码中修改什么，我会：

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

  • 或者，如果您可以找到在使用扩展时调用的方法，您可以添加类似

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

    element.parentNode.removeChild(element);

如果您知道要删除的元素的 ID，如果元素没有 ID，您可以尝试使用 Xpaths 进行类似的操作。

推荐阅读