Hi,
Let me start by explaining what we're trying to do and why. We intend
to build an extension that will emulate a set of JS objects and make
them available to the DOM. We are building mobile widgets and want to
be able to load them and test them in a browser (to speed up UI
testing). Mobile widgets take advantage of a widget object that exists
on mobile devices but that are not part of the core JS available in a
browser.
We are trying to inject script tags into the DOM before any other page
script executes. Unfortunately, we find that although the injection is
successful, it completes after the DOM 'load' event is fired in the
page.
Is there a way to inject the script tags into the DOM as soon as it is
available but before any existing page scripts execute AND to not
allow any page scripts to execute until our insertion has completed?
Below is our code example (the description above might be a bit
confusing, but the code might help better explain what we're trying to
do)
Our manifest looks like this:
"content_scripts": [
{
"matches": ["http://127.0.0.1/index.html";],
"js": ["classes/Insertion.js"],
"run_at": "document_start"
}
]
Our 'classes/insertion.js' looks like this:
window.addEventListener('load',function(e){
var head = document.head; //doc head
var d; //temp var to hold element objects
//find the first script node
d = document.createElement("script");
d.setAttribute("src", "<ourJSscriptGoesHere");
d.setAttribute("type", "text/javascript");
head.appendChild(d);
},true);
The page we want to insert the above script into looks something like
this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>Test </title>
<link rel="stylesheet" type="text/css" href="css/global.css"/>
<link rel="stylesheet" type="text/css" href="css/layout.css"/>
</head>
<body>
<script type="text/javascript">
window.addEventListener('load',function(){
console.log("haha!!!!");
<CallToTheObjectWeAreTryingToEmulate>
},false);
</script>
<div id="layout">
<div class="header"></div>
<div id="container">
<h1>hello world</h1>
<p>a simple test widget</p>
</div>
<div class="footer"></div>
</div>
</body>
</html>
Any insight would be very much appreciated.
Best regards,
Brent
--
You received this message because you are subscribed to the Google Groups
"Chromium-extensions" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/chromium-extensions?hl=en.
