打开弹出窗口时，Chrome 上下文菜单项会增加

Question

我编写了一个 Chrome 扩展程序，它会提供一个弹出窗口来进行库搜索以及一个上下文菜单，其中突出显示的文本可用于搜索标题、作者或关键字。当我选择一个术语并右键单击它时，假定的上下文菜单会出现所有项目。弹出窗口也有效，几乎完美。但它也会导致上下文菜单项成倍增加。如果有人能指出我可以防止这种不当行为的正确方向。

在弹出窗口打开前后的上下文菜单下方。

这是我的代码：

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

找到了我 2 天头痛的原因。我希望在脚本文件中找到答案，而它在 HTML 文件中。从中删除 rightclick.js 并将其添加到 manifest.json > background > scripts 完成了这项工作。但是，我正在尝试传递“未捕获的 TypeError：无法读取 null 的属性 'addEventListener'”错误。有什么建议吗？