BatteryStatus API für Chrome-Erweiterungen funktioniert nicht

Question

Ich versuche, eine Erweiterung für Chrome-Browser zu erstellen, die den Akkustand des Systems anzeigen (und andere Dinge tun) mit der BatteryStatusAPI. Zuerst versuche ich nur Zeigen Sie den Akkustand mit einer einfachen Leinwand an, aber es scheint nicht zu funktionieren.

manifestieren:

{ 
    "manifest_version": 2, 

    "name": "Battery", 
    "description": "This extension shows the battery stats of the current device.", 
    "version": "1.0", 

    "browser_action": { 
     "default_icon": "battery_full.png", 
     "default_title": "Click Here!" 
    }, 

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

JavaScript:

var battery; 
navigator.getBattery() 
    .then(function (b) { 
     battery = b; 
    } 
); 

function drawIcon() { 
    var clockCanvas = document.createElement("canvas"); 
    clockCanvas.height = 19; 
    clockCanvas.width = 19; 

    var clockContext = clockCanvas.getContext("2d"); 
    clockContext.textAlign = "center"; 
    clockContext.textBaseline = "middle"; 
    clockContext.font = "9px Arial"; 
    clockContext.fillText(battery.level, 9, 10); 

    chrome.browserAction.setIcon({ 
     imageData: clockContext.getImageData(0, 0, 19, 19) 
    }); 
} 

drawIcon(); 

Was denken Sie, ist das Problem?

Answer 1

Sie sollten wissen für Navigator.getBattery().then(funcRef), funcRef ist eine Funktion aufgerufen werden, wenn die Batterie promise von navigator.getBattery zurückgegeben wird gelöst wird. Aufgrund von Asynchronität, wenn Sie drawIcon anrufen, getBattery() wurde möglicherweise nicht behoben, dann funcRef wird nicht ausgeführt, was bedeutet, battery ist undefined.

Sie sollten drawIcon Funktion innerhalb funcRef verschieben.

var battery; 
navigator.getBattery() 
    .then(function (b) { 
     battery = b; 
     drawIcon(); 
    } 
); 

function drawIcon() { 
    // Your logic here 
}