在 Chrome 上更改具有 src="about:blank" 的 iframe 内容的 CSS

Question

我正在尝试使用此代码在 the Google Tasks page with the extension Tampermonkey 上应用新设计。

当我尝试 html{ display: none !important } 时，它什么都不显示，因为 html 标签不在 iframe 下。但是，我无法在 iframe[src="about:blank"] 元素下进行修改。我应该如何修改才能使其正常工作？

shot 1.: 不适用于 iframe[src="about:blank"]

内部

// ==UserScript==
// @name     test
// @match    https://mail.google.com/tasks/canvas
// @match    about:blank
// @grant    GM_addStyle
// ==/UserScript==

GM_addStyle ( `    
* {color: red !important}
` );

Answer 1

是的，使用 src="about:blank" 为 iframe 编写脚本可能会很棘手，因为普通的用户脚本机制无法正常工作。（目前，@match about:blank does not work，但在这里使用它并不是一个好主意，因为它会产生全局副作用。）

幸运的是，在 Chrome 上，具有 src="about:blank" 的 iframe 在 Tampermonkey 脚本运行时几乎总是有一个 documentElement，因此如果您是 只需添加CSS.

这是一个完整的工作脚本，它为第一个 iframe 设置样式：

// ==UserScript==
// @name    _Style iframe with src="about:blank"
// @match   https://mail.google.com/tasks/canvas
// @grant   none
// ==/UserScript==

//-- Adjust the following selector to match your page's particulars, if needed.
var targetFrame = document.querySelector ("iframe[src='about:blank']")
if (targetFrame) {
    addStyleToFrame (
        `* {color: red !important}`
        , targetFrame
    );
}

function addStyleToFrame (cssStr, frmNode) {
    var D               = frmNode.contentDocument;
    var newNode         = D.createElement ('style');
    newNode.textContent = cssStr;

    var targ    = D.getElementsByTagName ('head')[0] || D.body || D.documentElement;
    targ.appendChild (newNode);
}

如果 `<iframe>` 标签已 javascript 创建，或者其他延迟阻碍了上述...

使用 the iframeSelector parameter of waitForKeyElements 来解决这个问题。

诀窍是选择一个始终出现在完成的 iframe 中的节点，并将其传递给 waitForKeyElements。
节点应该是唯一的。
但对于以下示例，我使用 .goog-toolbar:first 作为快速的首次尝试。

这是完整的工作脚本:

// ==UserScript==
// @name     _Style iframe with src="about:blank"
// @match    https://mail.google.com/tasks/canvas
// @require  https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// @grant    GM.getValue
// ==/UserScript==
//- The @grant directives are needed to restore the proper sandbox.

const desiredStyles = `* {color: red !important;}`;

waitForKeyElements (
    ".goog-toolbar:first",
    addCSS_Style,
    false,
    "iframe[src='about:blank']"
);

function addCSS_Style (jNode) {
    var frmBody = jNode.closest ("body");
    //-- Optionally add a check here to avoid duplicate <style> nodes.
    frmBody.append (`<style>${desiredStyles}</style>`);
}

备注：

GM_addStyle()在这种情况下将不起作用，因此我们添加具有框架感知功能的样式。
Google 页面使用：多个嵌套的 iframe；复杂页面（重新）重整；和 HTML 差 "info scent"。简而言之，它们是邪恶的、不断变化的，而且编写脚本可能会很痛苦。所以，这个简单的例子会起作用，但这就是这个问题的范围。更复杂的场景，开新题，手头啤酒钱多

在 Chrome 上更改具有 src="about:blank" 的 iframe 内容的 CSS

Change CSS of the content of an iframe, that has src="about:blank", on Chrome

javascript

css

iframe

tampermonkey

如果 `<iframe>` 标签已 javascript 创建，或者其他延迟阻碍了上述...

在 Chrome 上更改具有 src="about:blank" 的 iframe 内容的 CSS

Change CSS of the content of an iframe, that has src="about:blank", on Chrome

javascript

css

iframe

tampermonkey

如果 <iframe> 标签已 javascript 创建，或者其他延迟阻碍了上述...

如果 `<iframe>` 标签已 javascript 创建，或者其他延迟阻碍了上述...