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

问题描述

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

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

清单

{
"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"
    }
 }

背景.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;
 }
 });

网页.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.

文档中有两个与网页通信的指南，分别对应两种方法:(externally_connectable) (带有内容脚本的自定义事件)

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)

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

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

1. 您需要在清单中专门将该网站列入白名单:

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

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

您需要获取永久扩展 ID.假设生成的 ID 是 abcdefghijklmnoabcdefhijklmnoabc

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

您的网页需要检查是否允许发送消息，然后使用预定义的 ID 发送:

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

您的分机需要收听外部消息，并且可能还要检查它们的来源:

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屋！