I am making a Chrome extension and want to implement a plugin mark.js (https://markjs.io/) that would highlight text on the user page. However, I am having trouble importing the plugin. Since the html is the user's page and I don't have access to it, I can't use the usual <script></script>
. So, I tried to use JavaScript to do it, but am still getting an error.
My JavaScript code is as follows:
var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= 'https://cdnjs.cloudflare.com/ajax/libs/mark.js/7.0.0/mark.min.js';
head.appendChild(script);
//highlight necessities
var context = document.querySelector("body");
var instance = new Mark(context);
function handleSetQuery(findWord) {
cheese.mark(findWord);
}
function handlePrevious() {
//insert previous thing
}
function handleNext() {
//insert next thing
}
function handleClear() {
instance.unmark(options);
}
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
if (request.action === "setquery") {
alert("received: setquery");
handleSetQuery(request.data);
} else if (request.action === "previous") {
handlePrevious();
} else if (request.action === "next") {
handleNext();
} else if (request.action === "clear") {
handleClear();
}
});
The Chrome console is returning the following error:
Any help is appreciated! Solving this issue would also help me use other tools like jQuery.