Answer to question 1
appAPI.db.async is asynchronous by design and hence you must use a callback to receive and use the values from the database. Additionally, it is not necessary to get the keys first and then their associated data; you can simply achieve your goal in one step using appAPI.db.async.getList.
Hence, using your example the code should be:
function crossriderMain($) {
appAPI.db.async.getList(function(arrayOfItems) {
for (var i=0; i<arrayOfItems.length; i++) {
$("ul#id").append("<li>" + arrayOfItems[i].value + "</li>");
}
});
}
Answer to question 2
To create a new tab that opens a resource page, use the appAPI.openURL method.
Hence, using your example the code should be:
appAPI.ready(function($) {
// When using a button, first set the icon!
appAPI.browserAction.setResourceIcon('images/icon.png');
appAPI.browserAction.onClick(function() {
appAPI.openURL({
resourcePath: "templates/history.html",
where: "tab",
});
});
});
[Disclaimer: I am a Crossrider employee]