製作谷歌瀏覽器擴展程序，需要在加載頭後運行腳本，因爲頭部有腳本，我需要它們運行。在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（在網絡上的某個地方）

相關問題