Chrome api を使用したことはありませんが、問題は基本的な JavaScript のようです。
コールバックで #bar の innerHTML を設定する必要があります。
chrome.tabs.query({'active': true, 'windowId': chrome.windows.WINDOW_ID_CURRENT},
function(tabs){
document.getElementById("bar").innerHTML = tabs[0].url;
}
);
そうでない場合、提供したサンプルコードで何が起こるかを次に示します。
// 1. Create foo.
var foo = '';
// 2. Call the query function on chrome.tabs
chrome.tabs.query({'active': true, 'windowId': chrome.windows.WINDOW_ID_CURRENT},
function(tabs){
// 4. Set foo after query is done doing whatever.
foo = tabs[0].url;
}
);
// 3. Set the html of the element with id="bar" to what's in foo (which is empty right now)
document.getElementById("bar").innerHTML=foo;
編集: chrome.tabs.query は非同期呼び出しであると推測しているため、コールバックがあります。同期の場合は、私の答えを無視してください。