Trigger a dialog box in background script

Question

I have a chrome extension, where I periodically throw out an alert based on something.

The thing is that the default alert in Javascript is very ugly and I am trying to replace it with something more beautiful.

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.

Given this problem, how do I go about replacing the default alert with a more modern UI alert?

I was looking to replace the default alert with something like the SweetAlert.

My background.js currently looks like this:

 // on some alarm trigger
 function showpopup() {

        console.log(" in show popuup");
        console.log(Date());
        alert("ugly alert");
}

I also explored the option of injecting another js file from my background file.

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);
}

My script.js currently just calls an alert

alert("ugly alert now in script.js");

I am not able to figure out how to create my own dialog box in this javascript file script.js.

You can't inject code into the active page that way, but then you don't need to - checkout chrome.tabs.executeScript. Basically, you'll need a script injected in the page using that command from the background script or by specifying in the manifest "content_scripts" section. Then in that script you need a message listener chrome.runtime.onMessage.addListener. Then you'll use chrome.runtime.sendMessage in the background script to invoke the script in the active tab. That should be enough pointers to help. — Troy Wray, Nov 16 '17 at 13:04

Xan · Answer 1 · 2017-11-16T13:23:59.460

The problem is where your alert will be shown?

In an browser/OS dialog window? That's what alert() and friends do; as you see yourself, it's ugly and inflexible. In addition, it's technically challenging: it's an old mechanism that stops execution of JS code until closed, which can lead to API malfunctioning; Firefox WebExtensions specifically don't support calling this from the background page.

In the background page? By definition, it's invisible. You can add DOM nodes with an alert there, but you will not see it. Your problem isn't loading a library, your problem is where to display results.

(invisible, so no picture here!)

In the currently open tab? Hijacking an arbitrary page to show your own UI is hard, prone to break, would require draconian permissions with user warnings at install, won't always work. Wouldn't recommend.

In a fresh window? Possible (see chrome.windows API), but hardly "modern UI" at all (at least you can hide the URL bar).

In a browser action popup? Still not possible to trigger it to open in Chrome, so that's out.

The de-facto standard for informing the user about such things is the chrome.notifications API. It offers limited customization, but that's the "modern" approach considering that your extension has no UI surfaces already open at alert time.

score 2 · Accepted Answer · answered Nov 16 '17 at 13:05

2

You can insert your code into the tab content via

JS: chrome.tabs.executeScript()
CSS: chrome.tabs.insertCSS()

The second possibility would be to use a content script (content.js). But then you would have to use messaging to communicate between background.js and content.js.

answered Nov 16 '17 at 13:05

McSod

100
6

Thanks. It worked. I copied the JS code of sweetalert and triggered that script using executeScript. – Piyush Nov 16 '17 at 22:40

Trigger a dialog box in background script

2 Answers2