Question

作为Chrome扩展程序的首发，当有人将他的YouTube视频全屏显示时，我试图改变我的功能。我已经提出了下面的代码，但它仍然没有触发警报消息。

的manifest.json

{
"name": "Ext",
"version": "0.1",
"manifest_version": 2,
"description": "Catching fullscreen.",
"icons": {"16": "icon_16.png"
        },
"background": {
    "scripts": ["background.js"]
},
"browser_action":{
    "default_title": "Ext",
    "default_icon": "icon_16.png"
},
"permissions": [
    "background",
    "tabs",
    "http://*/*",
    "https://*/*"
    ]
}

background.js

document.addEventListener('DOMContentLoaded', function() {
var link = document.getElementByClassName('ytp-fullscreen-button');

link.addEventListener('click', function() {
     alert("Fullscreen");
     });
});

除了回答问题如何将自定义监听器添加到视频全屏事件之外，我将非常感谢有关如何在此类应用中改进自己的一些提示。

Answer 1

阅读extensions architecture overview：扩展程序的后台页面与网页无关，因此后台页面脚本无法直接访问网页document或事件。

使用content script和fullscreenchange事件（目前，它位于供应商前缀下）：

addVendorEventListener(document, 'fullscreenchange', onFullscreenChange);

function onFullscreenChange(event) {
    console.log(event);
}

function addVendorEventListener(element, eventName, callback) {
    var vendorName = 'on' + eventName in element ? eventName
                   : 'onwebkit' + eventName in element ? 'webkit' + eventName
                   : 'onmoz' + eventName in element ? 'moz' + eventName
                   : null;
    if (vendorName)
        element.addEventListener(vendorName, callback);
}

的manifest.json：

"content_scripts": [{
    "matches": ["https://www.youtube.com/*"],
    "js": ["content.js"]
}],

在

1 个答案: