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

2022-03-02 00:00:00 google-chrome-extension javascript html firefox-addon playback-rate

我有一个简单的播放速度设置程序，可用于任何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);
}

清单.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"
    }
}

解决方案

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?

相关文章