我有一个 Chrome 扩展，它将 CSS 和 Javascript 注入到页面中，虽然 CSS 总是被注入，但 Javascript 仅有时起作用，其他时候则不起作用。如果不工作，我认为它在它必须处理的东西存在之前就已经运行了。

Javascript 只是简单地移动一个div在另一个之上使用insertBefore但这并不总是发生，我认为这是因为它加载的时间。

我的清单目前是：

{
  ...
  "content_scripts": [{
    "matches": [ "*://example.com/*" ],
     "js": [
        "js/jquery-1.8.3.min.js", "js/myjavascript.js"
      ],
      "run_at": "document_end",
      "css": [
        "css/mycss.css"
      ]
  }]
} 

I have run_at set to document_end目前，因为它似乎运行得更流畅（当它确实工作时），所以我认为这就是需要改变的地方。

如果有人有任何建议，我们将不胜感激。

EDIT:添加了有关此问题答案的后续问题here https://stackoverflow.com/questions/14227689/waitforkeyelements-stop-a-script-firing-on-a-popup-in-chrome-extension，我觉得如果我将其添加到这个问题中可能对其他人有用。

如果代码并不总是有效，则表明元素是由页面的 javascript 创建/加载的。因此，您需要使用标准的 AJAX 感知技术来移动该 div。

这些技术包括：计时器、突变观察者、突变事件和拦截 AJAX XHR（如果适用）。这些都在其他 Stack Overflow 问题中讨论过，但是： 突变事件已被弃用/存在错误；拦截 XHR 会变得混乱，可能不适用于此处；突变观察者可能会变得复杂。

我建议下载并添加waitForKeyElements() 实用程序 https://gist.github.com/2625891到您的清单。

然后是移动它的代码<div>仅仅变成：

waitForKeyElements (
    "jQuery selector for div(s) you want to move",
    moveSelectDivs
);
function moveSelectDivs (jNode) {
    jNode.insertBefore ("APPROPRIATE JQUERY SELECTOR");
}

将清单设置为run at document_end http://developer.chrome.com/extensions/content_scripts.html#run_at。这相当于DOMContentLoaded-- 这是什么时候$(document).ready()火灾。默认run_at开火太晚并且在不可预测的时间开火。run_at document_start不会有任何好处，因为：计时器、突变观察者等都不会在DOMContentLoaded事件——无论如何，对于当前版本的 Chrome（其他浏览器没有相同的限制）。

替代方法，动作最快但网页速度较慢：

关于：

（页面正在加载，然后您可以看到 div 移动），这是我希望避免的事情。

之前做任何事情只有两种方法DOMContentLoaded在 Chrome 中工作：

1. 您可以设置mycss.css隐藏 div，直到您移动它。从性能角度来看，这可能是最具成本效益的方法。
2. 或者，您可以覆盖document.createElement()。这将尽快响应新元素（假设它是之前创建的）DOMContentLoaded），但它可能会显着减慢页面的整体速度。

设置要运行的内容脚本document_start，并且必须注入覆盖代码。所以，脚本看起来像：

addJS_Node (null, null, scriptMain);

function scriptMain () {
    var _orig_createElement = document.createElement;

    document.createElement  = function (tag) {
        var element = _orig_createElement.call (document, tag);

        var movingNode      = document.querySelector ("MOVING DIV SELECTOR");
        if (movingNode) {
            var target      = document.querySelector ("TARGET DIV SELECTOR");
            if (target) {
                target.parentNode.insertBefore (movingNode, target);

                document.createElement = _orig_createElement;
            }
        }

        return element;
    };
}

function addJS_Node (text, s_URL, funcToRun) {
    var D                                   = document;
    var scriptNode                          = D.createElement ('script');
    scriptNode.type                         = "text/javascript";
    if (text)       scriptNode.textContent  = text;
    if (s_URL)      scriptNode.src          = s_URL;
    if (funcToRun)  scriptNode.textContent  = '(' + funcToRun.toString() + ')()';

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

不要尝试为此使用 jQuery。