I'm trying to add the following function to a chrome extension:
$( function() {
var availableTags = [
"ActionScript",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#other" ).autocomplete( {
source: availableTags,
minLength: 0
})
.focus(function() {
$(this).autocomplete('search', $(this).val())
})
;
} );
But I kept getting the error:
counterstring.js:7 Uncaught (in promise) ReferenceError: $ is not defined
at show_options (VM182 counterstring.js:7)
at VM182 counterstring.js:81
at Array.forEach (<anonymous>)
at VM182 counterstring.js:78
EDIT:
I have updated the manifest file as suggested in the comments, but still getting errors. This is the current version I have:
"content_scripts": [ {
"matches": ["http://*/*", "https://*/*"],
"js": ["js/jquery-3.5.1.min.js", "js/jquery-ui.min.js", "js/counterstring.js"]
}],
"background": {
"persistent": true,
"scripts": ["js/jquery-3.5.1.min.js","js/jquery-ui.min.js","js/background.js","js/counterstring.js"]
},
"permissions": [
"contextMenus",
"activeTab",
"storage"
],
Now I'm only imported jquery 3.5xxx and also jquery-ui since I read it is also required for the autocomplete function.
From this I'm still getting the same error:
Uncaught (in promise) ReferenceError: $ is not defined
at show_options (VM238 counterstring.js:6)
at VM238 counterstring.js:80
at Array.forEach (<anonymous>)
at VM238 counterstring.js:77
Also, if I tried without importing jquery-ui I get this other error:
Uncaught (in promise) TypeError: $(...).autocomplete is not a function
at show_options (VM274 counterstring.js:6)
at VM274 counterstring.js:80
at Array.forEach (<anonymous>)
at VM274 counterstring.js:77
Which I interpret is it is importing jquery with that code, but still not finding the function I need.