CODEWITHSUNDEEP
jquerygoogle-chromegoogle-chrome-extension
AndreiM
AndreiM

Reputation: 4598

How to trigger an event after a Chrome extension popup is displayed?

I am using jQuery with a Google Chrome extension popup. The pop-up page uses jQuery's 'document.ready' event to trigger a request to a web service. The problem is that the pop-up does not render until a response is received, which makes it seem unresponsive. Here's an outline of the page:

<html>
<head>
    <script type="text/javascript" src="./plugin.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            plugin.init();            
            plugin.getData();
        });        
    </script>
</head>
<body>...</body>
</html>

Is there an event I can use to trigger 'getData()' after Chrome renders the pop-up? I have tried monkeying with visibility events of divs within the body, but I haven't been able to trigger these events automatically other than by handling document.ready, which leads to the same behavior.

Upvotes: 2

Views: 2878

Answers (2)

Harmen
Harmen

Reputation: 22438

Maybe you could interact with the background page to fetch data asynchronously:

plugin.init()

chrome.extension.sendRequest({fetch: true}, function(response) {
  plugin.handleData(response);
});

Background:

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
  if (request.fetch){
    sendResponse(getData());
  }
});

Upvotes: 1

H&#229;vard
H&#229;vard

Reputation: 10080

Use setTimeout with no delay:

<html>
<head>
    <script type="text/javascript" src="./plugin.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            plugin.init();            
            setTimeout(plugin.getData);
        });        
    </script>
</head>
<body>...</body>
</html>

I've done this in an extension of my own, and it should do the trick.

Upvotes: 6

Related Questions