title: Trigger a dialog box in background script
body: <p>I have a chrome extension, where I periodically throw out an alert based on something.</p>
  
  <p>The thing is that the default alert in Javascript is very ugly and I am trying to replace it with something more beautiful.</p>
  
  <p>The problem is that currently the alert is triggered from the background script. Google doesn't allow us to include any external libraries in the background html.</p>
  
  <p>Given this problem, how do I go about replacing the default alert with a more modern UI alert?</p>
  
  <p>I was looking to replace the default alert with something like the <a href="https://sweetalert.js.org/" rel="nofollow noreferrer">SweetAlert</a>.</p>
  
  <p>My background.js currently looks like this:</p>
  
  <pre><code> // on some alarm trigger
   function showpopup() {
  
          console.log(" in show popuup");
          console.log(Date());
          alert("ugly alert");
  }
  </code></pre>
  
  <p>I also explored the option of injecting another js file from my background file. </p>
  
  <pre><code>function showpopup() {
          console.log(" in show popuup");
          console.log(Date());
          var s = document.createElement('script');
          // added "script.js" to web_accessible_resources in manifest.json
          s.src = chrome.extension.getURL('script.js');
          s.onload = function() {
              this.remove();
          };
          (document.head || document.documentElement).appendChild(s);
  }
  </code></pre>
  
  <p>My script.js currently just calls an alert</p>
  
  <pre><code>alert("ugly alert now in script.js");
  </code></pre>
  
  <p>I am not able to figure out how to create my own dialog box in this javascript file script.js. </p>