Question

我有第三方<script>利用MutationObserver来有条件地转换新添加的节点，并且由于显而易见的原因，需要将其包含在<head>块内。

如果我手动更新网站的来源并在<script>区块中包含第三方<head> - 一切正常，第三方<script>能够观察发生的所有突变。

但是，如果我使用Chrome扩展程序将第三方<script>注入网站的<head>块，则第三方<script>正在正确注入{ {1}}阻止网站，但相对而言，观察的突变非常少。

我对Chrome的评论＆gt; DevTools＆gt;网络小组显示，在属于<head>，{{1}的可变数量的请求后，第三方<script> 开始其“加载序列} <img>块内的{，<script>个元素。根据这一发现和更多研究 - 我能够确认Chrome 确实实际上默认是异步加载动态注入的<etc>标记。

您将在下面找到正在使用的相关<body>配置，以及我尝试注入第三方<script>的几种不同方法。

的manifest.json

manifest.json

head.content-script.js（尝试＃1）

<script>

head.content-script.js（尝试＃2）

"content_scripts": [{
    "matches": ["*://*/*"],
    "run_at": "document_start",
    "js": ["head.content-script.js"]
}]

head.content-script.js（尝试＃3）

document.write('<script async="false" src="//third-party-js.com/third-party.js"></script>');

head.content-script.js（尝试＃4）

var script = document.createElement('script');

script.async = false;
script.src = ('//third-party-js.com/third-party.js');

document.documentElement.appendChild(script);

还有其他人遇到过这个挑战吗？如果有更好的方法，我也愿意接受建议。我甚至愿意使用像mitmproxy之类的东西来动态修改响应。同样，我使用Chrome扩展程序的主要目标是最终获得流畅，可靠的页面加载 - 就好像我手动更新了网站的来源以包含第三方var script = document.createElement('script'), code = '(' + function() { document.write('<script src="//third-party-js.com/third-party.js"><\/scr' + 'ipt>'); } + ')()'; script.textContent = code; (document.head || document.documentElement).appendChild(script); script.remove();。

Answer 1

这是一个完美无缺的解决方案。积分归 wOxxOm ：

<强> head.content-的script.js

var url = '//third-party-js.com/third-party.js',
    urlEncoded = window.btoa(unescape(encodeURIComponent(url))),
    urlContent = localStorage.getItem(urlEncoded);

if (!urlContent) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);

    xhr.onload = function(e) {
        if ((xhr.readyState === 4) && (xhr.status === 200)) {
            localStorage.setItem(urlEncoded, xhr.responseText);
            window.location.reload(true);
        }
    };

    xhr.send(null);

    document.write('<script src="' + url + '"><\/script>');
} else {
    var script = document.createElement('script');
    script.textContent = urlContent;
    document.documentElement.append(script);
}

无法获取Chrome扩展程序内容脚本（document_start）以将同步第三方脚本注入块

1 个答案: