Inject jQuery into the current tab page - chrome extension - google-chrome-extension

Question

I am new to chrome extensions, so I maybe using the wrong terms.
I have created a extension
manifest.json
{
"name": "Run code in page",
"version": "1.1",
"manifest_version": 2,
"content_scripts": [{
"js": ["contentscript.js"],
"matches": ["https://*/*"]
}],
"web_accessible_resources": ["*.js"],
"default_locale": "en"
}
contentscript.js
function injectScript(script) {
var s = document.createElement('script');
s.src = chrome.extension.getURL(script);
(document.head || document.documentElement).appendChild(s);
}
injectScript('script.js');
injectScript('otherscript.js');
script.js
console.log('script.js');
otherscript.js
console.log('otherscript.js');
This works, I see this in the output :
script.js
otherscript.js
All is good, both scripts are loading, I need jQuery to be added in the same way so that I can access jQuery from my script.
So, I
injectScript('jquery.js');
But now I get the following error
Denying load of chrome-extension://abdiolbenneaffeaedmfeeanlephlnoo/jquery.js. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.
If I look at the DOM, I see this
<script src="chrome-extension://abdiolbenneaffeaedmfeeanlephlnoo/script.js"></script>
<script src="chrome-extension://abdiolbenneaffeaedmfeeanlephlnoo/otherscript.js"></script>
<script src="chrome-extension://abdiolbenneaffeaedmfeeanlephlnoo/jquery.js"></script>
If I put chrome-extension://abdiolbenneaffeaedmfeeanlephlnoo/jquery.js into the URL I can access it.
-- edit
If I load jquery externally it will load, so I guess I can just do that. eg
function injectExternalScript(script) {
var s = document.createElement('script');
s.src = script;
(document.head || document.documentElement).appendChild(s);
}
injectExternalScript('https://code.jquery.com/jquery-3.3.1.min.js');

Answer 1

If you want do inject jQuery into your extensions background page do in inside the manifest.json like so:
Example:
"background": {
"persistent": true,
"scripts": ["jquery-3.3.1.min.js", "background.js"]
},
Note: Make sure jQuery is first in the array so it loads before the actual background.js
But, in your case, you are not executing that code in the background nor are you injecting anything to it since you are mistaking a content script for a background page which you don't have.
I recommend you first read the official documentation regarding Chrome Extension Architecture before anything else.
You can also write code like so in your content.js to be injected directly into the DOM from your content script so you can avoid using multiple unnecessary .js files in your extension.
Content.js:
//Injects functions directly into the dom
function inject(fn) {
var script = document.createElement('script');
script.setAttribute("type", "application/javascript");
script.textContent = '(' + fn + ')();';
document.body.appendChild(script); // run the script
document.body.removeChild(script); // clean up
}
inject(function(){
// code that will be executed in the scope of the page
}
You can read more about this here.

Answer 2

This is really weird. You probably checked if the jquery.js file is in the root folder and with this name, right?
Well, in my case I wanted to add jQuery in all pages that match in content_scripts > matches so I just did something like this:
...
"content_scripts": [
{
"matches": [
"https://*/*"
],
"js": [
"assets/js/jquery.js",
"assets/js/contentscript.js"
]
}
],
...
So in this way I can use jQuery in contentscript.js file.