Chrome擴展，進樣HTML然後繼續加載頁面

我寫的擴展觸發頁面加載開始時的內容腳本，使用：Chrome擴展，進樣HTML然後繼續加載頁面

"run_at": "document_start"

這一切正常。不過，我需要「注入」一些東西，然後繼續渲染初始頁面。如果我的動作腳本僅包含：

alert("Hello World");

警報將觸發，頁面將繼續呈現。相反，如果動作腳本包含：

document.write("<span>Hello World!</span>");

這將寫入「Hello World！」但不會繼續渲染頁面。我知道「document.write」幾乎從來不是一個好工具，但它似乎是正確的工具，因爲（a）它在DOM的其餘部分之前編寫，以及（b）dom中沒有元素「改變」實現注射。

我認爲這很好地解釋了這種情況。但我會提供更多的上下文。最終我想「注入」一個iframe，它將加載頁面的「前面」。試圖爲我的擴展的用戶提供特定網站的替代用戶體驗。

來源

2016-05-31 COMisHARD

我會建議你在'document_end'上運行你的腳本，並修改完整加載的'DOM'，而不是試圖修改'在飛行中' – Serge

我不明白這是一個建設性的評論。我在問怎麼做。我完全同意，通常最好使用你建議的方法。但爲了我的目的，它不會工作。我嘗試加載的頁面大約需要2分鐘才能完全加載。我的腳本的全部目的是允許用戶使用一個界面在頁面加載時開始做某些事情。 – COMisHARD

在我看來，你可以很好地使用[Message Passing]（https://developer.chrome.com/extensions/messaging）。這個相關的SO後 - [消息傳遞示例從Chrome擴展]（http://stackoverflow.com/questions/21766990/message-passing-example-from-chrome-extensions）可能會有所幫助。 – Teyam

嘛，我看不出有一點書面文件<body>甚至存在過，但你可以用DOM操作做到這一點，而不是document.write：

var el = document.createElement("span"); 
el.textContent = "Hello, World!"; 
document.documentElement.appendChild(el);

這不會阻止後續DOM解析。

如果你想以符合標準的頁面結構，並把它添加到body元素，你可以添加一個MutationObserver等待它（儘管這未必比"document_end"注射越好）：

var observer = new MutationObserver(function(mutations) { 
    mutations.find(function(mutation) { 
    for (var i = 0; i < mutation.addedNodes.length; i++) { 
     if(mutation.addedNodes[i].nodeName === "BODY") { 
     var el = document.createElement("span"); 
     el.textContent = "Hello, World!"; 
     // Clunky way to prepend a node 
     mutation.addedNodes[i].insertBefore(el, mutation.addedNodes[i].firstChild); 

     observer.disconnect(); 
     return true; // Early termination of find() 
     } 
    } 
    }); 
}); 
observer.observe(document.documentElement, {childList: true});

來源

2016-05-31 10:56:14 Xan

Chrome擴展，進樣HTML然後繼續加載頁面

回答

相關問題