将消息发送到后台脚本 [英] Sending message to background script

问题描述

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

清单

  {
name： Class Mate Manifest，
description：允许用户共享屏幕的扩展名，
version：1，
manifest_version：2，
 $ bbackground：{
scripts：[background.js] 
}，
权限：[
desktopCapture，
标签
]，
browser_action：{
default_icon：icon.png，
default_popup：index.html
 
 
  

background.js

  chrome.runtime.onMessage.addListener（
函数（request，sender，sendResponse）{
 console.log（request.greeting）; 
 if（request.greeting == yes）{
 chrome.desktopCapture.chooseDesktopMedia（[screen，window]，sendResponse）; 
 return true; 
} 
}）; 
  

webpage.js

 函数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。）; 
} 
 
函数onAccessApproved（id）{
 console.log（id）; 
 if（！id）{
 console.log（Access rejected。）; 
 return; 
 
 
 $ b navigator.webkitGetUserMedia（{
 audio：false，
 video：{mandatory：{chromeMediaSource：desktop，chromeMediaSourceId：id} } 
}，gotStream，getUserMediaError）; 
 
} 
 
 
 chrome.runtime.sendMessage（{greeting：yes}，onAccessApproved）; 
  

解决方案

它位于任意网页代码的内容脚本中。

文档中提供了两个用于与网页进行通信的指南，这两个指南对应于两种方法：（externally_connectable） （带有内容脚本的自定义事件）

假设您要允许 http://example.com 将消息发送到您的扩展程序。

1. 您需要在清单中明确将该网站列入白名单：
   
   

    externally_connectable：{
   匹配：[http://example.com] 
   }，
     




2. 你需要<一个href =https://stackoverflow.com/questions/23873623/obtaining-chrome-extension-id-for-development>获得一个永久的扩展ID 。假设结果ID为 abcdefghijklmnoabcdefhijklmnoabc




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

     //网站代码
    //只有当某个扩展允许页面连接
    if（chrome& chrome.runtime&& chrome.runtime.sendMessage）{
    chrome.runtime.sendMessage（
   abcdefghijklmnoabcdefhijklmnoabc，
    {greeting：yes}，
    onAccessApproved 
   ）; 
    
     




4. 您的扩展程序需要侦听 消息，并可能检查其来源：
   
   

     //扩展的后台代码
    chrome .runtime.onMessageExternal.addListener（
   函数（request，sender，sendResponse）{
    if（！validate（request.sender））//使用自定义函数检查URL 
    return; 
    / *工作* / 
   } 
   ）; 
     

I am trying to implement a screen sharing web application that will use the desktopCapture Chrome API to display the users screen on a web page. I have created the chrome extension and have an event listener running in the background. My problem is when I try to send a message from the web page to the extension (to get the userMedia id) I am not receiving anything on the extension side. I am also trying to return the getUserMedia id back to the webpage to display the feed. I have attached what I have. Thanks

Manifest

{
"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);

解决方案

You cannot simply use messaging the same way you would use it in a content script from an arbitrary webpage's code.

There are two guides available in the documentation for communicating with webpages, which correspond to two approaches: (externally_connectable) (custom events with a content script)

Suppose you want to allow http://example.com to send a message to your extension.

1. You need to specifically whitelist that site in the manifest:

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

2. You need to obtain a permanent extension ID. Suppose the resulting ID is abcdefghijklmnoabcdefhijklmnoabc

3. Your webpage needs to check it's allowed to send a message, then send it using the pre-defined 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. Your extension needs to listen to external messages and probably also check their origin:

   // 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 */
     }
   );
   

这篇关于将消息发送到后台脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！