Launching a modal in a content script [duplicate]

This question already has an answer here:

I would like to open a modal screen upon pressing the extension button.
Is there a solution that will work with any website?
Does using Bootstrap will not collide with any website? I know that content scripts should run in ‘isolated worlds’ but I’m not sure it helps here.

Thanks

Getting the currently selected text in a chrome searchbar (input field)

I’m currently working on a chrome extension that injects a js script into a visited website. It gets the currently selected text (highlighted by cursor), then after running re-focuses on that text. My saveSelection and restoreSelection functions are as follows:

saveSelection = function(containerEl) {
    let range = window.getSelection()
        .getRangeAt(0);
    let preSelectionRange = range.cloneRange();
    preSelectionRange.selectNodeContents(containerEl);
    preSelectionRange.setEnd(range.startContainer, range.startOffset);
    let start = preSelectionRange.toString()
        .length;
    return {start: start,
        end: start + range.toString()
            .length}
};

restoreSelection = function(containerEl, savedSel)
{
    let charIndex = 0,
        range = document.createRange();
    range.setStart(containerEl, 0);
    range.collapse(true);
    let nodeStack = [containerEl],
        node, foundStart = false,
        stop = false;
    while (!stop && (node = nodeStack.pop()))
    {
        if (node.nodeType === 3)
        {
            let nextCharIndex = charIndex + node.length;
            if (!foundStart && savedSel.start >= charIndex && savedSel.start <= nextCharIndex)
            {
                range.setStart(node, savedSel.start - charIndex);
                foundStart = true;
            }
            if (foundStart && savedSel.end >= charIndex && savedSel.end <= nextCharIndex)
            {
                range.setEnd(node, savedSel.end - charIndex);
                stop = true;
            }
            charIndex = nextCharIndex;
        }
        else
        {
            let i = node.childNodes.length;
            while (i--)
            {
                nodeStack.push(node.childNodes[i]);
            }
        }
    }
    let sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
}

These work for text within a paragraph, but for text within input fields (such as the google searchbar, codepen, jsfiddle) the script is not able to re-focus on the text. In debugging, I found that the range startOffset and endOffset = 0.

How can I 1) get the selection range, and 2) re-focus on the text in the searchbar?

When using Inspect in Chrome, want to save CSS locally so I can experiment

I’m a designer and I’m working with a web developer on a site. I don’t have a dev environment and don’t plan to get one. I want to experiment with the site’s CSS to improve the design, but any changes I make get wiped out when I switch to a new page on the site. Is there a way to save my CSS and HTML changes locally without having to save them back to a server?

Access to Chrome extension elements from frontend

Can I interact with elements of the specific Chrome Extension (e.g. click on a button of the extension) in JS script of my frontend?

What does the waterfall diagram in the given screenshot taken with chrome dev tool means?

Below given is the screenshot was taken while running my application with the dev tool in chrome. Please help me to understand the waterfall diagram. What the green and blue color refers to. My application renders content after a long delay, so I used dev tool to understand my application behaviour. Can I be able to understand the delay that my application make with this diagram?

enter image description here