I need to add a library dependency to the bundled Facebook Instant HTML file. I currently point to the engine template in “builtins”, and the fbinstant template seems to be merged with this when bundling.
How would I go about adding an additional engine template, or editing the fbinstant one?
builtins/manifests/web/engine_template.html
main folder.html5.htmlfile
That doesn’t quite work in my case since I am actively using the Facebook Instant specific functionality from the fbinstant engine template (updateProgress and initializeAsync).
Is there no way of customising the fbinstant engine template itself?
For now, I’ve hard coded the whole thing instead.
No, there’s no way to override that currently.
You can add the extension source directly to your app.
You could also add an issue or to the fbinstant repo, describing what you’d need to to add to the template?
Or, even better, create a pull request.
E.g.
<html>
<head>
{{fbinstant.custom_head_string}}
<style>
{{fbinstant.custom_style_string}}
</style>
...
I think you should be able to do like this:
libraries
libraries/ext.manifest file with content name: libraries
libraries/manifests/web/engine_template.html fileengine_template.html contain the bare minimum to make it a valid html file containing the library you needThis would trigger our manifest merge tool and include your library in the final index.html file
This works, if a dummy cpp file is added to a src folder (if it’s not there it fails with a “this extension has no source” message:
I still haven’t figured out how to use this solution, however, because I need to use the updateProgress and initializeAsync methods already in use by the Facebook Instant plugin. When I add the code it is duplicated (as can be expected) and since the fbinstant plugin is added last, the callbacks to the custom SDK don’t seem to work.
You can use attributes merge or keep on a html tag (we’re mimicing the behavior from the android manifest merger a bit).
Merge is the default, but if you use keep that tag isn’t merged.
Try that on your html tags you wish to override completely.
Oh, nice! The fbinstant engine template file looks like this:
<html>
<head>
<style>
.canvas-app-progress {
visibility: hidden;
}
.canvas-app-progress-bar {
visibility: hidden;
}
</style>
</head>
<body oncontextmenu="return false;">
<script src="https://connect.facebook.net/en_US/fbinstant.6.3.js"></script>
<script type='text/javascript'>
// Set up a progress listener and feed progress to FBInstant
Progress.updateProgress = function (percentage, text) {
FBInstant.setLoadingProgress(percentage);
}
// Do early initialization of FBInstant
// This is required to be able to properly update the loading
// progress above.
FBInstant.initializeAsync().then(function() {
// This will be checked by the FBInstant Defold extension
Module._fbinstant_inited = true;
});
</script>
</body>
</html>
How would I be able to make that look like this?
<script src="testbundle.js"></script><!--new module-->
<script src="https://connect.facebook.net/en_US/fbinstant.6.3.js"></script>
<script type="text/javascript">
// Set up a progress listener and feed progress to FBInstant
Progress.updateProgress = function (percentage, text) {
FBInstant.setLoadingProgress(percentage);
// NEW CODE START
if (percentage === 100) {
Test.configureScope(function (p_scope) {
p_scope.setUser({
"id": FBInstant.player.getID(),
"name": FBInstant.player.getName(),
"locale": FBInstant.getLocale()
});
});
}
// NEW CODE END
}
// Do early initialization of FBInstant
// This is required to be able to properly update the loading
// progress above.
FBInstant.initializeAsync().then(function() {
// This will be checked by the FBInstant Defold extension
Module._fbinstant_inited = true;
// NEW CODE START
Test.init({
dsn: 'https://test@test/test',
release: 'TEST@{{project.version}}'
});
// NEW CODE END
})
</script>
</body>
</html>
I’m guessing replacing the SCRIPT tags is not a great idea…
fbinstant exclusively hogs the Progress.updateProgress(), not allowing other extensions to hook into it. Perhaps you can design a way forward there and make a PR?FBInstant.initializeAsync()call seems like a new feature that you wish to add to the fbinstantextension specifically.Yes, I suppose this is starting to smell like a feature request! Unless there is another way of solving this? I’m happy with hard coding, but it seems the fbinstant manifest is forcibly merged no matter what?
This comment makes me very nervous! My knowledge in JavaScript is limited at best. I’m just trying to make this thing work! 
Start with this.
And create this in the extension-fbinstant repo.
Put a copy of the entire extension into your project. then remove/rename the fbinstant manifest file so that it’s not picked up by the manifest merger.
I realise now that there is no way I CAN hard code this thing!
The fbinstant plugin data is always merged, and there is no way I seem to be able to stop it. I have tried to add a static index.html file to bundle_resources, but it’s overwritten by the index.html file that’s created when bundling.
Yes, the index.html is generated from merging all engine_template.html files, including the one you specify in game.project.
Okay, bummer. Then I suppose, in my case, the only option is to first bundle the game, then manually replace the index.html file.
Why can’t you put the fbinstant extension as-is, into your project?
Oh sorry, yes, that would work. I thought I had missed something. Busy around christmas! That’s probably the way forward for now. Thanks!
Edit: This works great. God jul! 
I’ll look into a way to hook into the progress and init functions. @totebo could you please create a ticket?
Aye aye!