我想创建一个Firefox临时加载项,并在导航栏中弹出一个窗口,以更改在浏览器中播放视频的速度。 (基于本教程https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_second_WebExtension)
我创建了弹出图标和脚本来选择速度值(index.html,script.js)。然后另一个app.js文件根据所选值更改视频速度:
manifest.json
{
"manifest_version": 2,
"name": "Netflix_speed",
"version": "1.0",
"description": "Adds an extension button to change the speed of a video played on Netflix.",
"icons": {
"64": "icons/icon-64.png"
},
"permissions": [
"activeTab"
],
"content_scripts": [{
"matches": [ "*://*.netflix.com/*" ],
"js": [ "content_scripts/app.js" ]
}],
"browser_action": {
"browser_style": true,
"default_icon": "icons/icon-64.png",
"default_title": "Netflix_speed",
"default_popup": "popup/index.html"
}
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="popup-content">
<div class="number" id="0.75">0.75</div>
<div class="number" id="1">1</div>
<div class="number" id="1.25">1.25</div>
</div>
<script src="script.js" type="module"></script>
</body>
</html>
script.js
const listenForClicks = () => {
document.addEventListener("click", (e) => {
// console.log('log: ', e.target.textContent);
// console.log(e);
switch (e.target.textContent) {
case '0.75':
console.log(0.75);
return 0.75;
break;
case '1':
console.log(1);
return 1;
break;
case '1.25':
console.log(1.25);
return 1.25;
break;
default:
console.log("default");
return 1;
}
}
)};
listenForClicks();
export default listenForClicks
app.js
import listenForClicks from popup/script.js
let speed = listenForClicks();
console.log(speed);
console.log('app.js')
const vidSpeed = () => {
document.querySelectorAll('video').forEach(v=>v.playbackRate=speed);
}
当我在浏览器中运行index.html时,它将返回我想要的值。但是,如果我通过附加组件运行它,则不会有返回或错误。 我想我在弹出文件和内容脚本之间的导入/导出有问题,但是我无法确定它是什么。