One of our newly released add-ons, Flag Content for Confluence, was built in a such a way that it integrates with the Likes plugin of Confluence, but it was not dependent on it.
When testing the add-on with theme add-ons like Brikit Theme Press, we found out that our solution messed up their styling.

Solution path

To fix this, we had a couple of solutions in mind;

1. Integrate our plugin with the likes and labels plugin of Confluence itself, meaning if that is disabled, our add-on is also disabled
2. Wait for the likes and labels elements to show up with a 5 second delay. Once present, we would add our elements to the DOM
3. Move the flag button to the action menu

None of these solutions felt satisfying so we came up with another solution:

Add our Flag button to the same place as we did before. So, it is still not dependent on the likes plugin, but if the likes plugin content appears we move our elements inside the likes and labels section. Instead of a function that checks every X seconds for content to appear, we found out SkateJS would be a good solution to check on creation of DOM elements.

We're using jQuery's detach function to move our wrappers around.

The .detach() method is the same as .remove(), except that .detach() keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time. For us this was important since our elements are associated with Backbone.js views.

So what is Skate?

From Github:

Skate is a web component library that is focused on being a tiny, performant, syntactic-sugar for binding behaviour to custom and existing elements without ever having to worry about when your element is inserted into the DOM

Implementation

Add our wrapper element to the DOM:

$(".wiki-content").after($('<div id="flag-page-wrapper"></div>'));

Add the Backbone view to bind the element so events are picked up when someone hits "flag":

$('#flag-page-wrapper').html(new FlagContentView({

  collection: contentFlags,

  contentId: parseInt(AJS.Meta.get("page-id")),

}).$el);

Move our wrapper element inside the likes and labels part when this is added to the DOM.

skate('like-button', {

  type: skate.types.CLASS,

  ready: function () {

    $("#flag-page-wrapper").detach().prependTo("#likes-section");

  }

});

That's it!