本文介绍了更改播放速度的简单Javascript扩展不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个简单的播放速度设置程序,可用于任何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?
这篇关于更改播放速度的简单Javascript扩展不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!