We Keep Coding

Chrome Extension: Jquery Not Working In Content Script

I am not sure why my jquery is not loading properly in my content script even though I have the jquery.js file under the resources in the web accessible resources. I keep getting this error: "ReferenceError: $ is not defined". Would appreciate any help, thank you.
manifest.json
{
"name": "Work Smarter",
"description": "Work Smarter - Elimanate Distractions, Be Productive",
"version": "1.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"permissions": ["storage", "activeTab", "scripting", "tabs"],
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "/images/16x16.png",
"32": "/images/32x32.png",
"48": "/images/48x48.png",
"128": "/images/128x128.png"
}
},
"icons": {
"16": "/images/16x16.png",
"32": "/images/32x32.png",
"48": "/images/48x48.png",
"128": "/images/128x128.png"
},
"web_accessible_resources": [
{
"resources": ["contentscript.css", "images/neverGiveUp.png", "jquery.js"],
"matches": ["<all_urls>"]
}
],
"host_permissions": ["http://*/", "https://*/*"]
}

Chrome extension does not work on the first installation

I am learning to how to make a chrome extension and trying to make popup js alert hello when a button is clicked.
background js
chrome.runtime.onMessage.addListener(function(request,sender,sendResponse){
if(request.todo=="showPageAction"){
chrome.tabs.query({active:true,currentWindow:true}, function(tabs){
chrome.pageAction.show(tabs[0].id);
});
}
});
popup.js
document.addEventListener('DOMContentLoaded',function(){
$('#btnChange').click(function(){
chrome.tabs.query({active:true,currentWindow:true},function(tabs){
chrome.tabs.sendMessage(tabs[0].id,{todo:"clickAll"})})
});
});
content.js
chrome.runtime.sendMessage({todo:"showPageAction"});
chrome.runtime.onMessage.addListener(function(request,sender,sendResponse)
{
if (request.todo =="clickAll"){
alert("alert");
}
});
manifest.json
{
"name": "alert",
"version": "1",
"description": "alert ",
"permissions": ["declarativeContent","activeTab","storage","https://*","tabs"],
"options_page": "options.html",
"background": {
"scripts": ["background.js"],
"persistent": false
},
"content_scripts": [
{
"matches": ["https://*"],
"js": ["content.js", "jquery.js"],
"run_at": "document_start",
"all_frames": true
}
],
"page_action": {
"default_popup": "popup.html",
"default_icon": {
"128": "images/img.png"
}
},
"icons": {
"128": "images/img.png"
},
"manifest_version": 2
}
The code does not work when first time installed and requires refreshing to work. what can I do to make it work on first installation?

Can I inject intercom.io using a chrome extension?

I can't seem to inject it through a normal injection.
The code is the standard script of intercom put in an src/inject/inject.js file
Here is my manifest file
{
"name": "CHANGE THIS : Extension boilerplate",
"version": "0.0.1",
"manifest_version": 2,
"description": "This extension was created with the awesome extensionizr.com",
"homepage_url": "http://extensionizr.com",
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"default_locale": "en",
"background": {
"page": "src/bg/background.html",
"persistent": true
},
"permissions": [
"https://*/*",
" http://*/*"
],
"content_scripts": [
{
"matches": [
"http://*/*", "https://*/*"
],
"js": [
"src/inject/inject.js"
]
}
]
}

Chrome extension content script

I want to use a plugin on the content page, this is my code :
manifest
{
"manifest_version": 2,
"name": "Test",
"description": "foo",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"options_ui": {
"page": "options.html",
"chrome_style": true
},
"permissions": [
"activeTab",
"storage",
"https://google.com/*"
],
"content_scripts": [{
"matches": ["http://google.com/*"],
"js": ["jquery-3.1.0.min.js", "simply-toast.min.js"],
"css": ["simply-toast.min.css"],
"run_at": "document_end"
}]
}
content.js
...
$.simplyToast('success', 'This is a success message!'); // Line 72
jQuery works fine but I get this error when trying simpleToast content.js:72 Uncaught TypeError: $.simplyToast is not a function .Not sure what I'm missing here.

Wrong Syntax I guess!
$.simplyToast('This is a success message', 'success'); // Line 72

Chrome extension Web Request doesn't show info

I was looking for without success.
I want to get the status of my requests from my extension but I can not get it.
Manifiest
{
"manifest_version": 2,
"name": "Pixel Checker TT",
"description": "This extension validate your pixels and its requests",
"version": "1.6",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"background": {
"persistent": true,
"scripts": ["popup.js"]
},
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": ["sources/js/jquery-3.0.0.min.js","content.js"]
}
],
"permissions": [
"tabs",
"activeTab",
"webRequest",
"webRequestBlocking",
"*://*.mydomain.co/",
"*://*.myotherdomain.co/"
]
}
popup.js or background code
chrome.webRequest.onCompleted.addListener(function(details) {
for (var i = 0; i < details.requestHeaders.length; ++i) {
console.log(details.requestHeaders[i].url);
console.log(details.requestHeaders[i].statusCode);
}
},
{urls: ["<all_urls>"]},
['blocking','requestHeaders']);
The problem is that I dont have errors just aren not printed the info. I also tried to put the info in a div with $('#pixelsFound').text(details.requestHeaders[i].url)
but doesn't work too.