正在将消息发送到后台脚本

Sending message to background script

本文关键字：后台 脚本 消息      更新时间：2023-09-26

我正在尝试实现一个屏幕共享web应用程序，该应用程序将使用桌面捕获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);

您不能像在任意网页代码的内容脚本中使用消息一样简单地使用消息。

文档中有两个用于与网页通信的指南，它们对应于两种方法：（externally _connectable）（带有内容脚本的自定义事件）

假设您希望允许http://example.com向您的扩展发送消息。

  1. 您需要在清单:中明确列出该网站的白名单

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

  2. 您需要获得一个永久的扩展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 */
  }
);
相关文章：