制作谷歌浏览器扩展程序，需要在加载头后运行脚本，因为头部有脚本，我需要它们运行。在DOM加载之前，因为里面有一个内联脚本，我需要击败。如何在头部加载之后但在DOM之前运行脚本？

我该怎么做？如何检测头部负载？

2010-06-05 fent

只需将它放在<body>标签的顶部。脚本在它们被放置的位置执行并阻止页面的其余部分，因此脚本顶部的脚本将意识到头部的所有内容，但没有意识到仍在加载的其余DOM。如果将它放在<body>的底部，它仍然会在DOMReady之前和页面加载事件之前加上，您应该能够访问脚本之前的DOM元素。如果您需要动态地将脚本附加到<head> - 这是不可能的，但您不能使用<head>内的脚本来完成此操作，因此您必须在<body>中执行此操作。

[编辑]我的回答一般可以应用于任何HTML文档，但Mohamed的回答更直接适用于Google扩展。我倾向于在他的回答之前提出他的答案，尽管两者都可能是正确的。

来源

2010-06-05 03:50:24 Andrew

这是扩展名。我无法访问网站本身，也无法编辑它的服务器端。如果我把它放在客户端，那么当我把它放在主体标签的顶部时，所有的脚本都会运行。 – fent 2010-06-10 03:04:07

当您在清单中注入内容脚本时，可以声明“run_at”参数为“document_start”，这些文件是在从css创建任何文件之后，但在构建任何其他DOM之前注入的，或者任何其他脚本是跑。更多的信息可以在here找到。

{ 
    "name": "My extension", 
    ... 
    "content_scripts": [ 
    { 
     "matches": ["http://www.google.com/*"], 
     "css": ["mystyles.css"], 
     "js": ["jquery.js", "myscript.js"], 
     "run_at": "document_start" 
    } 
    ], 
    ... 
}

*编辑后添加了一个例子。可以使用mutations event类型之一。

例

的manifest.json

{ 
    "name": "Content Script test", 
    "version": "0.1", 
    "description": "Content Script test", 
    "content_scripts": [ 
    { 
     "matches": ["http://*/*"], 
     "js": ["cs.js"], 
     "run_at": "document_start", 
     "all_frames": true 
    } 
    ] 
}

cs.js

document.addEventListener('DOMSubtreeModified', OnSubtreeModified, false); 

function OnSubtreeModified(event) { 
    console.log('Hello from extension!'); 
    document.removeEventListener('DOMSubtreeModified', OnSubtreeModified, false); 
}

的test.html（在网络上的某个地方）

<html> 
<head> 
    <script> 
    alert('Hello from Web!'); 
    </script> 
</head> 
<body> 
<h1>Hello World!</h1> 
</body> 
</html>

结果

您将两个警报，顺序为：

从网络

您好！
扩展你好！

来源

2010-06-05 03:56:09

这就是我正在使用的。但它在任何头部脚本运行之前运行。所以我试图找出如何检测这是什么时候。 – fent 2010-06-05 04:59:20

我编辑了我的答案并放置了一个例子。您可以利用run_at document_start来查看已添加或从dom中删除的内容。例如，您也可以使用另一个名为'DOMNodeInserted'的事件。 – 2010-06-05 15:32:34

呃，这可能不适合你的情况，因为页面的脚本已经运行了。因此，如果您有权访问该网页，请将您的JavaScript正确地放在 – 2010-06-05 15:41:55

如何在头部加载之后但在DOM之前运行脚本？

回答

的test.html（在网络上的某个地方）

相关问题