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然后继续加载页面

回答

相关问题