Chrome context menu items multiply when popup is opened

Question

I've written a Chrome extension which will offer a popup to make a library search and also a context menu, where a highlighted text can be used to search for a title, author, or keyword. When I select a term and right-click it, the supposed context menu appears with all the items. The popup also works, nearly perfectly. But it also causes the context menu items to multiply. If anyone could point me in the right direction where I could prevent this misbehavior.

Below the context menu before and after the popup was opened.

Here my code:

popup.html

<script src="script.js"></script>
<script src="rightclick.js"></script>
<script src="selection.js"></script>
<h3>SU - IC Search</h3>
<form action="">
    <input type="text" id="searchTerm"/>
    <select name="" id="customPath">
        <option value="" disabled selected>Select</option>
        <option value="all">All items</option>
        <option value="b">Books</option>
        <option value="a">Articles</option>
        <option value="j">Journals</option>
    </select>
</form>

script.js

document.addEventListener('DOMContentLoaded', () => {

document.getElementById('customPath').addEventListener('change', icSearch);

function icSearch(){
    var searchPath   = document.getElementById('customPath').value;
    if(searchPath  === "all") {
        var url = "https://www.google.com/search?q=" + document.getElementById('searchTerm').value;
        chrome.tabs.create({ url });
    }
    if(searchPath  === "b") {
        var url = "https://www.google.com/search?q=" + document.getElementById('searchTerm').value;
        chrome.tabs.create({ url });
    }
    if(searchPath  === "a") {
        var url = "https://www.google.com/search?q=" + document.getElementById('searchTerm').value;
        chrome.tabs.create({ url });
    }
    if(searchPath  === "j") {
        var url = "https://www.google.com/search?q=" + document.getElementById('searchTerm').value;
        chrome.tabs.create({ url });
    }
}
});

selection.js

chrome.extension.sendResponse(window.getSelection().toString());

rightclick.js

var selection_callbacks = [];

function getSelection(callback) {
    selection_callbacks.push(callback);
    chrome.tabs.executeScript(null, {
        file: "selection.js"
    });
};
chrome.extension.onRequest.addListener(function (request) {
    var callback = selection_callbacks.shift();
    callback(request);
});

function catalogAuthor(selectedText) {
    var serviceCall = 'https://www.google.com/search?q=' + selectedText;
    chrome.tabs.create({
        url: serviceCall
    });
}

function catalogTitle(selectedText) {
    var serviceCall = 'https://www.google.com/search?q=' + selectedText;
    chrome.tabs.create({
        url: serviceCall
    });
}

function catalogKeyword(selectedText) {
    var serviceCall = 'https://www.google.com/search?q=' + selectedText;
    chrome.tabs.create({
        url: serviceCall
    });
}

chrome.contextMenus.create({
    title: "Catalog search (online)",
    id: "parent",
    contexts: ["selection"]
});

chrome.contextMenus.create({
    title: "Author",
    parentId: "parent",
    contexts: ["selection"],
    onclick: function (info, tab) {
        catalogAuthor(info.selectionText);
    }
});

chrome.contextMenus.create({
    title: "Title",
    parentId: "parent",
    contexts: ["selection"],
    onclick: function (info, tab) {
        catalogTitle(info.selectionText);
    }
});

chrome.contextMenus.create({
    title: "Keyword",
    parentId: "parent",
    contexts: ["selection"],
    onclick: function (info, tab) {
        catalogKeyword(info.selectionText);
    }
});

chrome.contextMenus.create({
    title: "Catalog search (physical)",
    id: "physical",
    contexts: ["selection"]
});

chrome.contextMenus.create({
    title: "Author2",
    parentId: "physical",
    contexts: ["selection"],
    onclick: function (info, tab) {
        catalogAuthor(info.selectionText);
    }
});

chrome.contextMenus.create({
    title: "Title2",
    parentId: "physical",
    contexts: ["selection"],
    onclick: function (info, tab) {
        catalogTitle(info.selectionText);
    }
});

chrome.contextMenus.create({
    title: "Keyword2",
    parentId: "physical",
    contexts: ["selection"],
    onclick: function (info, tab) {
        catalogKeyword(info.selectionText);
    }
});

Answer 1

Found the reason for my 2-day headache. I was looking to find the answer within the script files, while it was in the HTML file. Removing rightclick.js from it and adding it to manifest.json > background > scripts did the job. However, I'm trying to pass the "Uncaught TypeError: Cannot read property 'addEventListener' of null" error. Any suggestions?