This is amazing @simon I never would’ve thought it to be so flexible! 
I really like the first method and I will proceed with that.
I will play around a bit with url based filtering and if everything works well with single urls (/latest), (/new) and combined (/tags/c/site-feedback/foo), (/c/site-feedback/), I will update this post again with the what I have.
Small update:
So I was trying to make masonry work inside posts to create a gallery if image uploads follow certain structure and it’s something like this:
<span>
</br>
<div class=lightbox-wrapper">...</div>
<div class=lightbox-wrapper">...</div>
<div class=lightbox-wrapper">...</div>
....
</span>
This will result in the images being organized by masonry to look like this:
However, clicking any of the images will open the native discourse lightbox, which I like very much!
My issue this time is similar to the issue in the original post, where the script is fired if page is visited directly or on initial page load but not if reached after visiting any other page on discourse.
The script I am using is:
<script type="text/discourse-plugin" version="0.8">
api.onPageChange(() => {
mgallery();
});
function mgallery() {
var $mgallery = $(".cooked>span").has(".lightbox-wrapper+.lightbox-wrapper");
$mgallery.addClass("mgallery");
$mgallery.css("visibility", "hidden");
$mgallery.imagesLoaded(function() {
$mgallery.masonry({
itemSelector: ".lightbox-wrapper"
}).css("visibility", "visible");
});
console.log("mgallery loaded");
};
</script>
After every page load I see “mgallery loaded” in the console like expected but the issue persists.
In summary,
this method of loading a script via the pluginAPI seems to work really well if used for masnory in the topic list pages, however, it does not seem to work in post pages.
What should I be looking at next?
Still having the same issue in getting the script to fire on /t/ pages after initial load.
Here’s what happens,
I visit the post page directly, script fires, gallery is arranged via masonry and I get the console log message I expect.
I navigate within the app, then return to post page (not initial page load anymo) the script does fire and I get the console message but masonry is not actually working.
Here’s the code I’m using now.
HTML
<div>
<br>
uploaded image
uploaded image
uploaded image
....
</div>
hacky, I know 
still need to understand how to create custom [foo]...[/foo] tags
or white list some html <div class="foo">...</div>
CSS
not relevant here so I will skip it.
JS:
<script type="text/discourse-plugin" version="0.8">
api.onPageChange(() => {
mgallery();
});
function mgallery() {
var $mgallery = $(".cooked>div:not('[class]'):not('[id]')").has(".lightbox-wrapper+.lightbox-wrapper");
$mgallery.addClass("mgallery");
$mgallery.css("visibility", "hidden");
$mgallery.imagesLoaded(function() {
$mgallery.masonry({
itemSelector: ".lightbox-wrapper"
}).css("visibility", "visible");
});
console.log("mgallery loaded");
};
</script>
Everything works on initial page load:
but not on subsequent page loads.
even when the console log indicates that the script has re-fired.
The confusing part is that I use the same method to initialize masonry on topic-list pages and it works just fine on both initial and subsequent page loads
using this script:
<script type="text/discourse-plugin" version="0.8">
api.onPageChange(() => {
msnrylayout();
});
function msnrylayout() {
$(".topic-list").css("visibility", "hidden");
$(".topic-list").imagesLoaded(function() {
$(".topic-list").masonry({
itemSelector: ".topic-list-item"
}).css("visibility", "visible");
});
console.log("Masonry loaded");
};
</script>
Is there anything special about topic pages (/t/) - when compared to topic-list pages - that would prevent masonry script from working as intended on every post page load within the app?
This may or may not be a bug. I cannot really tell.
jQuery scripts do not fire onPageChange when the destination is a topic as consistently as they do when the destination is a discovery route.
api.onPageChange((url, title) => {
console.log('the page changed to: ' + url + ' and title ' + title);
$(".regular>.cooked>p").addClass("foo-class");
});
On every page loaded, the page title and url are logged to console and every .regular>.cooked>p element gets the class .foo-class added to it.
And this is exactly what happens on initial page load (if topic is accessed via direct url)
As you can see above, every <p> tag has the class .foo-class added to it and the console logs the page information as instructed.
If you navigate away from the topic and go back in or if you go visit another topic by clicking a link from within the app (where the content is loaded via the app), the script behaves differently.
The console logs the page information like before, but the jQuery part is not picked up.
notice how the <p> tags don’t have the class .foo-class added even though the console indicates that the script was executed
<script type="text/discourse-plugin" version="0.8.13">
api.onPageChange((url, title) => {
console.log('the page changed to: ' + url + ' and title ' + title);
$(".regular>.cooked>p").addClass("foo-class");
});
</script>
I also went through the entire plugin-api.js file and did not find any alternative to onPageChange
Did you ever get to the bottom of this? I was trying to do something simple with jQuery earlier and it seems like api.onPageChange isn’t the right solution.
I have been working on something that needs to be fired when entering a topic. I don’t know if this is overly complicated or the proper way to do it, but this is what I’ve found works well so far:
<script type="text/discourse-plugin" version="0.8.13">
api.addPostTransformCallback((t) => {
// post is topic post && element doesn't already exist
if (t.post_number === 1 && $("#test-id").length == 0) {
$(function() {
var testText = '<h1 id="test-id">Test</h1>';
$("#post_1 .regular.contents").before(testText);
});
}
});
</script>
Try this out in a theme component. It will add the word “Test” to the first post in every topic.
Yes and no, I don’t know why topic pages seem to behave differently here but I have found a couple of workarounds.
If you want to do something only once when a topic page is loaded, then matching the url for /t/ seems to work.
Like so:
<script type="text/discourse-plugin" version="0.8.18">
api.onPageChange(url => {
// if url matches */t/* or topic page
if (url.match(/^\/t\//)) {
// do something
console.log("foobar");
}
});
</script>
Edit:
Nope 
, this will still log stuff to console but still very finicky about everything else and will only work with a jQuery function if the page is the first the user views and not on in-app navigation this is either a bug or something is running out of order. I don’t see any errors in the log though
For this use case @tshenry’s method works really well. 
So I’m adapting it going forward.
The method below still works though for Ajax content
However, if you want to modify content including content that’s loaded later on after scrolling, you’d need a slightly more complicated workaround.
This is not entirely clean but still a little bit efficient. It could still be vastly improved.
in brief, you bind whatever you want to do to an ajaxSuccess handler while on topic pages and then unbind after leaving topic pages.
<script type="text/discourse-plugin" version="0.8.18">
api.onPageChange(url => {
fo_bar = fooBar();
// if url matches */t/*
if (url.match(/^\/t\//)) {
fooBar();
} else {
// if not a topic page, unbind the ajaxSuccess handler
$(document).unbind("ajaxSuccess", fo_bar);
}
});
function fooBar() {
$(document).ajaxSuccess(function() {
// do stuff
console.log("foobar");
});
}
</script>
This will fire 2-3 times when entering a topic and when new content is loaded while on topic pages, but will not fire outside of topic pages. This is still far from ideal but so far is the only way I’ve manged to do this and make changes to content loaded later on after scrolling.
One possible room for improvement is to move the unbind function from the url based if else statement to a cleanupStream function which would only fire once when exiting a topic page. However, I still have not figured out how to fully use it.
For reference it’s here:
Alright, here’s one more update on this. I think I maybe on to the reason why api.onPageChange does not work for topic pages and the answer might be this:
With that in mind here’s the new way I settled on for firing a script once a user enters a topic page and doing a bit of clean up after leaving the topic page. This could still be improved I suppose but for now will only fire once when entering a topic and once when leaving.
const TopicRoute = require('discourse/routes/topic').default;
TopicRoute.reopen({
activate: function() {
this._super();
Em.run.next(function() {
// do stuff here when a topic page is opend
});
},
deactivate: function() {
this._super();
// clean up here when leaving the topic page
}
});
As far as I tested, this will both log stuff to the console and work with jQuery. edit: Nope. Again
If anyone is interested in the breadcrumbs I came accross to put this together check these posts / topics out:
https://meta.discourse.org/t/accessing-the-createtopic-action-while-on-a-topic-route/26423
A tour of how the Widget (Virtual DOM) code in Discourse works
https://meta.discourse.org/t/using-jquery-to-add-a-link-to-a-group-badge/40563
https://meta.discourse.org/t/customizing-the-home-screen-to-show-tiles-for-topics/16713/2
https://meta.discourse.org/t/how-to-insert-static-welcome-text-block-on-categories-page/16090/5
https://meta.discourse.org/t/wip-list-of-all-the-hooks-in-discourse/11505
A tour of how the Widget (Virtual DOM) code in Discourse works
Once I figure out how to fire a script once every time the post stream is updated I will post another update here.
This is really interesting! Definitely different than anything I’ve worked with in theme dev so far. Looking forward to checking out the breadcrumbs and trying to get a deeper understanding of what all is going on. Thanks for the update
You’re correct @Mittineague and that’s what I’m using now.
There’s only one small hick up which is I cannot seem to get it to work with anything except for the entire document which as you may have already guessed it, would mean it fires 2 or three times each time more posts are loaded into the post stream.
It would be really great if I can use it with the post stream as the base but so far I have not been able to do so.
However, my testing my be a bit off so I will try this again
The “poll” happens every 30 seconds to keep Notifications current. The URL contains “…/message-bus/…/poll”. I haven’t “caught” a post stream update in my dev tools yet. But if the URL is different it might be possible to “intercept” and only proceed when there are new posts.
I tried again and I really cannot get it to work with anything except the entire document as a base
This is the closest thing I’ve seen that might be the ideal option:
The focus here being on:
this.appEvents.on('post-stream:refresh'
Which I can only assume is fired once the post stream has refreshed.
In the meanwhile, your suggestion still remains the best/only way I found to consistently fire a script while on a topic page that will re-fire once new posts are loaded. Combining the the two together now looks like this:
<script type="text/discourse-plugin" version="0.8.18">
// first you define a function
function FooBar() {
// then bind a function to AjaxSuccess
$(document).ajaxSuccess(function() {
// Do stuff here that you want to be applied to all posts
});
}
// Now we make sure the function is fired after an in-app navigation to a topic page
const TopicRoute = require("discourse/routes/topic").default;
TopicRoute.reopen({
activate: function() {
this._super();
Em.run.next(function() {
// Call FooBar() when a topic is entered. Since FooBar has a function that's bound to the
// AjaxSuccess handler, it will fire on every AjaxSuccess
FooBar();
});
},
deactivate: function() {
this._super();
var foo_bar = FooBar();
// and then we make sure to unbind the AjaxSuccess handler
// once the use leave the topic page.
$(document).unbind("ajaxSuccess", foo_bar);
}
});
</script>Hi @lll, I am not sure about what’s exactly you are trying to achieve since I didn’t followed this topic fully. If you just want to modify all post contents as you described here then you can use below code
api.decorateCooked($elem => $elem.children('p').addClass('foo-class'));
Oh wow 
That is exactly what I’ve been searching for for the last 3 months! 
This is really good @vinothkannans, thank you so much!
It works for me like this:
var selector = 'div[data-theme-tiles="1"]';
api.decorateCooked($elem =>
$elem
.children(selector)
// do your work here for example:
.imagesLoaded(function() {
$(selector).masonry({
itemSelector: ".lightbox-wrapper"
});
})
);
And it just works! no excessive firing, no bloat. Amazing! 
So, to recap all the stuff from earlier: (from my basic understanding which maybe off)
This will work if you want something done when topic pages are opened:
const TopicRoute = require("discourse/routes/topic").default;
TopicRoute.reopen({
activate: function() {
this._super();
Em.run.next(function() {
// do stuff here when a topic page is opend
});
}
});
And you can do stuff HOWEVER, you wont be able to modify the contents of the topic because they are in virtual dom and that’s why jQuery was not able to modify the topic contents while it was able to do stuff like console.log and modify parts of the pre-existing actual dom like this:
const TopicRoute = require("discourse/routes/topic").default;
TopicRoute.reopen({
activate: function() {
this._super();
Em.run.next(function() {
console.log("topic page opened");
$("body").css(
"background-color",
"#" + ((Math.random() * 0xffffff) << 0).toString(16)
);
});
}
});
In the same way, this can be used to make changes when the user leaves a topic page:
const TopicRoute = require("discourse/routes/topic").default;
TopicRoute.reopen({
deactivate: function() {
this._super();
console.log("topic page closed");
// do more stuff here or a bit of cleaning up
}
});
Again you can do whatever you need here because the user will be leaving the topic and so you would not be modifying the virtual dom contents of the topic anyways.
Moreover;
api.onPageChange(url => {
// do stuff here
});
Will also work on topic pages however, the same from above will still apply. You cannot modify the actual contents of the topic (again, they are in virtual dom) but you can modify elements in the pre-existing dom.
So this would work, even on topic pages:
api.onPageChange(url => {
$("body").css(
"background-color",
"#" + ((Math.random() * 0xffffff) << 0).toString(16)
);
});
Once I get a firmer grip on this I will probably create a how-to topic with the relevant bits
Thanks again @vinothkannans 
Perhaps this is a better place to ask this question: I am currently attempting to use this API to trigger a redirection from a category to an external site (Redirect Category to External URL). For some reason, I cannot seem to get this API to trigger the script.
Here is the script I’m using:
<script type='text/discourse-plugin' version='0.8.19'>
$( document ).ready(function() {
if ( window.location.href === "https://omnifora.com/c/redirect-politifora" ) {
window.location.replace( "https://politifora.com/" );
}
});
</script>
I suppose it would be easier for you to attempt to locate the issue if I posted the correct code:
topic carefully.<script type='text/discourse-plugin' version='0.8.19'>
api.onPageChange((url) => {
if (url.includes('/c/redirect-politifora')) {
window.location.replace('https://politifora.com/');
}
});
</script>
While I’m uncertain why the script I posted, supra, does not work, apparently this script does work (when placed into </head> via Customize):
<script type="text/discourse-plugin" version="0.8.19">
api.onPageChange(() => {
if ( window.location.href === "https://omnifora.com/c/redirect-politifora" ) {
window.location.replace( "https://politifora.com/" );
}
});
</script>