I am aware that using the following will load in the text with a background over my Google Chrome extension and that it will truncate it to the first four letters.

chrome.browserAction.setBadgeBackgroundColor({ color: [255, 0, 0, 255] });
chrome.browserAction.setBadgeText ( { text: "loading" } );

But what I am want to do is allowing the part were it says loading to display the string result from a js script. I have check around the web and on StackOverflow for answers but I am yet to find anything relevant to what I am trying to do so I decided to ask the question here.

My manifest.json has the background,js loaded:

"background": {
  "scripts":["background.js"]
}

background.js -Then inside the background.js I have been trying to get it to work by loading the results from number.js but I am just not been able to make it work what so ever. I know the code is wrong here becuase I have messed it up but I will include it so you can get an understanding of what I am trying to do:

var imported = document.createElement('script');
imported.src = 'number.js';
document.head.appendChild(imported);

chrome.browserAction.setBadgeBackgroundColor({ color: [255, 0, 0, 255] });
chrome.browserAction.setBadgeText ( { text: "loading" } );

chrome.tabs.executeScript(null,
{code:"globalVarName = {'scriptOptions': {...}};" },
chrome.tabs.executeScript(null, {file: "number.js"},

number.js - And then what I am finally trying to load is the string from number.js:

var ip = "chromahills";

var xhr = new XMLHttpRequest();
xhr.open("GET", "/?server=" + ip, true);
xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
                data = JSON.parse(xhr.responseText);
                if (data.status) {
                        document.write(data.players.online);
                } else {
                        document.write("Fail");
                }
        }
}

xhr.send();

Question

So, to get straight to the point my questions are as follows:

• Is it possible to include a javascript string in the .setBadgeText?
• And if so what would be the most effective way of doing this?

I know this is quite a long block of text but I tried to include as much detail as possible so you can understand what I am trying to do and hopefully explain a better way to do what I am doing or even if it is actually possible.

Edit

I have removed my progress to avoid confusion now the issue is fixed. If you wish to view what I tried then click here -> / or read below for the solution

I am aware that using the following will load in the text with a background over my Google Chrome extension and that it will truncate it to the first four letters.

chrome.browserAction.setBadgeBackgroundColor({ color: [255, 0, 0, 255] });
chrome.browserAction.setBadgeText ( { text: "loading" } );

But what I am want to do is allowing the part were it says loading to display the string result from a js script. I have check around the web and on StackOverflow for answers but I am yet to find anything relevant to what I am trying to do so I decided to ask the question here.

My manifest.json has the background,js loaded:

"background": {
  "scripts":["background.js"]
}

background.js -Then inside the background.js I have been trying to get it to work by loading the results from number.js but I am just not been able to make it work what so ever. I know the code is wrong here becuase I have messed it up but I will include it so you can get an understanding of what I am trying to do:

var imported = document.createElement('script');
imported.src = 'number.js';
document.head.appendChild(imported);

chrome.browserAction.setBadgeBackgroundColor({ color: [255, 0, 0, 255] });
chrome.browserAction.setBadgeText ( { text: "loading" } );

chrome.tabs.executeScript(null,
{code:"globalVarName = {'scriptOptions': {...}};" },
chrome.tabs.executeScript(null, {file: "number.js"},

number.js - And then what I am finally trying to load is the string from number.js:

var ip = "chromahills";

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://minecraft-api./v1/get/?server=" + ip, true);
xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
                data = JSON.parse(xhr.responseText);
                if (data.status) {
                        document.write(data.players.online);
                } else {
                        document.write("Fail");
                }
        }
}

xhr.send();

Question

So, to get straight to the point my questions are as follows:

• Is it possible to include a javascript string in the .setBadgeText?
• And if so what would be the most effective way of doing this?

I know this is quite a long block of text but I tried to include as much detail as possible so you can understand what I am trying to do and hopefully explain a better way to do what I am doing or even if it is actually possible.

Edit

I have removed my progress to avoid confusion now the issue is fixed. If you wish to view what I tried then click here -> http://jsfiddle/lukexf/5d72Q/ or read below for the solution

• javascript
• jquery
• google-chrome
• google-chrome-extension
• google-chrome-devtools

Share Improve this question Follow edited Nov 21, 2021 at 20:36 brasofilo 26.1k1515 gold badges9494 silver badges186186 bronze badges asked May 26, 2014 at 11:54 Luke BrownLuke Brown 1,89222 gold badges2929 silver badges5050 bronze badges 9

• document.write is definitely wrong inside background.js ... but if your last code segment works, then the code segment of my answer below will work too. Of course you have to make sure that my code segment is wrapped in a function and that you call this function at the right time – devnull69 Commented May 27, 2014 at 7:59
• when you say it fails to work ... what do you get in your debug console? – devnull69 Commented May 27, 2014 at 8:15
• @devnull69 puu.sh/93fTu.png this is my code. I have tested this elsewhere in JS (with not using chrome parts) and it works fine. chrome.browserAction.setBadgeText ( { text: data.players.online } ); simple does not show up on the icon. Where as chrome.browserAction.setBadgeText ( { text: "test" } ); would obviously return test and a background. Even if the text fails to load then the background also does. There are no errors in the debug console either. – Luke Brown Commented May 27, 2014 at 11:25
• please add console.log(data.players.online) to the if part of the code and tell us exactly what the output is – devnull69 Commented May 27, 2014 at 11:36
• jsfiddle/lukexf/B78B9 I tried putting it in, but I'm not exactly sure where it should go as it is not logging anything. So I have put part of the project on jsfiddle. If you could just point out where it would go it would really help me. Thanks so much for your help so far :) – Luke Brown Commented May 27, 2014 at 12:06

 |  Show 4 more ments

2 Answers 2

Sorted by: Reset to default 4

Of course you can show a Javascript string in .setBadgeText, in fact it is the only thing you can show there :-)

So, I tried to understand the knack of your question ... and I think you want to somehow call number.js and then retrieve the output (the part that document.write writes to the screen).

But this would be the wrong approach.

Why not implement the following code directly in background.js (where you can easily access the badgeText)?

var ip = "chromahills";

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://minecraft-api./v1/get/?server=" + ip, true);
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
            data = JSON.parse(xhr.responseText);
            if (data.status) {
                    chrome.browserAction.setBadgeText ( { text: data.players.online.toString() } );
            } else {
                    chrome.browserAction.setBadgeText( { text: "Fail" });
            }
    }
}

xhr.send();

So I finally Fixed the issue. This was done via allowing the function to check the state of the IP and then display it under the correct conditions. Not using any of the xhr has helped because it now loads a much more efficient way. I have also learnt how to include images based on the status of the string.

I hope this helps other people as much as it did me.

var ip;
var timer;

function loadExtension () {
    if (!ip) {
        ip = 'chromahills';
    }

    checkState();
}

function checkState () {
    $.get('https://aron.li/mss/ping.php?ip=' + ip, function(data) {
        if (data.max != null) {
            chrome.browserAction.setBadgeBackgroundColor({ color: [122, 186, 122, 255] });
            chrome.browserAction.setIcon({path: 'up.png'});
            chrome.browserAction.setBadgeText({text: '' + data.online});
        } else {
            chrome.browserAction.setIcon({path: 'down.png'});
            chrome.browserAction.setBadgeText({text: 'OFF' });
            hrome.browserAction.setBadgeBackgroundColor({ color: [255, 0, 0, 255] });
        }
    });

    timer = setTimeout(checkState, 1000*60);
}

chrome.extension.onMessage.addListener(function (request, sender, sendResponse) {
    switch (true) {
        case request.restart:
        timer = null;
        loadExtension();
        break;
    }
    return true;
});

$(document).ready(function() {
    loadExtension();
});