0

I'm developing an extension and creating a popup type window.

chrome.windows.create({  
        url: "../html/dialog.html",  
        width: 400,  
        height: 200,
        focused: true,
        type: "popup"
    }, function(){
        //callback
    });

In the callback, I want to change the content of the page, add text and images, using JQuery, so what I would normally do is:

$('#dialog_content').html("hello!");

Having a div in my dialog.html document:

<div id="dialog_content"></div>

But aparentally the callback is called before the page content is loaded, so $('#dialog_content') doesn't exist yet.

I tried to use 

$('#dialog_content').load(function () {
    $('#dialog_content').html("hello!");
});

but it doesn't work, the event is not called.

Is there any other way I can do it?

Thanks.

(ps: JQuery is included in background)

DMkitten
  • 139
  • 1
  • 9
  • call function on $(document).ready – Divyesh Kanzariya Sep 05 '16 at 17:41
  • I don't want to change anything in the webpage, just in my `dialog.html`, as soon as it is loaded, and with parameters that I have when creating the window. Referencing another js file inside `dialog.html`, I'm gonna have to store my parameters in localStorage and it doesn't feel really nice... – DMkitten Sep 05 '16 at 17:46
  • 1
    See [chrome extension - passing data from background to custom html page](https://stackoverflow.com/a/34086630). Of course, the new page should have its own js script referenced in html, with its own jQuery and all manipulation stuff. Your background page will only have to pass the data when asked. – wOxxOm Sep 05 '16 at 17:54
  • Awesome! Is there anyway I can send a function by message? – DMkitten Sep 05 '16 at 18:39
  • Nope, only plain objects may be passed: [Does chrome extension internally use JSON.stiringify to postMessage over to background page?](https://stackoverflow.com/a/38263829) But you can directly access the background page's function from that other page: [chrome.extension.getBackgroundPage() function example](https://stackoverflow.com/a/21147954) – wOxxOm Sep 05 '16 at 19:32

1 Answers1

1

You are doing it all wrong.The callback function in chrome.windows.create is used to do some tasks in background. It doesn't have access to DOM.DOM can only be accessed through content scripts.

To change the contents of the "dialog.html" attach jquery.js and custom script to 'dialog.html" as shown below.

<html lang="en">
  <head>

  </head>
  <body>

    <div id="dialog_content"></div>

    <script src="jquery.min.js"></script>    
    <script src="dialog.js"></script>
  </body>
</html>

Now in background.js , no need to include callback function in chrome.window.create , if you are not doing any api related tasks

chrome.windows.create({  
        url: "../html/dialog.html",  
        width: 400,  
        height: 200,
        focused: true,
        type: "popup"
    });

To update any DOM in page do it in dialog.js.

$(function () {
  //when page is loaded
   $('#dialog_content').html("hello!");
});

You can also execute a function defined in background.js.

var backgroundPage = chrome.extension.getBackgroundPage();

//to execute a function "performTask" defined in background.
backgroundPage.performTask();
yogesh kumar
  • 940
  • 6
  • 10
  • Correction: since an internal extension page dialog.html is opened, its scripts aren't content scripts, but just scripts. – wOxxOm Sep 06 '16 at 08:22