Description:
I’m developing a browser extension with the sole purpose of adjusting the playback speed of videos on Facebook pages. The extension functions flawlessly on other websites, however, I’ve hit a roadblock when trying to implement it specifically on Facebook.
Problem:
When I apply the extension to Facebook videos, the speed adjustment doesn’t seem to take effect.
My code:
popup.html :
<!DOCTYPE html>
<html>
<head>
<title>Fb Video Speed Control</title>
</head>
<body>
<h2>Facebook Video Speed Control</h2>
<form id="speedForm">
<label for="speed">Playback Speed:</label>
<input type="number" id="speed" step="0.1" min="0.1" max="5" value="1">
<button type="submit">Apply</button>
</form>
<script src="popup.js"></script>
</body>
</html>
manifest.json :
{
"manifest_version": 3,
"name": "Fb Video Speed Control",
"version": "1.0",
"description": "Adjust Facebook video playback speed",
"permissions": ["activeTab", "storage"],
"icons": {
"48": "icon.png"
},
"action": {
"default_popup": "popup.html",
"default_icon": {
"48": "icon.png"
}
},
"content_scripts": [
{
"matches": ["*://*.facebook.com/*"],
"js": ["content.js"]
}
]
}
popup.js:
document.addEventListener("DOMContentLoaded", function() {
console.log("Popup DOMContentLoaded event fired.");
const form = document.getElementById("speedForm");
const speedInput = document.getElementById("speed");
form.addEventListener("submit", function(event) {
event.preventDefault();
const selectedSpeed = parseFloat(speedInput.value);
console.log("Submit button clicked. Selected speed:", selectedSpeed);
chrome.storage.local.set({ playbackSpeed: selectedSpeed }, function() {
console.log("Playback speed set to:", selectedSpeed);
});
});
});
content.js :
console.log("Content script is running.");
chrome.storage.local.get(["playbackSpeed"], function(result) {
const playbackSpeed = result.playbackSpeed || 1;
console.log("Playback speed retrieved:", playbackSpeed);
const videos = document.getElementsByTagName("video");
for (let i = 0; i < videos.length; i++) {
videos[i].playbackRate = playbackSpeed;
console.log("Video", i, "playback speed set to:", playbackSpeed);
}
});
Request:
I’m reaching out to seek advice on how to troubleshoot and resolve this specific issue. If anyone has experience with creating browser extensions that interact with Facebook’s environment, your insights and guidance would be greatly appreciated.
Thank you for your help!