如何阻止Chrome扩展弹出页内链接在新标签页打开以实现画中画

没问题，咱们可以通过修改你的hello.html代码来搞定这个问题——核心就是拦截iframe里所有试图打开新标签的操作，强制它们在iframe内部跳转，这样就能保持弹出页一直打开，实现你想要的画中画效果啦。

修改后的完整Hello.html代码 #

<html>
<head>
    <style type="text/css">
        body {width:780px; height:580px; margin:0; padding:0;}
        iframe {width:100%; height:100%; border:none;}
    </style>
</head>
<body>
    <iframe src="https://www.bing.com/" id="MyFrame"></iframe>

    <script>
        const iframe = document.getElementById('MyFrame');
        
        // 等待iframe内的页面完全加载
        iframe.addEventListener('load', function() {
            const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
            
            // 1. 处理页面中已存在的所有链接
            const existingLinks = iframeDoc.querySelectorAll('a');
            existingLinks.forEach(link => {
                // 强制所有链接在当前iframe内打开，覆盖_blank属性
                link.target = '_self';
            });
            
            // 2. 监听动态加载的链接（比如Bing后续渲染的内容）
            const linkObserver = new MutationObserver(mutations => {
                mutations.forEach(mutation => {
                    mutation.addedNodes.forEach(node => {
                        // 如果新增节点是链接，直接修改target
                        if (node.tagName === 'A') {
                            node.target = '_self';
                        }
                        // 如果是包含链接的容器，遍历修改里面的所有链接
                        else if (node.querySelectorAll) {
                            node.querySelectorAll('a').forEach(link => {
                                link.target = '_self';
                            });
                        }
                    });
                });
            });
            
            // 监听iframe页面的所有DOM变化
            linkObserver.observe(iframeDoc.body, {
                childList: true,
                subtree: true
            });
            
            // 3. 拦截window.open调用（有些网站会用JS调用open打开新标签）
            iframe.contentWindow.open = function(targetUrl) {
                // 让iframe直接跳转到目标地址
                iframe.contentWindow.location.href = targetUrl;
                // 返回一个模拟的window对象，避免网站代码报错
                return { close: () => {} };
            };
        });
    </script>
</body>
</html>

关键修改说明 #

1. CSS优化：补全了宽高的单位（px），去掉了body的默认边距，让iframe完全充满弹出页，避免出现空白。
2. 静态链接处理：页面加载完成后，遍历所有已存在的<a>标签，把它们的target强制设置为_self，这样点击时不会打开新标签。
3. 动态链接监听：用MutationObserver监听iframe内的DOM变化，处理后续动态加载的链接（比如Bing搜索结果可能是异步渲染的），确保所有链接都被统一处理。
4. 拦截window.open：有些网站会用JavaScript的window.open()方法打开新标签，我们重写这个方法，让它直接在当前iframe内跳转目标地址，同时返回一个模拟的对象避免报错。

测试方法 #

把修改后的hello.html替换掉原文件，然后在Chrome扩展管理页面点击"重新加载"按钮，打开弹出页后点击Bing里的各类链接，应该都会在iframe内部跳转，弹出页不会关闭啦。

内容的提问来源于stack exchange，提问作者Ansh