Firefox跨域iframe视频滤镜脚本权限报错的解决与自动化方案

在Ubuntu 22.04 LTS的Firefox浏览器中，观看托管于platform.thinkific.com的视频教程时，因视频为浅色主题，手动添加filter: invert(90%)过于繁琐。编写的书签脚本因浏览器同源策略限制，出现Permission denied to access property "document" on cross-origin object错误，无法直接操作跨域iframe内的视频元素。

你编写的脚本如下：

var iframedoc = document.getElementById("iframe-ember5848");
var innerdoc = iframedoc.contentDocument || iframedoc.contentWindow.document;
var video=innerdoc.querySelector("#wistia_video video");
video.style.filter=="invert(90%)"?video.style.filter="":video.style.filter="invert(90%)";

可行解决方案 #

1. 使用Firefox用户样式表（userContent.css） #

用户样式表可针对特定域名元素自动应用样式，无需手动操作：

• 在Firefox地址栏输入about:config，确认风险提示后，将toolkit.legacyUserProfileCustomizations.stylesheets设置为true。
• 打开about:support，找到「配置文件文件夹」并点击「打开文件夹」。
• 在配置文件夹内新建chrome目录（若不存在），在其中创建userContent.css文件。
• 向文件中添加以下样式：

  @-moz-document domain("platform.thinkific.com") {
    #wistia_video video {
      filter: invert(90%) !important;
    }
  }
  

• 重启Firefox后，该域名下的视频会自动应用反转滤镜；如需切换，可搭配Stylus扩展给样式添加开关。

2. 使用Stylus浏览器扩展 #

Stylus支持管理自定义样式，且能快速切换开关，适配跨域iframe场景：

• 在Firefox扩展商店搜索安装Stylus。
• 打开目标视频页面，点击Stylus图标，选择「为platform.thinkific.com创建样式」。
• 在编辑器中输入：

  #wistia_video video {
    filter: invert(90%);
  }
  

• 保存后，点击Stylus图标即可一键开启/关闭颜色反转。

3. 编写简易Firefox扩展（进阶） #

若需脚本级的灵活控制，可编写轻量扩展获取跨域访问权限：

• 新建扩展文件夹，创建manifest.json：

  {
    "manifest_version": 3,
    "name": "视频颜色反转工具",
    "version": "1.0",
    "permissions": ["activeTab"],
    "content_scripts": [
      {
        "matches": ["*://*.your-course-site.com/*"], /* 替换为你访问的课程主站域名 */
        "all_frames": true,
        "js": ["content.js"]
      }
    ],
    "action": {
      "default_title": "切换视频颜色反转"
    }
  }
  

• 创建content.js文件：

  function toggleInvert() {
    const video = document.querySelector("#wistia_video video");
    if (video) {
      video.style.filter = video.style.filter === "invert(90%)" ? "" : "invert(90%)";
    }
  }
  
  browser.action.onClicked.addListener(tab => {
    browser.tabs.executeScript(tab.id, { code: "toggleInvert();" });
  });
  

• 打开Firefox的about:debugging，选择「此Firefox」，点击「临时加载附加组件」，选择扩展文件夹中的manifest.json即可使用。点击扩展图标即可切换视频反转状态。

内容的提问来源于stack exchange，提问作者Muhammad Hussain