(TypeError): Cannot call method 'setBadgeText' of undefined

Question

I am implementing chrome extension using GWT.I have created the mapping in manifest.json & written the external java script file.In the background.js script,i have written function,in that set badge text i.e chrome.browserAction.setBadgeText(count);.I am passing the string value from gwt class using gwt+jsni method.The method in gwt code is

     public static native void passValue(String updateCount) /*-{
        $wnd.realTimeUpdateCount(updateCount);
    }-*/;    
The Methods in the java script :  
        function realTimeUpdateCount(count) {

      localStorage.unreadCount =  count;
      updateCount();
        }

       function updateCount() {
         if (!localStorage.hasOwnProperty('unreadCount')) {
          chrome.browserAction.setIcon({path:"images/favIcon.ico"});
          chrome.browserAction.setBadgeBackgroundColor({color:[190, 190, 190, 230]});
          chrome.browserAction.setBadgeText({text:"0"});
      } else {
           chrome.browserAction.setBadgeText(localStorage.unreadCount);
      }
       }

Here is my manifest.json file:-

{
  "name": "A browser action with no icon that makes the page red",
  "version": "1.0",
  "background": { "scripts": ["background.js"] },
  "permissions": [
     "tabs",
    "webNavigation", 
    "http://127.0.0.1:8888/Engile.html?gwt.codesvr=127.0.0.1"
  ],
  "web_accessible_resources": [
    "4D1B5509A17D34BAE8DB33C353725838.cache.html"
  ],  
  "browser_action": {
    "name": "Make this page red",
    "default_icon": "images/favIcon.ico"

  },
  "manifest_version": 2
}

Here is my background.js:-

function realTimeUpdateCount(count) {


    localStorage.unreadCount =  count;
    updateIcon();

}

if (chrome.runtime && chrome.runtime.onStartup) {
      chrome.runtime.onStartup.addListener(function() {
        console.log('Starting browser... updating icon.');
        updateIcon();
      });
    } else {

      chrome.windows.onCreated.addListener(function() {
        console.log('Window created... updating icon.');
        updateIcon();
      });
    }
function updateIcon() {



    if (!localStorage.hasOwnProperty('unreadCount')) {
        chrome.browserAction.setIcon({path:"images/favIcon.ico"});
        chrome.browserAction.setBadgeBackgroundColor({color:[190, 190, 190, 230]});
        chrome.browserAction.setBadgeText({text:"?"});
      } else {

        chrome.browserAction.setBadgeText({
          text: localStorage.unreadCount
        });
      }

    }



function goToApp() {
    chrome.browserAction.setBadgeBackgroundColor({color:[0, 200, 0, 100]});
      console.log('Going to app...');
      chrome.tabs.getAllInWindow(undefined, function(tabs) {

        console.log('Opening the application ...');
        chrome.tabs.create({url: 'http://server.ensarm.com:8082/EngileLive/Engile.html'});
      });
    }
chrome.browserAction.onClicked.addListener(goToApp);

When the browser is load the default 0 value is showing properly on Icon.The real time value is coming properly in updateCount() method. But control come on this chrome.browserAction.setBadgeText(count); line,it throws following exception :

com.google.gwt.core.client.JavaScriptException: (TypeError): Cannot call method 'setBadgeText' of undefined
    at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:248)
    at com.google.gwt.dev.shell.ModuleSpaceOOPHM.doInvoke(ModuleSpaceOOPHM.java:136)
    at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:561)
    at com.google.gwt.dev.shell.ModuleSpace.invokeNativeObject(ModuleSpace.java:269)
    at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeObject(JavaScriptHost.java:91)
    at com.google.gwt.core.client.impl.Impl.apply(Impl.java)
    at com.google.gwt.core.client.impl.Impl.entry0(Impl.java:213)
    at sun.reflect.GeneratedMethodAccessor30.invoke(Unknown Source)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
    at java.lang.reflect.Method.invoke(Method.java:597)
    at com.google.gwt.dev.shell.MethodAdaptor.invoke(MethodAdaptor.java:103)
    at com.google.gwt.dev.shell.MethodDispatch.invoke(MethodDispatch.java:71)
    at com.google.gwt.dev.shell.OophmSessionHandler.invoke(OophmSessionHandler.java:172)
    at com.google.gwt.dev.shell.BrowserChannelServer.reactToMessages(BrowserChannelServer.java:292)
    at com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:546)
    at com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:363)
    at java.lang.Thread.run(Thread.java:662) 

can anybody please help help on this?What is issue in code.

Eurythmics

Answer 1

If you are using chrome manifest version 3, its chrome.action (not chrome.browserAction) that must be used. Example :

chrome.action.setBadgeBackgroundColor({ color: '#00FF00' })
chrome.action.setBadgeText({
    tabId: activeTab.id,
    text: 'text'
});
            

Leath

Answer 2

You can only call the chrome.browserAction calls from your background script file (I was having the same problem)

See:

Chrome Extension: Change Address bar Button Background color at runtime

Larose

i'm calling the chrome.browserAction only on the background.html and i got the error the same way... – Constringe

Answer 3

Use

else {
           chrome.browserAction.setBadgeText({text:localStorage.unreadCount});
      }

instead of

else {
           chrome.browserAction.setBadgeText(localStorage.unreadCount);
      }

browserAction.setBadgeText takes json object as an input.

References

• chrome.browserAction.setBadgeText

Gadabout

Thank you,Sudarshan....I have already used both statement but still same exception is coming.Any other solution for this? – Eurythmics

Hi Sudarshan,above I have added two files manifest.json & background.js.In second file that is background.js function realTimeUpdateCount(count) is called from GWT code (code which is mentioned in above question) using json.The string value is passed to this function.Please guide on this. – Eurythmics

@dhananjay: It will be great if you post all your code by editing your question, it will be helpful for others also. – Gadabout

@dhananjay: I tried with your code, it is working correctly for me, is this the code you are using? – Gadabout

@dhananjay: Where is this code chrome.browserAction.setBadgeText(count); it is not in background.js , where is it? – Gadabout

Hi Sudarshan,in above background.js code,the count is assign to localStorage.unreadCount & localStorage.unreadCount given to chrome.browserAction.setBadgeText. – Eurythmics

let us continue this discussion in chat – Eurythmics

Answer 4

If mustapha's answer didn't work, try adding action attribute to the manifest file and try his answer again. For example,

{
    "manifest_version": 3,
    "name": "Background Worker",
    ......
    "action": {}, 
    ......
}

This will fix the issue.

Bedraggled