向后台脚本发送消息

IT技术 javascript google-chrome web google-chrome-extension video-capture
2021-02-22 19:42:03

我正在尝试实现一个屏幕共享 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"
    }
 }

背景.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);
1个回答

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

文档中有两个用于与网页通信的指南，它们对应于两种方法：(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 */
  }
);
所以我在之前的评论中修正了我的错误。现在网页成功地向扩展程序发送了一条消息。扩展程序接收消息并询问用户他们希望捕获什么屏幕。然后 background.js 文件将正确的 id 发送到网页。一旦我的网页在 AccessAproved 上运行，它就无法加载视频流并运行 getUserMediaError 函数。我在控制台上打印出了错误，上面写着 NavigateUserMediaError。我不知道这个错误是什么意思或者我的代码有什么问题？
2021-04-19 19:42:03
@YumYumYum 我希望我现在澄清了。
2021-04-28 19:42:03
是的，你是对的。我能够使用您提到的外部可连接方法从我的网页发送消息。但是现在一旦我发送消息，扩展程序就会正确接收消息，但不会通过回调函数发回任何内容。所以我的 chrome 扩展程序应该发回一个 id 用于共享屏幕。但是在网页端，甚至没有运行回调方法。有什么想法吗？
2021-05-02 19:42:03
你是什​​么意思？1）第4点：这是你通常放在manifest.json>background.js>这里的代码吗？2）第3点：这是您放入的代码http://example.com/index.html还是https://example.com/index.html？
2021-05-03 19:42:03
我会就此提出一个新问题。
2021-05-15 19:42:03
其它你可能感兴趣的问题
上一篇如何从二维数组中删除重复项？ 下一篇如何在javascript中确定日期是否是周末