用于更改播放速度的简单 Javascript 扩展不起作用答案

【问题标题】：Simple Javascript extension to change playback speed not working用于更改播放速度的简单 Javascript 扩展不起作用
【发布时间】：2022-01-01 00:57:32
【问题描述】：

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

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

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

怎么了？

playspeed.js

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

speed-buttons.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>

style.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);
}

manifest.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"
    }
}

【问题讨论】：

控制台日志有错误吗？
不，我没有看到任何错误。

标签： javascript html google-chrome-extension firefox-addon playback-rate

【解决方案1】：

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

使用这个：

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

另见How to open the correct devtools console to see output from an extension script?

【讨论】：