chrome.browserAction.setBadgeText可以从脚本加载字符串吗?

时间:2014-05-26 11:54:02

标签: javascript jquery google-chrome google-chrome-extension google-chrome-devtools

我知道使用以下内容会加载带有Google Chrome扩展程序背景的文本,并将其截断为前四个字母。

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

但我想要做的是允许部分显示loading来显示js脚本的字符串结果。我在网上和StackOverflow上查了解答案,但我还没有发现任何与我想做的事情有关的事情,所以我决定在这里提问。

我的manifest.json有背景,js已加载:

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

background.js - 然后在background.js内部,我一直试图通过加载number.js的结果来使其工作,但我无法制作它如此有效。我知道这里的代码是错误的,因为我搞砸了但是我会把它包括在内以便你能够理解我想要做的事情:

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 - 然后我最终尝试加载的是来自number.js的字符串:

var ip = "chromahills.net";

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://minecraft-api.com/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();

问题

所以,为了直截了当,我的问题如下:

  • 是否可以在.setBadgeText
  • 中加入javascript字符串
  • 如果是这样,最有效的方法是什么?

我知道这是一个相当长的文本块,但我试图尽可能多地包含详细信息,以便您能够理解我想要做的事情,并希望能够解释一个更好的方法来做我正在做的事情,或者即使它是实际上可能。

提前致谢, 路加


修改

我已经删除了我的进度,以避免混乱现在问题得到解决。如果您想查看我尝试的内容,请点击此处 - > http://jsfiddle.net/lukexf/5d72Q/或阅读以下解决方案


解决方案,如何修复

var ip;
var timer;

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

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

非常感谢您帮助我,我设法通过查看其他人如何做到这一点来解决我的问题。我真的很感激你投入的努力,但最后我有它的工作:)

2 个答案:

答案 0 :(得分:4)

当然你可以在.setBadgeText中显示一个Javascript字符串,事实上它是你唯一可以在那里展示的东西: - )

所以,我试着理解你问题的诀窍......我想你想以某种方式调用 number.js然后检索输出(document.write写的部分到屏幕)。

但这是错误的做法。

为什么不直接在background.js中实现以下代码(您可以在其中轻松访问badgeText)?

var ip = "chromahills.net";

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://minecraft-api.com/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();

答案 1 :(得分:1)

所以我终于解决了这个问题。这是通过允许函数检查IP的状态然后在正确的条件下显示它来完成的。不使用任何xhr有帮助,因为它现在加载了一种更有效的方式。我还学习了如何根据字符串的状态包含图像。

我希望这对其他人有所帮助。

var ip;
var timer;

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

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