Chrome扩展操作Crunchyroll播放器仅检查元素时生效的原因与解决问询

问题分析 #

你遇到的两个核心问题：

1. 直接在主页面执行document.getElementById('player0').currentTime = 200会报错找不到元素，只有手动在开发者工具里展开iframe并在其上下文执行时才有效——这是因为player0元素不在主页面的DOM中，而是嵌套在跨域iframe里，主页面的JS受同源策略限制无法直接访问iframe内部的DOM。
2. 跨域iframe访问被阻止，这是浏览器同源策略的默认限制，主页面域名（https://www.crunchyroll.com）和iframe域名（https://static.crunchyroll.com）不同，直接访问会触发权限错误。

解决方案：利用Chrome扩展的Content Script注入到iframe #

Chrome扩展的Content Script可以突破同源策略的限制，直接注入到匹配的iframe页面中，从而操作内部的视频元素。具体步骤如下：

1. 修改扩展的manifest.json配置 #

确保Content Script能覆盖Crunchyroll的主域名和视频iframe的域名，同时开启all_frames选项允许注入到所有iframe：

{
  "manifest_version": 3,
  "name": "Crunchyroll Skip Filler",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["https://www.crunchyroll.com/*", "https://static.crunchyroll.com/*"],
      "js": ["content.js"],
      "all_frames": true
    }
  ]
}

2. 编写Content Script（content.js） #

在content.js中监听视频元素的加载，根据剧集类型（filler/cannon）设置对应的播放时间：

// 监听视频元素加载并执行跳转
function setupPlayerJump() {
  const player = document.getElementById('player0');
  if (player) {
    // 替换为你的剧集类型判断逻辑
    const isFiller = false; // 示例：当前为原作剧情
    const targetTime = isFiller ? 200 : 0; // 根据类型设置目标时间
    player.currentTime = targetTime;
    console.log(`已跳转到${targetTime}秒`);
  } else {
    // 元素未加载完成，延迟重试
    setTimeout(setupPlayerJump, 500);
  }
}

// 页面加载后启动逻辑
if (document.readyState === 'complete') {
  setupPlayerJump();
} else {
  window.addEventListener('load', setupPlayerJump);
}

关键说明 #

• all_frames: true是核心配置：让Content Script不仅注入到主页面，还能注入到所有嵌套的iframe中，包括视频所在的跨域iframe。
• 延迟重试逻辑：避免因视频元素未完全挂载到DOM导致的找不到元素错误。

内容的提问来源于stack exchange，提问作者ramiro figueroa