发送消息到后台脚本

Question

我想实现一个屏幕共享web应用程序，它将使用desktopCapture Chrome API在网页上显示用户屏幕。我创建了Chrome扩展，并在后台运行了一个事件监听器。我的问题是，当我尝试从网页发送消息到扩展（获取userMedia id）我没有收到任何扩展端。我也试图将getUserMedia id返回到网页以显示提要。我附上了我所拥有的。由于

清单

{ 
"name": "Class Mate Manifest", 
"description": "Extension that allows for user to share their screen", 
"version": "1", 
"manifest_version": 2, 

"background": { 
    "scripts": ["background.js"] 
}, 
"permissions": [ 
"desktopCapture", 
"tabs" 
], 
"browser_action": { 
    "default_icon": "icon.png", 
"default_popup": "index.html" 
    } 
} 

background.js

chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) { 
console.log(request.greeting); 
if(request.greeting == yes){ 
chrome.desktopCapture.chooseDesktopMedia(["screen", "window"], sendResponse); 
return true; 
} 
}); 

webpage.js

function gotStream(stream) { 
console.log("Received local stream"); 
var video = document.querySelector("video"); 
video.src = URL.createObjectURL(stream); 
localstream = stream; 
// stream.onended = function() { console.log("Ended"); }; 
} 

function getUserMediaError() { 
console.log("getUserMedia() failed."); 
} 

function onAccessApproved(id) { 
console.log(id); 
if (!id) { 
console.log("Access rejected."); 
return; 
} 


navigator.webkitGetUserMedia({ 
    audio:false, 
    video: { mandatory: { chromeMediaSource: "desktop", chromeMediaSourceId: id } } 
}, gotStream, getUserMediaError); 

} 


chrome.runtime.sendMessage({greeting: "yes"}, onAccessApproved); 

Answer 1

你不能简单地用短信以同样的方式，你会用它的内容脚本一个任意网页的代码。

有文档中提供了两个指南与网页，对应于两种方法通信：(externally_connectable)(custom events with a content script)

假设你希望允许http://example.com将消息发送到您的分机。

1. 你需要明确列入白名单，该网站在清单：

   "externally_connectable" : { 
       matches: [ "http://example.com" ] 
       }, 
   

2. 你需要obtain a permanent extension ID。假设产生的ID是abcdefghijklmnoabcdefhijklmnoabc

3. 你网页需要检查它允许发送消息，然后使用预先定义的ID发送：

   // Website code 
   // This will only be true if some extension allowed the page to connect 
   if(chrome && chrome.runtime && chrome.runtime.sendMessage) { 
       chrome.runtime.sendMessage(
       "abcdefghijklmnoabcdefhijklmnoabc", 
       {greeting: "yes"}, 
       onAccessApproved 
   ); 
   } 
   

4. 你扩展需要听到外部消息并且可能还检查其来源：

   // Extension's background code 
   chrome.runtime.onMessageExternal.addListener(
       function(request, sender, sendResponse) { 
       if(!validate(request.sender)) // Check the URL with a custom function 
        return; 
       /* do work */ 
       } 
   );