load chrome extension popup faster

Question

My chrome extension is very simple. After the popup is clicked an iframe is loaded. The chrome extension is slightly slow. I click the icon and it takes about a second and a half to load, and I feel like that is too slow. I'd like the popup to show instantly but have the iframe load after.. or perhaps there is an even quicker way... The site that I am iframing only has a textbox visible so in theory the popup should load pretty quickly but I'm just not getting it.

My manifest file basically is:

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

Answer 1

iframe blocks page load. what it means is that until your iframe(s) are fully loaded the page is not considered "finished" loading, there for Chrome extension is delaying and won't show.

this blocking behavior is related to iframes behavior and not a Chrome specific issue.

to over come this, you should load your page without the iframe or iframe with src attribute of 'about:blank' and when the page is loaded add/update the iframe src attribute. you can also add 'onLoad' event for the iframe to detect when it is finished loading to trigger your loader/spinner to hide.

here is an example in 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>
    );
};

Answer 2

As any async call, it may take an undeterminable amount of time to return. One clean solution would be to simply add a loading icon to your main.html. And after the iframe loads simply hide the loading icon.

It should help with the user experience as they'll be able to see at least something right after clicking the icon.