How to show a dialog box when alarm is triggered?

[Piyush Khemka]

I am trying to make an extension which shows a dialog box to the user every hour. I am new to the world of Chrome extension development.So far, I have managed to create an alarm in chrome which gets triggered every sixty minutes.

Essentially what I want the extension to do is:

chrome.alarms.onAlarm.addListener(showpopup);

 where showpopup is a function that 
 contains the code to launch a beautiful
 dialog box written in jquery.

Manifest.json

{
"permissions": [ "notifications",
                 "tabs",
                 "alarms"
    ],

"background": {
    "scripts": ["alert.js"],
    "persistent": false
},

"content_scripts" : [
{
    "matches" : [ "http://*/*" ],
    "js": ["hello.js"],
    "css": [ "hello.css" ]
} ],

event page.js

function SwitchOn()
 {
     chrome.alarms.create('Alarm', {
     periodInMinutes: 1,
     delayInMinutes:  60
    });
 }

 function showpopup()
{
        alert("Inside function showpopup" + Date());

}
chrome.runtime.onInstalled.addListener(SwitchOn);

chrome.alarms.onAlarm.addListener(showpopup);

As you can see, I am currently throwing an ugly alert box every 60 minutes. Instead, I want to show a beautiful dialog box written in jquery. I intend to use a dialog box library like Bootbox (or maybe learn jquery and write it myself) which would most likely have a html, css and js files.

I tried to hack my way into creating a dialog box by creating a new window using chrome.window.create to create hello.html which links to the css and js file. However, the new window created is blank and doesn't show the render the css or the contents of the jquery file. Also, I don't want to create a new window. I want to create a dialog box in the same tab.

The hacky part of the code, which didn't work. 

chrome.windows.create({url: "hello.html", 
                   type:"popup",
                   focused: true, 
                  })

Could you suggest how to proceed?

[Erik Price]

You need to do it in hello.js, which is injected into the DOM of the page in every tab.

​

--
You received this message because you are subscribed to the Google Groups "Chromium-extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To post to this group, send email to chromium-...@chromium.org.
Visit this group at http://groups.google.com/a/chromium.org/group/chromium-extensions/.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/a3fb29a7-35e5-4c72-866c-1bdbda83d7d7%40chromium.org.
For more options, visit https://groups.google.com/a/chromium.org/d/optout.

[Piyush Khemka]

Thank you Erik.

I am new to Chrome development. Could you guide me how to trigger hello.js from the function showpopup?

function showpopup()

{

how do I trigger hello.js here?

}

--

Warm Regards

Piyush Khemka

[Erik Price]

In your event/background script (the one you named alerts.js), you need to listen for the click of the browser action button, and then send a message to your content script.

chrome.browserAction.onClicked(function(evt) {
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.tabs.sendMessage(tabs[0].id, {message: "show the popup"});
  });
});

In your content script (the one you named hello.js), you need to listen for this message, and then render whatever DOM changes you need in the current web page.

chrome.runtime.onMessage.addListener(function(req, sender, sendResp) {
  if (!sender.tab && req.message === "show the popup")
  {
    // update the DOM as needed to show your popup
  }
});

You can learn more about sending messages between event/background scripts and content scripts in the documentation: https://developer.chrome.com/extensions/messaging

​

[Piyush Khemka]

Ahh thank you so much Erik. This is what I was looking for