I want the value of checkbox in chrome extension using jquery, but it
is giving me error:
"$ is not defined"
I download the jquery file and save in folder and giving path of jquery file in manifest.json but, still same error is coming. So I want to know what is correct way to include jquery file.
I write like this :
{
"name": "Chrome Extension Test",
"version": "1.0",
"description": "Chrome extension to investigate Etsy product listings.",
"permissions": [
"storage",
],
"browser_action": {
"default_icon": {
"16": "images/get_started16.png"
},
"default_popup": "background.html",
"icons": {
"16": "images/get_started16.png"
},
"default_title": "Seller Tools"
},
"background": {
"scripts": [
"background.js", "js/jquery/jquery.js"
],
"persistent": false
},
"manifest_version": 2
}
The whole code I am writing in background.js, but when I write
Jquery(including $) for any functionality so it's giving me error that "$
is not defined" and I am facing very difficult. It is also not
allowing me to write .
You are doing it almost correctly, the only thing you need to fix is the script order. You are using jQuery in your content script, so jQuery should be loaded first:
{
"name": "Chrome Extension Test",
"version": "1.0",
"description": "Chrome extension to investigate Etsy product listings.",
"permissions": [
"storage",
],
"browser_action": {
"default_icon": {
"16": "images/get_started16.png"
},
"default_popup": "background.html",
"icons": {
"16": "images/get_started16.png"
},
"default_title": "Seller Tools"
},
"background": {
"scripts": [
"js/jquery/jquery.js", "background.js"
],
"persistent": false
},
"manifest_version": 2
}
You can include it in the head tag of your HTML document and not in the .js or .json file
<head>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
</head>
Then you can use jquery any where in your HTML document
Related
I'm designing a Google Chrome extension. My goal is to have an image inserted into the body of the website that the user is looking at. When I try it out, I get two errors: "Service worked registration failed" and "Uncaught ReferenceError: document is not defined".
I've tried using a try and catch system, a different JavaScript wrapper, adjusting the "permissions" & "host-permissions", adding "minimum_chrome_version", adding "web_accessible_resources", and more. Nothing has worked so far. Here's my code:
manifest.json:
{
"name": "blah",
"description": "blah",
"version": "1.0",
"manifest_version": 3,
"icons": {
"16": "icon.png",
"32": "icon.png",
"48": "icon.png",
"128": "icon.png"
},
"action": {
"default_popup": "popup.html"
},
"minimum_chrome_version": "93",
"background": {
"service_worker": "background.js"
},
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["background.js"],
"css":["popup.css"]
}],
"permissions": [
"storage",
"activeTab",
"scripting"
],
"host_permissions": [
"<all_urls>"
],
"web_accessible_resources": [
{
"resources": ["ezgif-3-9576363471.gif"],
"matches": ["<all_urls>"]
}
]
}
background.js:
const img = document.createElement("img");
img.src = chrome.runtime.getURL("ezgif-3-9576363471.gif");
document.body.append(img);
background-wrapper.js:
try {
importScripts("background.js");
} catch (e) {
console.error(e);
}
To summarize, I'm trying to figure out how to let document be defined, and how to properly use service-worker. Thanks in advance!
Answer given by #wOxxOm in the comment sections. Not sure how to mark as resolved without posting an answer.
"Service worker doesn't have document so you can't use it there. You can do it in a content script or in the action popup."
"Don't load service worker anywhere at all. The only place where it should be declared is manifest.json. You don't need a service worker for the popup, so in this case you can remove it everywhere. You need popup.js and load it in popup.html. Note that the popup is a separate window so it has its own separate devtools: right-click inside the popup and select "inspect" in the menu."
So I tried to create a new Chrome extension for the Chrome web store, and everything seemed to upload and publish correctly.
However now when I try to load the page for the extension, it is broken.
Chrome gives me this error in the console:
POST https://chrome.google.com/webstore/ajax/detail?hl=en-US&gl=US&pv=20170811&mce=atf%2Cpii%2Crtr%2Crlb%2Cgtc%2Chcn%2Csvp%2Cwtd%2Cnrp%2Chap%2Cnma%2Cc3d%2Cncr%2Cctm%2Cac%2Chot%2Ceuf%2Cmac%2Cfcf%2Crma%2Crae%2Cshr%2Cesl%2Cigb&id=gpgcbiaclhpaiknckdfdpbjkdgfkimmo&container=CHROME&_reqid=706656&rt=j 404 ()
And I get the error message:
There was a problem loading the item. Please refresh the page and try again.
As far as I can tell, my manifest.json is correct:
{
"name": "Chinese Personalized Colors",
"version": "0.0.0.1",
"short_name": "CPC",
"manifest_version": 2,
"description": "Color code individual Chinese characters",
"options_ui": {
"chrome_style": true,
"page": "options.html"
},
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*", "file:///*/*", "\u003Call_urls>"],
"css": ["mystyles.css"],
"js": ["jquery-1.7.2.min.js", "highlight_class_version.js", "content.js"],
"all_frames": true
}
],
"permissions": ["storage", "http://*/*"],
"background": {
"scripts": ["dict.js", "main.js", "background.js"]
},
"browser_action": {
"default_title": "CPC"
},
"icons": {
"128": "cpc-128px.png",
"48": "cpc-48px.png",
"16": "cpc-16px.png"
},
"author": "My Name",
"web_accessible_resources": ["css/*", "js/*", "images/*"]
}
All the images and all the files above exist in the zip uploaded to Google.
I tried logging out and logging back in as this was recommended advice by some people.
What could be wrong? Could it just be that the app hasn't been published for long enough to work correctly? The stack trace isn't really telling me much and I can't find any documentation on recent uploads causing an error like this anywhere.
It started working with no uploaded changes on my part. As far as I can tell, sometimes it takes time for an app to propagate to the Web Store, even when the listing appears.
I am learning how to write webextensions.
so I'm copying "beastify" extension from here from scratch.
But my copied version's installation failure.
I don't know why installation is failure.
There are same directory structure, same meaning code, same picture file.
I suppose there are causes of installation failure in manifest.json.
my manifest.json:
{
"manifest_version": 2,
"name": "Beastify",
"version": 1.0,
"description": "add a browser action icon to the toolbar. Click the button to choose a beast. The active tab's body content is then replaced with a picture of the choosen beast.",
"icons": {
"48": "icons/beasts-48.png"
},
"permissions": [
"activeTab"
],
"browser_action": {
"default_icon": "icons/beasts-32.png",
"default_title": "Beastify",
"default_popup": "popup/choose_beast.html"
},
"web_accessible_resources": [
"beasts/frog.jpg",
"beasts/turtle.jpg",
"beasts/snake.jpg"
]
}
The value of version must be string.
Please replace "version": 1.0, to "version": "1.0",.
I wanted to create a Chrome Extension for starters. I'm a bit stuck because I do not know how to make my extension run in the background.
I have researched an answer for my issue but I haven't identified a suitable solution.
The logic of my extension is in AngularJS controller files.
I do not know how to create the background.js file to communicate with my AngularJS controller files or even if it's necessary to have one.
I would like the extension logic to run even when the popup does not appear in view (e.g. modHeaders app).
The manifest file is:
"manifest_version": 2,
"name": "Chrono",
"version": "1.1",
"description": "Reminder",
"browser_action": {
"default_icon": "images/timerIcon.png",
"default_popup": "index.html",
"default_title": "ChronoBip"
},
"background": {
"scripts": ["background.js"],
"persistent": false
},
"permissions": [
"background",
"tabs" ]
}
If you need more info, please tell me.
Instead of running separate .js file(background.js), try running your controller JS file as your background scripts. See if it works.
Here I placed my controller(myAppCtrl.js) file in background.
"manifest_version": 2,
"name": "Chrono",
"version": "1.1",
"description": "Reminder",
"browser_action": {
"default_icon": "images/timerIcon.png",
"default_popup": "index.html",
"default_title": "ChronoBip"
},
"background": {
"scripts": ["app/controllers/myAppCtrl.js"],
"persistent": false
},
"permissions": [
"background",
"tabs" ]
}
I am making a really simple extension, but I am having troubles with making my inject-files actually being injected. I have a css file and a js file. None is injected.
Here is my manifest:
{
"name": "CSGO500.COM BOT",
"description": "The bot bets on the different colors depending on which bot you choose. Just set your bet amount as normal and start the bot. Reload page to stop bot",
"version": "1.0",
"content_scripts": [
{
"matches": ["http://csgo500.com"],
"css": ["mystyles.css"],
"js": ["inject.js"]
}
],
"browser_action": {
"default_title": "Choose your desired bot",
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"manifest_version" : 2
}
Any Ideas on what might be wrong?
Try changing the matches to this: "https://csgo500.com/*"