Send Message To Background Page, Update The Html, And Then Show It In A Tab

I have a chrome extension where a user inputs some information and it generates a report. Now of course, this report will be different each time based on what the user has entered.

Solution 1:

You are making a huge conceptual mistake by trying to use the same page for the background and to display something. This can lead to very unpredictable behavior.

You are essentially trying to open a tab with background.html and somehow expect it to be "that same" background page. It doesn't work like that - you're opening a new instance of the same document. Think opening the same web form in two tabs - you don't expect them to mirror text entered into fields.

On top of that, a lot of mistakes are piled on in respect to popup pages' interaction with opening tabs.

So, the plan of action:

1. If you really need for a piece of code to execute in a (permanently invisible) background page, call it idiomatically background.js and switch to scripts-style background page definition:

   "background": {
     "scripts": ["background.js"]
   }
   

   Also, consider using Event pages.

2. Whatever you use for report-showing should not be called background for your sanity's sake. Rename it report.html / report.js.

3. In your popup code, your mistake #1 is timing. You open a page that ought to listen for your message, but do not wait for it to become ready to listen. You should use the callback of tabs.create if you want to make sure the page is actually open and ready.

   chrome.tabs.create({url: "report.html"}, function(tab) {
     // Okay, now it's ready, right? Right?..
     chrome.runtime.sendMessage(/*...*/);
   });
   

4. However, doing that won't solve the problem, since opening a new tab by default focuses it (which is something you want, presumably), which immediately forces the popup to close. There is nothing you can do to prevent it as soon as a tab is focused. But that means your message is not going to be sent: popup will be destroyed before it happens.

   So, don't rely on messaging. Presumably, you can store whatever data your report is based on in storage. So, set it first, then open the report page, where you read the data and build the report.

   // Popup
   chrome.storage.local.set({foo: bar}, function() {
     // Storage is updated, it's showtime!
     chrome.tabs.create({url: "report.html"});
     // And now, we die, inevitably. Goodbye, cruel world.
   });
   
   // Report
   chrome.storage.local.get("foo", function(data) {
     // Oh, what joy is to have data.foo in here!
   });