3

我正在構建我的第一個Chrome擴展,它通過從網頁抓取URL創建鏈接播放列表。但是,我正在掛斷我的消息功能。我在播放列表對象中編寫了一個名爲'test'的測試函數,我只是試圖將內容腳本發回的消息(通過getPageInfo函數)分配給我的對象函數中的一個變量。但是,儘管我收到了一條消息,但字符串在返回語句和測試函數之間正在消失。這裏是我的後臺腳本:Chrome擴展功能將字符串返回爲未定義

//BACKGROUND.JS 

var Playlist = { 
index: 0, 
playlist: [], 
test: function(info) { 
    var message = "Get Song"; 
    var song = getPageInfo(message); 
    alert(song); //Shows undefined 
    } 
}; 

function getPageInfo(message) { 
var s; 
chrome.tabs.query({active:true, currentWindow:true}, function(tabs) { 
     chrome.tabs.sendMessage(tabs[0].id, {greeting: message}, function(response){ 
      console.log(response.farewell); 
      s = response.farewell; 
      alert(s); //Shows "We did it" 
     }); 
    }); 
alert(s) //Shows "We did it" 
return s; 
} 

chrome.contextMenus.create({ 
title: "Add to Playlist", 
contexts: ["image", "link", "selection"], 
onclick: Playlist.test 
}); 

這是我的內容腳本:

//CONTENT.JS 

chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) { 
    console.log(sender.tab ? 
     "from a content script:" + sender.tab.url : 
     "from the extension"); 
    if(request.greeting == "Get Song") 
     sendResponse({farewell: "We did it"}); //My message 
}); 

這是我的清單:

{ 
"manifest_version": 2, 

"name": "RedditDJ", 
"description": "This app hides jobs which the user has already clicked on.", 
"version": "1.0", 
"content_scripts": [ 
    { 
     "matches": ["http://www.reddit.com/*","https://www.reddit.com/*"], 
     "js": ["script/jquery-2.1.4.js", "script/content.js"] 
    } 
], 
"permissions": [ 
    "http://www.reddit.com/", 
    "https://www.reddit.com/", 
    "http://www.youtube.com/", 
    "https://www.youtube.com/", 
    "http://www.soundcloud.com/", 
    "https://www.soundcloud.com/", 
    "http://*/", 
    "https://*/", 
    "tabs", 
    "contextMenus", 
    "storage" 
], 
"browser_action": { 
    "default_icon": { 
     "19":"style/img/icon_19.png", 
     "38":"style/img/icon_38.png", 
     "128":"style/img/icon_128.png" 
    }, 
    "default_title": "Reddit DJ", 
    "default_popup": "popup.html" 
}, 
"background": { 
    "scripts": ["script/background.js"], 
    "persistent": true 
} 
} 

我已經把它在幾天的,但我無法弄清楚我做錯了什麼。有任何想法嗎?謝謝!

+0

這不是 「迷路」。所有chrome。* API都是異步的。您可能想要閱讀關於js中異步代碼的內容。可能的重複:[如何從異步調用返回響應?](http://stackoverflow.com/q/14220321) – wOxxOm

回答

0

你只是不能將異步函數轉換爲同步。您必須爲getPageInfo添加callback參數並將其用於返回值。

事情是這樣的:

function getPageInfo(message, callback) { 
    chrome.tabs.query({active:true, currentWindow:true}, function(tabs) { 
     chrome.tabs.sendMessage(tabs[0].id, {greeting: message}, function(response) { 
      console.log(response.farewell); 
      s = response.farewell; 
      callback(s); 
     }); 
    }); 
} 

甚至更​​好將使用承諾:

function getPageInfo(message) { 
    return new Promise(function(resolve, reject) { 
     chrome.tabs.query({active:true, currentWindow:true}, function(tabs) { 
      chrome.tabs.sendMessage(tabs[0].id, {greeting: message}, function(response) { 
       console.log(response.farewell); 
       s = response.farewell; 
       resolve(s); 
      }); 
     }); 
    }); 
} 


getPageInfo().then(function(value) { 
    alert(value); 
})