1

对于任何带有 HTML 标记的视频 (YouTube)，我都有一个简单的播放速度设置器。

当我单击应该将速度更改为 2.25 的 2.25 按钮时，没有任何反应。我没有收到错误消息。

但是当我打开浏览器控制台并输入“document.querySelector('video').playbackRate = 2.25”时，视频会改变它的速度。

怎么了？

播放速度.js

browser.tabs.executeScript(
{ code: `document.getElementById('speed225').onclick = function () { document.querySelector('video').playbackRate = 2.25; 
}` })

速度按钮.html

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <div id="popup-content">
        <div class="button" id="speed225">2.25</div>
    </div>
    <script src='playspeed.js'></script>
</body>

</html>

样式.css

html, body {
    width: 100px;
}

.button {
    margin: 3% auto;
    padding: 4px;
    text-align: center;
    font-size: 1em;
    cursor: pointer;
    background-color: lightgray;
}

.button:hover {
    background-color: rgb(196, 230, 196);
}

清单.json

{
    "manifest_version": 2,
    "name": "Video Playback Speed Controller (Menu Bar)",
    "version": "1.0",
    "description": "Adds buttons in the menu bar to change playback speed for HTML video tagged videos.",
    "icons": {
        "48": "icons/playback-icon-48.png"
    },
    "permissions": [
        "activeTab"
    ],
    "browser_action": {
        "default_icon": "icons/playback-icon-32.png",
        "default_title": "Change Video Speed",
        "default_popup": "speed-buttons.html"
    }
}
4

1 回答 1

0

该speed225按钮位于弹出窗口内，因此其侦听器不能位于 executeScript 内，后者将代码作为内容脚本注入网页内。

用这个：

document.getElementById('speed225').onclick = function () {
  browser.tabs.executeScript({
    code: "document.querySelector('video').playbackRate = 2.25;"
  });
};

另请参阅如何打开正确的 devtools 控制台以查看扩展脚本的输出？

于 2022-01-01T07:49:37.330 回答