将数据从DOM传递到本机消息传递API

Pass data from DOM to native messaging API

本文关键字：本机 消息传递 API 数据 DOM      更新时间：2023-09-26

我正在研究一个chrome扩展，通过chrome的本地消息传递API将当前选项卡的URL发送到后台脚本。这将启动一个运行youtube-dl的外部脚本来提取视频url并将其传递给该平台上具有硬件加速的播放器。这是可行的，代码在这里:https://github.com/mad-ady/odroid.c2.video.helper.

我想改进一下:

  • 在DOM中每个视频元素后注入新的按钮
  • 按下按钮提取视频元素的src URL并通过消息传递API将其传递到后端进行播放

我的问题是"这是允许/可能的吗?"
当我在页面的作用域时，我如何调用在后台定义的函数?

是的，你可以那样做。

另外，如果你需要处理点击按钮只从你的扩展，你可以做到从content_script不注入脚本到页面(这是最安全的方式，因为你不会附加任何到页面的JS上下文)。

一步一步

在manifest.json中注册content_script和后台脚本:

...
"content_scripts": [
  {
    "matches": ["<all_urls>"],
    "js": ["content_script.js"]
  }
],
"background": {
  "scripts": ["background.js"]
},
...

在content_script.js中添加按钮到共享DOM，并在content_script JS上下文中为其添加事件侦听器:

...
// You need to modify it for screen with video you want and for support old flash videos too
var blocks=document.getElementsByTagName("video");
for(i=0;i<blocks.length;i++){
  registerButton(blocks[i]);
}
// Add button and process click to it
function registerButton(block)
{
  var video=block;
  var button=document.createElement("input");
  button.type='button';
  button.class='getVideo';
  button.value='Send Video To the player';
  button.addEventListener('click',function(){sendUrlToBg(video.src);});
  blocks[i].parentNode.parentNode.parentNode.append(button);
}
// Send URL to background script
function sendUrlToBg(url)
{
    chrome.runtime.sendMessage({"action":"openBrowser","url":url},function(r){
        // process response from background script if you need, hide button, for example
    });
}
...

在background.js处理你的URL，发送给嵌入的应用，例如:

...
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if("action" in request && request.action == 'openBrowser'){
        // Send message to embeded app
        // ...
        // Send response for content script if you need
        sendResponse({"action":"openBrowserAnswer","status":"OK"});
    }
  }
);
....

这一切!:)

阅读更多

  1. Chrome运行时sendMessage描述:https://developer.chrome.com/extensions/runtime method-sendMessage
  2. Chrome消息:https://developer.chrome.com/extensions/messaging
相关文章：