Creating Chrome Extension that generates a popup when highlighting text

I’m trying to create a Chrome extension that generates a popup on the webpage (not the browser extension popup) whenever text is highlighted on any page. The popup should, ideally, come up right near the selected text and should work on any p tag elements on any page. I’m having a hard time creating this (I’m new to JavaScript and running into various issues).

The popup should perform like it does in this codepen when you highlight text: https://codepen.io/jankees/pen/YzrpdVb (taken from another Stack Overflow post)

Here’s the JS code from that Codepen:

if (!window.x) {
    x = {};
}

x.Selector = {};
x.Selector.getSelected = function() {
    var t = '';
    if (window.getSelection) {
        t = window.getSelection();
    } else if (document.getSelection) {
        t = document.getSelection();
    } else if (document.selection) {
        t = document.selection.createRange().text;
    }
    return t;
}

var pageX;
var pageY;

$(document).ready(function() {
    $(document).bind("mouseup", function() {
        var selectedText = x.Selector.getSelected();
        if(selectedText != ''){
            $('ul.tools').css({
                'left': pageX + 5,
                'top' : pageY - 55
            }).fadeIn(200);
        } else {
            $('ul.tools').fadeOut(200);
        }
    });
    $(document).on("mousedown", function(e){
        pageX = e.pageX;
        pageY = e.pageY;
    });
});

I’m running into several noob errors so explanations on how to do this (for example, how to implement this across multiple pages vs. a static HTML file like the codepen) would be hugely beneficial.

Thank you in advance!