Google chrome extension 更快地加载chrome扩展弹出窗口

我的chrome扩展非常简单。单击弹出窗口后，将加载iframe。chrome扩展稍微慢一点。我点击图标，大约需要一秒半的时间来加载，我觉得这太慢了。我希望弹出窗口立即显示，但在..之后加载iframe。。或者也许有更快捷的方法。。。我正在创建的站点只有一个可见的文本框，所以理论上弹出窗口应该加载得很快，但我就是没有得到它

我的清单文件基本上是：

"browser_action": {
"default_icon": "icon128.png",
"default_popup": "main.html"
 },
   "background": {
    "page": "main.html"
  }

---

与任何异步调用一样，返回可能需要不确定的时间。一个干净的解决方案是只需在

main.html

中添加一个。在iframe加载之后，只需隐藏加载图标

它应该有助于用户体验，因为他们在单击图标后至少可以看到一些东西。

iframe阻止页面加载。 它的意思是，直到你的iframe（s）被完全加载，页面才被视为“完成”加载，Chrome扩展的延迟将不会显示

这种阻塞行为与iframes行为有关，而不是特定于Chrome的问题

为了解决这个问题，您应该加载不带iframe的页面，或者加载src属性为“about:blank”的iframe，并且在加载页面时添加/更新iframe src属性。 您还可以为iframe添加“onLoad”事件，以检测何时完成加载，从而触发加载程序/微调器隐藏

下面是React中的一个示例

const Main = () => {
    // state for the loader
    const [loading, setLoading] = useState(true);
    
    // state for the iframe source url
    const [iframeSrc, setIframeSrc] = useState(null);

    // first useEffect to see that page is fully loaded (componentDidMount in class syntax)
    useEffect(() => {
        setIframeSrc('https://www.your-slow-website.com');
    }, []);

    return (
        <div style={{width: '200px'}}>
            {loading && <div>LOADING...</div>}
            {iframeSrc && (
                <iframe onLoad={() => setLoading(false)} src={iframeSrc} style={{border: 'none', width: '100%'}} />
            )}
        </div>
    );
};

const Main=（）=>{
//装载机的状态
const[loading，setLoading]=useState（true）；
//iframe源url的状态
const[iframeSrc，setIframeSrc]=useState（null）；
//首先使用Effect查看页面已完全加载（类语法中的componentDidMount）
useffect（（）=>{
setIframeSrc（'https://www.your-slow-website.com');
}, []);
返回(
{正在加载和正在加载…}
{iframeSrc&&(
setLoading（false）}src={iframeSrc}style={{{border:'none'，width:'100%'}/>
)}
);
};