TL;DR Summary
- I could be wrong, but it seems like the order of
<script>tags in the</body>theme customization section is not respected. - I can’t figure out how to get https://faithlife.com/products/reftagger to execute when I put it in the
</body>theme customization section. - Once I resolve the above, I’m not exactly sure how I’d go about wrapping it in a call to
api.onPageChange()to make it work when more posts are loaded.
Background
I am attempting to make use of a JavaScript library that adds tooltips to Bible verses upon hover. I haven’t really looked at the code too closely, but I think it scans text in the DOM for things that match its regular expressions, then adds links with a CSS class that enables the tooltip hover behavior. Here’s a simple HTML page as an example:
<html>
<head>
<title>Reftagger test</title>
</head>
<body>
<p>A sentence without a link that should get picked up.</p>
<p>A link that should get picked up: Romans 8:28.</p>
<script>
var refTagger = {
settings: {
bibleVersion: "NKJV",
convertHyperlinks: true,
roundCorners: true,
socialSharing: [],
tagChapters: true
}
};
</script>
<script src="https://api.reftagger.com/v2/RefTagger.js" type="text/javascript"></script>
</body>
</html>
I’ve been trying to add this functionality to my Discourse install for a few hours now, and I can’t figure out exactly what I need to do.
My first attempt
I whitelisted the API I wish to use in the Content Security Policy customization section (as described in this prior forum post), like so:
Then I added the JavaScript to the </body> section of theme customization:
After doing these things, it does not appear to work, even on the first page. For one thing, the order of the <script> tags does not seem to be respected, as the settings are placed after the external call, opposite the order in the customization section (at least according to Chrome dev tools):
I might be able to fix this by putting the settings in the </head> customization section, but it seems a bit hackish to me. Is the order of <script> tags in the customization sections not being respected, or am I doing something wrong?
Regardless, I don’t think this is the underlying reason why the JavaScript isn’t working, but I don’t know what else is interfering.
Additional issues
From what I have read, I would need to wrap the execution of the verse-tagging code in an api.onPageChange() call for it to work as more posts get loaded. Something like the following:
<script type="text/discourse-plugin" version="0.8">
api.onPageChange(() => {
// call verse tagging functionality
});
</script>
I haven’t gotten here yet (as I wanted to figure out how to get it to work initially before worrying about this), but I figured I’d mention that this would probably be necessary. I’m a bit rusty on my JavaScript, so I’m not entirely sure how I would go about converting the external call via <script> tag into something callable from inside a another script tag. That is, how to put
<script src="https://api.reftagger.com/v2/RefTagger.js" type="text/javascript"></script>
Into the form
<script>
// execute contents of https://api.reftagger.com/v2/RefTagger.js
</script>
The JavaScript I’m calling is fairly minified, which makes it hard to follow.
Closing observations
I’d appreciate any feedback/pointers. I am attempting to not just copy-paste stuff until something works, because I’d like to understand more or less what’s going on. I’m definitely not above using code that works and then tracing backwards though. 
Might any of this be made easier by editing template files directly on the hosting server?
