I'm trying to build a Chrome Extension for my work that will help me with day-to-day work. Without getting into specifics I'm seeing that it's running on all pages that I load except for company pages. It's also not running on Google.com (which could be an indicator for the former issue).
Note - I tested and it run on Stackoverflow, IMDB, many more, but not Google.com.
I'm wondering is there something wrong with my manifest.json file or perhaps Google and other sites have some tough restrictions for outside JS.
Manifest.json
{
"name": "Screenshot Expander (Alpha)",
"version": "1.0.0",
"description": "Preview screenshots directly in the same page",
"manifest_version": 3,
"author": "Josh Gallant",
"action":{
"default_popup": "index.html",
"default_title": "Screenshot Expander"
},
"content_scripts" : [{
"js" : ["screenshot123.js"],
"matches" : ["*://*/*"],
"run_at": "document_end"
}],
"host_permissions": [
"<all_urls>"
],
"permissions": [
"tabs",
"scripting",
"activeTab"
],
"web_accessible_resources": [
{
"resources": [ "screenshot123.js" ],
"matches": [ "https://*/*" ]
}
]
}
screenshot123.js
function main(){
console.log('hello there');
}
window.onload = main;
Main question - Why is the above code working on most sites, but not google.com?
Any help is appreciated.
Thanks!
Related
While migrating from manifest v2 to v3 facing issue(chrome.action.onClicked.addListener not working/invoking).
I have a manifest.json defined like this
{
"name": "dummy",
"manifest_version": 3,
"version": "5.2.0",
"version_name": "5.2.0",
"description": "The dummy v5.2.0 plugin allows our users to gain instant access to
their metadata and data.",
"action": {
"default_title": "execute.js will run (watch the Chrome DevTools' console)"
},
"content_scripts": [
{
"js": ["content.js"],
"matches": [
"https://*/*",
"http://*/*"
]
}
],
"background": {
"service_worker": "background.js"
},
"permissions": [
"contextMenus",
"tabs",
"scripting",
"storage"
],
"host_permissions": [
"https://*/*",
"http://*/*"
],
"web_accessible_resources": [{
"resources": ["*.html"],
"matches": ["https://*/*","http://*/*"]}]}
and background.js file has this code
chrome.action.onClicked.addListener(function (tab) {
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
setDomain({ tab: tabs[0] });
});});
I'm really lost here and it's extremely hard to debug.This code was working before migrating to manifest v3.
(I will edit this answer once the OP has given us more information)
I have created a test extension with
your manifest.json
your background.js, with setDomain({ tab: tabs[0] }); replaced with console.log("setDomain({ tab: tabs[0] });");
a content.js that only contains the code console.log("content.js");
When I click the action in my test extension, it excutes the code console.log("setDomain({ tab: tabs[0] });");
In other words: The code you have shown us is not enough to diagnose your problem.
We can only help you if you do the following:
Please upload your extension's entire source code to Github or a similar website.
If you don't want to upload your extension's entire source code:
Please create a simplified version of your extension that reproducibly demonstrates your problem.
Then upload the simplified extension's entire source code to Github or a similar website.
This is my first attempt writing a Chrome extension. I added "web_accessible_resources": ["images/icon.png"] to manifest.json because I wanted to access the image from content script. After adding this line, I got the error "Invalid value for 'web_accessible_resources[0]'.
Could not load manifest." I have checked to make sure the file path is correct, where else could I be wrong?
Any help is appreciated.
{
"name": "Bookmark Checker",
"version": "1.0",
"manifest_version": 3,
"permissions": [
"bookmarks",
"activeTab"
],
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches":["https://www.google.com/search?*"],
"js": ["content/content.js"]
}
],
...
"web_accessible_resources": ["images/icon.png"]
}
The syntax for web_accessible_resources in Manifest V3 has changed:
"web_accessible_resources": [{
"resources": ["/images/icon.png"],
"matches": ["<all_urls>"]
}]
The matches key must specify where to expose these resources since Chrome 89.
When developing my extension and testing it by loading unpacked extension I am able to get the correct path.
For example the following code points to one of my images and loads correctly.
theIcon.src = chrome.runtime.getUrl(goatPath); // "chrome-extension://extensionID/img/myImage.png
I have the above code running in both a popup page and content script.
However when I upload to the Chrome Web Store and publish the packed version, I'm unable to access the resource because it is trying to look for it at
chrome-extension://extensionID/chrome-extension://extensionID/img/myImage.png
Popup page error
Failed to load resource: net::ERR_FILE_NOT_FOUND
Content Script error
Denying load of chrome-extension://kjohofijdcbjeanfinadbebghfegbhop/chrome-extension://kjohofijdcbjeanfinadbebghfegbhop/img/myimage.png. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.
Manifest File -
{
"manifest_version": 2,
"name": "Feed the Goat",
"description": "Feed the Goat provides a fun way for you to stay focused so you can get more done.",
"version": "1.5",
"icons": { "16": "img/goat-icon16.png",
"32": "img/goat-icon32.png",
"128": "img/goat-icon128.png" },
"background": {
"scripts": ["event/background.js"]
},
"browser_action": {
"default_icon": "img/goat-icon.png",
"default_popup": "popup/authentication/authentication.html"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content/content.js"]
}
],
"web_accessible_resources": [
"img/goat-icon128.png",
"img/goat-icon256.png",
"img/GarytheGoat-icon128.png",
"img/GarytheGoat-icon256.png",
"img/BillyBuck-icon128.png",
"img/BillyBuck-icon256.png",
"img/UncleUnicorn-icon128.png",
"img/UncleUnicorn-icon256.png"
],
"content_security_policy":"script-src 'self' https://cdnjs.cloudflare.com/ https://www.gstatic.com/ https://*.firebaseio.com https://www.googleapis.com https://use.fontawesome.com; object-src 'self'",
"permissions": [
"tabs",
"activeTab",
"<all_urls>",
"identity",
"idle",
"notifications",
"storage"
],
}
Thanks
In your manifest.json try to add following:
"web_accessible_resources": [
"img/*"
]
Also, make sure that in your dist(build) folder there is img folder with images.
"goatPath" should be img/myImage.png
and funnction should have all upper-case for URL like this
chrome.runtime.getURL(goatPath)
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 am working with a chrome extension . I want to inject js script in all tab. I am using this manifest.json :
{
"name": "ABC",
"version": "0.0.1",
"manifest_version": 2,
"background": {
"scripts": [
"src/background/background.min.js"
],
"persistent": true
},
"browser_action": {
"default_icon": "icons/128.png",
"default_title": "ABC",
"default_popup": "src/browser_action/index.html"
},
"permissions": [
"tabs",
"http://*/*",
"https://*/*",
"<all_urls>"
],
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["./src/inject/inject.min.js"],
"css": ["./css/inject.min.css"],
"all_frames": true
}]
}
And my inject.js is like this :
(function() {
console.log("Hello");
});
I am getting all log from all tab except the tab of the chrome setting (eg : chrome://extensions/:id , chrome://history etc).
Am I missing something in manifest.json or chrome disables the feature of injection in settings page ?
Thanks in advance.
Indeed, you can't inject code into chrome:// pages. They contain control elements / code that can modify the browser in ways that an extension is not allowed to.
Chrome resolves this by simply not allowing permissions to be set for chrome:// URLs, and <all_urls> does not include it.
However, you could use Override Pages to replace some of them (well, History page at least) completely.