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/*"
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'm making a simple chrome extension for a project. I am making an extension that blocks certain URL's(social media etc) to make studying more efficient. I'm not very good in JS but I want to learn. I had some ideas that maybe it could either block the website or just draw something in a div blocking its content. Also, maybe I could input an URL into popup.html to specify the blocked website. Saving data in firebase. Also, I read that maybe its easier to use declarativeWebRequest but not quite sure how to use it.
Manifest.js
"name": "StudyBuddy",
"description": "Helps you study by blocking distracting websites",
"version": "2.0",
"permissions": [
"webRequestBlocking",
"webRequest",
"activeTab",
"tabs",
"http://*/*",
"https://*/*"
],
"content_scripts" : [{
"matches": ["<all_urls>"],
"js" : ["background.js"],
"css" : ["styles.css"]
}],
"browser_action": {
"default_title": "Blocks websites",
"default_popup": "popup.html"
},
"manifest_version": 2
background.js
console.log("Loaded extension");
function blockRequest(details) {
return {cancel: true};
}
function updateFilters(urls) {
if(chrome.webRequest.onBeforeRequest.hasListener(blockRequest))
chrome.webRequest.onBeforeRequest.removeListener(blockRequest);
chrome.webRequest.onBeforeRequest.addListener(blockRequest, {urls: ["*://*.facebook.com/*", "*://*.facebook.net/*"]}, ['blocking']);
}
At the moment my extension doesnt block anything.
Ok, your code has two issues :
Your manifest.json didn't specify background.js, so that code wasn't running.
You didn't actually call the updateFilters function from anywhere.
I corrected both those issues and this extension works fine for me, it blocks Facebook as expected.
In general I suggest you do some more reading of the documentation for extensions as you try to get started, especially the parts on background pages and event pages.
manifest.json: (note that I don't have access to your popup html/css so I had to remove that section from the manifest).
{
"name": "StudyBuddy",
"description": "Helps you study by blocking distracting websites",
"version": "2.0",
"permissions": [
"webRequestBlocking",
"webRequest",
"activeTab",
"tabs",
"http://*/*",
"https://*/*"
],
"background" : {
"scripts": [
"background.js"
]
},
"manifest_version": 2
}
background.js
console.log("Loaded extension");
function blockRequest(details) {
return {cancel: true};
}
function updateFilters(urls) {
if(chrome.webRequest.onBeforeRequest.hasListener(blockRequest))
chrome.webRequest.onBeforeRequest.removeListener(blockRequest);
chrome.webRequest.onBeforeRequest.addListener(blockRequest, {urls: ["*://*.facebook.com/*", "*://*.facebook.net/*"]}, ['blocking']);
}
updateFilters();
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" ]
}
Content scripts usually list the exact URL or a blanket acceptance of certain types of URl's Example below is for every webpage. I want the "matches" to be a data set.
"manifest_version": 2,
"name": "Getting started example",
"description": "This extension shows a Google Image search result for the current page",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html "
},
"permissions": [
"activeTab",
"https://ajax.googleapis.com/"
],
"content_scripts": [
{
"matches": ["*://*/*"]
}
]
You can list the urls you want to use as an array:
"content_scripts": [
{
"matches": [
"http://www.google.com/*",
"http://stackoverflow.com/*"
]
}
]