Блог

Я довольно новичок в разработке расширений Chrome, я пытаюсь сделать лучший PiP (картинка в картинке), у которого нет ограничения на максимальный размер окна.

Я использую это расширение в качестве ссылки, оно в основном ведет себя так же, как и PiP по умолчанию, с video.requestPictureInPicture() которым я не хочу использовать, потому что всплывающее окно расширения имеет ограниченный размер окна.

Вместо этого у меня есть index.html страница с моим расширением, которая загружена с window.open in background.js , на этой индексной странице будет элемент видео, на который передается элемент HTMLVideoElement.

Я пробовал использовать chrome.runtime.sendMessage для отправки видео на video.js что в index.html страница загружается, но это, похоже, не работает с a HTMLVideoElement ? Я читал в другом месте, что я должен выполнить JSON.stringify/JSON.parse для этого объекта, но это приводит к неопределенному.

Соответствующий манифест.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: — это js, который только что включен в 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);
 

Может быть, мой метод делать это совершенно неверен. Есть ли другие способы, которыми я могу передать такие объекты index.html вот так?