Develop Reference

Is there any explanation why $ or jQuery is not working in chrome extension development?

I have downloaded the jquery compressed, production jQuery 3.5.1 slim build file in project root directory, and added in manifest file, then tried to run jQuery functions using $ sign, I tried to do it in content script and background script, but I got error Uncaught ReferenceError: $ is not defined.
manifest.json
"name": "Project",
"version": "1.0",
"description": "Lorem Ipsum is simply dummy text of the printing",
"permissions": ["activeTab", "declarativeContent", "storage","https://*/"],
"options_page": "options.html",
"background": {
"scripts": ["background.js","jquery.js"],
"persistent": true
},
"page_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
}
},
"icons": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
},
"content_scripts":[{
"matches" : ["https://www.amazon.com/s?*"],
"js" : ["content.js","jquery.js"]
}],
"manifest_version": 2
}
content.js
chrome.runtime.sendMessage({productLink: 'test', search_url: url.href }, function(response) {
console.log(`message from background: ${JSON.stringify(response)}`);
});
function isProductUrl(url){
let arr = url.split('/');
if(arr[4] == 'dp')
return true;
else
return false;
}
$.ajax({
url: "www.localhost.com/search",
context: document.body
}).done(function() {
$( this ).addClass( "done" );
});

Chrome Extension Browser Action not Appearing

I am trying to make an extension for Google Chrome, and in the early stages of coding it, the icon for the browser action would appear, but now that I've added an action to it, it won't show up. The manifest.json is here:
{
"manifest_version": 2,
"name": "Test",
"description": "Test extension"
"version": "0.1",
"background": {
"scripts": ["background.js"],
"browser_action": {
"default_icon": "icon.png"
}
}
}

You are missing a , after the description entity, and put a } at wrong place.
{
"manifest_version": 2,
"name": "Test",
"description": "Test extension",
"version": "0.1",
"background": {
"scripts": [
"background.js"
]
},
"browser_action": {
"default_icon": "icon.png"
}
}

chrome Extension Development, JS issue.

Okay so I'm a JS noob, and I can admit that. I've been reading up and learning how to make extensions for chrome. So I want to have a content script and browser action, but I can't get it to run for the life of me. It's probably something dumb I'm doing something wrong, but any help is appreciated.
{
"update_url": "https://clients2.google.com/service/update2/crx",
"manifest_version": 2,
"name": "*********",
"version": "0.3",
"description": "*****************************",
"icons": { "16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png" },
"browser_action": {
"default_icon": {
"19": "icons/19x19.png",
"38": "icons/38x38.png"
},
"default_title": "That's the tool tip",
"default_popup": "popup.html"
}
"content_scripts":
[
{
"matches": ["*://*/*"],
"js": ["content.js"],
"run_at": "document_end"
}
]
}

I can't write a comment,
Perhaps a comma is missing here
"default_popup": "popup.html"
}, <-- HERE!!
"content_scripts":

has no method getBackgroundPage

I am trying to learn about chrome extensions, and I think I am missing something. I want to upload a file using background script...here is my manifest:
"manifest_version": 2,
"name": "myTest",
"description": "Upload file",
"version": "0.1",
"icons": {
"64": "64.png",
"16": "16.png",
"32": "32.png",
"128": "128.png"
},
"background":{
"scripts": ["justupload.js"],
"persistent": true
},
"content_scripts": [
{
"matches": ["http://my.url/page.html"],
"js": ["link.js"]
}
],
"permissions": [
"http://my.url/page.html","background"
]
And link.js
function sendbg(){
var BGPage = chrome.extension.getBackgroundPage();
BGPage.senddata(document.getElementById('files'));
}
document.getElementById('files').addEventListener('change', sendbg, false);
When files changes, I receive the following error:
Uncaught TypeError: Object #<Object> has no method 'getBackgroundPage'
Thanks

Communication via content scripts needs to be done with message parsing.
check this and this

extension's popup.html does not load properly on Chrome

i have made one chrome extension and below is my manifiest.json file
{
"update_url":"http://clients2.google.com/service/update2/crx",
"name": "Example",
"version": "1.0",
"manifest_version": 2,
"description": "Example Dictionary",
"browser_action": {
"default_icon": "16x16.png",
"icons": ["128x128.png"],
"default_title": "Dictionary",
"default_popup": "index.html"
},
"icons": {
"16" : "16x16.png",
"48" : "48x48.png",
"128": "128x128.png" },
"content_scripts": [
{
"matches": ["<all_urls>"],
"css" : ["jqm-demos.css","jquery.mobile.min.css"],
"js": ["index.js","jquery.js","jquery.mobile.min.js"]
}
]
}
now when i load popup.html page is looking like
but when i load extension it will be look like

Your manifest file should look like this:
{
"update_url":"http://clients2.google.com/service/update2/crx",
"name": "Example",
"version": "1.0",
"manifest_version": 2,
"description": "Example Dictionary",
"browser_action": {
"default_icon": "16x16.png",
"icons": ["128x128.png"],
"default_title": "Dictionary",
"default_popup": "popup.html"
},
"icons": {
"16" : "16x16.png",
"48" : "48x48.png",
"128": "128x128.png"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"css" : ["jqm-demos.css","jquery.mobile.min.css"],
"js": ["index.js","jquery.js","jquery.mobile.min.js"]
}
]
}
According to your snapshot, you should assign "popup.html" to default_popup property. This field means which page do you want to be shown in popup dialog when user clicked the browser action icon.
Hope this is helpful for you.