I'm currently developing a Chrome extension where I try to jump to a specific minute on Crunchyroll, depending on whether it's filler or cannon. Interestingly, when I manually inspect the 'Player0' element (the media player) and expand it via the developer tools, my code works as expected. However, without manually inspecting and expanding the element, an error occurs.
I'm curious to know the underlying reason for this behavior. Could someone tell me why inspecting the element makes my code work and otherwise it fails?
When doing it through the console, although all elements are loaded in doom, if you do not manually enter the inspect and extend element it does not work
chrome console:
document.getElementById('player0').currentTime = 200
mistake:
VM207:1 Uncaught TypeError: Cannot set properties of null (setting 'currentTime')
at <anonymous>:1:48
(anonymous) @ VM207:1
The element I'm looking for exists and is found by id="player0" in the html:
<video id="player0" playsinline="" src="blob:https://static.crunchyroll.com/e6cc3673-0c06-4d6f-a8eb-b67a66445bcc" style="display: flex; height: 100%; height: 100%; height: 100%; width: 100%;"></video>
this is my manifesto
{
"manifest_version": 3,
"name": "AnimeNoFiller - Crunchyroll",
"version": "1.0",
"description": "With AnimeNoFiller, you'll never have to wonder again whether an episode is canon or filler.",
"icons": {
"128": "./images/Icons/logo1.png"
},
"action": {
"default_popup": "popup/popup.html"
},
"permissions": [
"activeTab",
"scripting",
"storage"
],
"background": {
"service_worker": "background/service-worker.js",
"type": "module",
"matches": ["*://*.crunchyroll.com/*", "*://*.animeflv.net/*", "*://*.9animetv.to/*"]
},
"content_scripts": [
{
"js": ["content.js"],
"matches": ["*://*.crunchyroll.com/*", "*://*.animeflv.net/*", "*://*.9animetv.to/*"]
}
],
"web_accessible_resources": [
{
"resources": ["infoAnimes.json", "background/animeDataFunctions.js"],
"matches": ["<all_urls>"]
}
]
}
This is the error message when it doesn't expand (ignore the second issue I highlighted in red as it is a separate error and I included it by mistake).
The problem is most likely not the element itself, but the timing of your attempt to access it. Crunchyroll loads much of its interface dynamically (SPA), so when your script runs, the #player0 element doesn't yet exist in the DOM, and document.getElementById('player0') returns null .
By opening DevTools and inspecting the item, you introduce an additional delay that allows the player to finish loading, giving the impression that inspecting it "makes it work".
Instead of accessing the element immediately, wait for it to exist using a MutationObserver , a polling interval, or by executing the logic after the player has been created:
const waitForPlayer = setInterval(() => {
const player = document.getElementById('player0');
if (player) {
player.currentTime = 200;
clearInterval(waitForPlayer);
}
}, 500);
It's also worth checking if the video is inside an iframe or if the identifier changes dynamically between plays.