Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

148
Visualizações
Sending HTMLVideoElement with chrome.runtime.sendMessage?

I'm pretty new to chrome extension development, I'm trying to make a better PiP (Picture in Picture) that doesn't have the maximum window size limitation.

I'm using this extension as reference, it basically behaves the same way as the default PiP works with video.requestPictureInPicture() which is what I don't want to use because extension popup has limited window size.

Instead, I have a index.html page with my extension that is loaded with window.open in background.js, this index page will have a video element that the HTMLVideoElement is passed to.

I've tried using chrome.runtime.sendMessage to send the video to the video.js that the index.html page loads, but this doesn't seem to work with a HTMLVideoElement? I read elsewhere that I should do JSON.stringify/JSON.parse for this object but that results in undefined.

Relevant manifest.json:

"background": {
    "service_worker": "background.js"
},
"content_scripts": [{
    "all_frames": true,
    "js": [ "content.js" ],
    "matches": [ "*://*/*" ],
    "run_at": "document_start"
}],
"web_accessible_resources": [{ 
    "resources": [ "index.html" ],
    "matches": [ "*://*/*" ]
}],
"manifest_version": 3,
"permissions": [ "storage", "scripting", "activeTab", "tabs" ],

content.js:

const videos = new Set();

window.addEventListener('canplay', e => {
    if(e.target.tagName === 'VIDEO') {
        videos.add(e.target);
        chrome.runtime.sendMessage({
            method: 'VIDEO_PLAYING'
        });
    }
}, true);

background.js:

await chrome.scripting.executeScript({
...

    var win = window.open(chrome.runtime.getURL('index.html'), 'PiP');
    win.focus();
    chrome.runtime.sendMessage({
        method: 'VIDEO',
        data: JSON.stringify(video)
    });

video.js: - this is the js that is just included on index.html

const onMessage = (request, sender) => {
    if(request.method === 'VIDEO') {
        var data = JSON.parse(request.data);
        console.log(video.src); //undefined
    }
};
chrome.runtime.onMessage.addListener(onMessage);

Maybe my method of going about doing this is entirely wrong. Are there other ways I can pass such objects to index.html like this?

about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda