如何通过书签工具等为跨域iframe元素应用CSS规则？

同源策略会阻止主页面脚本直接访问跨域iframe的DOM，这就是你用书签工具操作frames[0].document时触发权限错误的原因。而浏览器开发者工具处于原生上下文，不受此限制，所以手动修改没问题。以下是两种一键简化流程的方案：

方法1：开发者工具代码片段（临时一键执行） #

适合不需要持久化的临时场景：

• 按F12打开开发者工具，切换到「Sources」（Chrome）或「调试器」（Firefox）标签页
• 找到「Snippets」面板，新建一个代码片段（命名比如AddIframeCSS）
• 粘贴以下代码：

// 确保当前开发者工具上下文已切换到目标iframe
document.head.insertAdjacentHTML('beforeend', `
<style>
.make-me-red {
    background: red !important;
    color: red !important;
}
</style>
`);
console.log("目标样式已添加");

• 保存后，每次需要时：
  1. 在开发者工具顶部的上下文选择器中，切换到对应的跨域iframe（比如jsfiddle的结果iframe）
  2. 右键点击该代码片段，选择「Run」即可完成样式添加

方法2：Tampermonkey油猴脚本（持久化一键/自动执行） #

适合需要频繁操作的场景，脚本可直接在iframe上下文运行，绕过同源限制：

1. 安装Tampermonkey浏览器扩展
2. 新建用户脚本，替换为以下内容：

// ==UserScript==
// @name         给跨域iframe添加指定样式
// @namespace    tampermonkey-iframe-css
// @version      0.1
// @description  一键为jsfiddle结果iframe的.make-me-red元素添加样式
// @match        https://fiddle.jshell.net/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const injectStyle = () => {
        const styleEl = document.createElement('style');
        styleEl.textContent = `
            .make-me-red {
                background: red !important;
                color: red !important;
            }
        `;
        document.head.appendChild(styleEl);
        alert("样式已成功注入");
    };

    // 可选：自动注入样式
    injectStyle();

    // 可选：添加页面一键触发按钮
    /*
    const triggerBtn = document.createElement('button');
    triggerBtn.textContent = "添加红色样式";
    triggerBtn.style.cssText = "position:fixed;top:10px;right:10px;z-index:9999;padding:8px;cursor:pointer;";
    triggerBtn.addEventListener('click', injectStyle);
    document.body.appendChild(triggerBtn);
    */
})();

3. 保存脚本后，当打开目标跨域iframe（比如jsfiddle的结果页面）时，脚本会自动执行注入样式；如果启用了按钮版本，点击页面右上角的按钮即可触发。

内容的提问来源于stack exchange，提问作者Ben Holness