0

I have a simple playback speed setter for any HTML tagged videos (YouTube).

I get this error when I click on the 2.25 button to try to set the video playback speed to 2.25: "Cannot set properties of null (setting 'playbackRate')".

But when I open the browser console and type "document.querySelector('video').playbackRate = 2.25", the video changes its speed fine.

Why doesn't my extension, which runs the same code, fail to execute? And what's the fix?

playspeed.js

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"
    }
}
James Grey
  • 17
  • 2
  • [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) – Andreas Dec 31 '21 at 10:41
  • Use chrome.tabs.executeScript in your onclick listener. Put the code that sets playbackRate inside its `code` or use a separate script and `file` parameter, see the [documentation](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/executeScript). – wOxxOm Dec 31 '21 at 10:55
  • In playspeed.js, I now have: browser.tabs.executeScript({ code: \`document.getElementById('speed225').onclick = function () { document.querySelector('video').playbackRate = 2.25; }\` }) I tested with Chrome too (using chrome.tabs.executeScript). But the extension still isn't working. What am I missing? @wOxxOm – James Grey Dec 31 '21 at 23:11

0 Answers0