Chrome扩展打开新网站时iframe自动加载问题求助

1. 移除自动注入的内容脚本配置 #

你的manifest.json里配置了content_scripts，会自动在所有匹配页面注入contentscript.js，这就是打开新网站时iframe自动出现的核心原因。删除这部分配置：

修改后的manifest.json：

{
    "name": "Sample Extension",
    "action": {},
    "permissions": ["activeTab", "scripting","tabs","clipboardRead", "clipboardWrite"],
    "background": {
        "service_worker": "background.js"
    },
    "version": "1",
    "manifest_version": 3,
    "web_accessible_resources": [
        {
            "resources": [ "frame.html" ],
            "matches": ["<all_urls>"]
        }
    ]
}

2. 避免重复创建iframe #

修改contentscript.js，添加检查逻辑，确保页面中没有已存在的扩展iframe，防止多次点击图标时重复加载：

修改后的contentscript.js：

var extensionOrigin = 'chrome-extension://' + chrome.runtime.id;
// 检查是否已有扩展的iframe存在
const existingIframe = document.querySelector('iframe[src^="' + extensionOrigin + '"]');
if (!location.ancestorOrigins.contains(extensionOrigin) && !existingIframe) {
    var iframe = document.createElement('iframe');
    iframe.src = chrome.runtime.getURL('frame.html');
    iframe.style.cssText = 'position:fixed;top:25px ;left:25px;display:block;' +
                           'width:calc(100% - 50px);height:calc(100vh - 50px);z-index:9999; background: none; border: none; border-radius: 10px';
    document.body.appendChild(iframe);
}

3. 后台脚本逻辑保持不变 #

你的background.js逻辑正常，点击图标时会向当前活跃标签注入脚本，无需修改：

chrome.action.onClicked.addListener((tab) => {
    chrome.scripting.executeScript({
        files: ["contentscript.js"],
        target: {tabId: tab.id}
    })
});

效果说明 #

• 移除content_scripts后，只有点击扩展图标时才会触发脚本注入和iframe创建，彻底解决页面加载时自动出现的问题。
• 添加iframe存在检查后，多次点击图标不会重复生成多个iframe。

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