Userscript that adds a message to the top of the page when viewing a question you have answered previously

own-answer-hint.user.js

// ==UserScript==
// @name         Own Answer Hint
// @namespace    https://github.com/shu8
// @version      1.0.0
// @description  Adds a message to the top of the page when viewing a question you have answered previously
// @author       ᔕᖺᘎᕊ (https://stackexchange.com/users/4337810/, https://github.com/shu8)

// @match        *://*.stackoverflow.com/questions/*
// @match        *://*.stackexchange.com/questions/*
// @match        *://*.superuser.com/questions/*
// @match        *://*.serverfault.com/questions/*
// @match        *://*.askubuntu.com/questions/*
// @match        *://*.stackapps.com/questions/*
// @match        *://*.mathoverflow.net/questions/*
// @exclude      *://data.stackexchange.com/*
// @exclude      *://api.stackexchange.com/*

// @require      https://code.jquery.com/jquery-3.3.1.min.js
// ==/UserScript==

function showMessage(link) {
    $('body').prepend(`
       <div class="own-answer-hint s-toast js-toast js-stacks-managed-popup js-fades-with-aria-hidden" aria-hidden="false" style="top: 60px;">
   <aside class="s-notice s-notice__danger">
      <div class="grid gs16 gsx ai-center jc-space-between">
         <div class="grid--cell">
            <p class="m0 js-toast-body" id="js-notice-toast-message" role="status" tabindex="0">You have previously <a href="${link}">answered this question</a></p>
         </div>
         <div class="grid--cell mr0 js-notice-actions">
            <div class="grid">
               <button class="own-answer-hint-close p8 s-btn grid grid__center fc-dark" tabindex="0" role="button" aria-label="Dismiss">
                  <svg aria-hidden="true" class="svg-icon iconClearSm m0" width="14" height="14" viewBox="0 0 14 14">
                     <path d="M12 3.41L10.59 2 7 5.59 3.41 2 2 3.41 5.59 7 2 10.59 3.41 12 7 8.41 10.59 12 12 10.59 8.41 7z"></path>
                  </svg>
               </button>
            </div>
         </div>
      </div>
   </aside>
</div>
`);
}

$(document).on('click', '.own-answer-hint-close', function() {
    $('.own-answer-hint').remove();
});

(function() {
    const loggedInUserId = StackExchange.options.user.userId;
    if (!loggedInUserId) return;
    $('.answer').each(function () {
        if ($(this).find('.post-signature').last().find('.user-details a').attr('href').contains(loggedInUserId)) {
            const answerUrl = $(this).find('.post-menu a').first().attr('href');

            // Don't show message if current URL points to that answer
            if (location.href.split('/')[6].contains(answerUrl.split('/')[2])) return;

            showMessage(answerUrl);
        }
    });
})();