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?
All my code is below. You can copy it and test yourself.
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"
}
}
Your JavaScript file, playspeed.js, isn't executing in the content window. It's running in your popup HTML.
I'd recommend you upgrade to manifest V3 and use chrome.scripting. Then, try something like this:
const tabId = getTabId();
chrome.scripting.executeScript(
{
target: {tabId: tabId},
files: ['playspeed.js'],
},
() => { ... }
);
See also: https://developer.chrome.com/docs/extensions/reference/scripting/