I'm trying to create a google chrome extension that will allow me to highlight selected text.
The error I get is: Unchecked runtime.lastError: Cannot create item with duplicate id highlight-red
It's also not highlighting in any colors.
The JS code:
chrome.contextMenus.create({
id: "highlight-red",
title: "Highlight Red",
contexts: ["selection"]
});
chrome.contextMenus.create({
id: "highlight-green",
title: "Highlight Green",
contexts: ["selection"]
});
chrome.contextMenus.create({
id: "highlight-blue",
title: "Highlight Blue",
contexts: ["selection"]
});
chrome.contextMenus.onClicked.addListener((info, tab) => {
chrome.scripting.executeScript({
target: { tabId: tab.id },
function: setCheck,
args: [info]
});
chrome.scripting.executeScript({
target: { tabId: tab.id },
function: highlightSelection,
args: [info]
});
});
function setCheck(info) {
var check = true;
}
function highlightSelection(info) {
var color = info.menuItemId;
var selection = window.getSelection().toString();
var range = window.getSelection().getRangeAt(0);
var newNode = document.createElement("span");
newNode.setAttribute("style", "background-color: " + color + ";");
newNode.appendChild(range.extractContents());
range.insertNode(newNode);
}
I'm trying to highlight texts