I have to reload chrome extension to show notification

Question

I am developing my first chrome extension. And I have implemented Signal R 2 to show chrome notifications. Issue is that if the extension is idol for some time it stop showing notifications and in meantime if I debug the background.js (by opening background page of extension) it starts showing the notifications.

Here is my signal R implementation

 [HttpGet]
    public void SendNotificationYealink(string mac, string ip, string model, string active_url, string active_user, string active_host, string local, string remote, string display_local, string display_remote, string call_id, string action)
    {
        var context = GlobalHost.ConnectionManager.GetHubContext<NotificationHub>();
        context.Clients.All.addNotificationToExtension("Arslan",  "Active_User =" + active_user + 
             ", Local =" + local + ", Remote =" + remote + ", Display_Local =" + display_local + ", Display_Remote =" + display_remote + ", Call Id=" + call_id);
    }

And My background.js

$(function () {

var connection = $.hubConnection();
connection.url = 'http://localhost:8089/signalr';
var notificationHubProxy = connection.createHubProxy('notificationHub');
notificationHubProxy.on('addNotificationToExtension', function (callFrom, phoneNumber) {

    var firstRun =
        {
            type: "basic",
            title: callFrom,
            message: phoneNumber,
            iconUrl: "icon.png"
        }
    chrome.notifications.create(firstRun);
});

connection.start().done(function () {
    console.log('Connection established.');
});
})

Answer 1

Evidently, the variables inside the closure are destroyed once it has been executed once, along with notificationHubProxy and its event listeners.

Remove the ($(function () { ... })() wrapper around the code, it serves zero purpose inside an extension's background page since it runs in its own isolated environment, so you don't have to hide the variables from anyone.

On the off-chance this is a method of ensuring the DOM of background page is initialized and you actually have DOM elements inside it, simply move your <script src="background.js"></script> to the end of background.html before a closing </body> tag.