I have a Chrome Extension project, the structure looks like this:
project/
dist/
index.html
manifest.json
When I go More Tools -> Extensions -> Load Unpacked Extensions
I choose the root of the project, and it works! But I can't figure out how it knows to load dist/index.html? The manifest.json file doesn't say anything about dist/index.html, so how does Chrome know how to load the extension?
I built this extension a few months ago, and now I can't figure out how it works lol.
the manifest.json file looks like this verbatim:
{
"manifest_version": 2,
"name": "Suman Generator",
"description": "This extension allows the user to generate test skeletons.",
"version": "1.223",
"browser_action": {
"default_icon": "icon.png"
},
"options_page": "options.html",
"options_ui": {
"page": "options.html",
"chrome_style": true
},
"devtools_page": "aspects/dev-tools/dist/suman-dev-tools.html",
"optional_permissions": [
"<all_urls>"
],
"permissions": [
"management",
"activeTab",
"webNavigation",
"storage",
"*://*/",
"http://*/",
"https://*/",
"background",
"browser",
"tabs",
"identity",
"identity.email",
"https://www.googleapis.com/",
"pageAction",
"notifications",
"clipboard",
"clipboardWrite",
"clipboardRead",
"unlimitedStorage",
"webRequest",
"userinfo",
"webRequestBlocking",
{
"socket": [
"tcp-connect:*:*"
]
}
],
"web_accessible_resources": [
"modal-iframe.html"
],
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"omnibox": {
"keyword": "suman:chrome"
},
"oauth2": {
"client_id": "5461307462-7geu9374.apps.googleusercontent.com",
"scopes": [
"https://www.googleapis.com/auth/userinfo.profile",
"https://www.googleapis.com/auth/chromewebstore.readonly"
]
},
"key": "MIIBC57LwMgUdRxfY4I40oAiKy57o3tWF/A1BrTNY0nQIDAQAB",
"short_name": "Suman Short Name",
"offline_enabled": true,
"background": {
"page": "background.html",
"persistent": true
},
"content_scripts": [],
"content_security_policy": "script-src 'self' https://plus.google.com 'unsafe-inline' 'http' 'https' 'unsafe-eval' '*'; object-src '*';"
}
Related
Am looking to migrate a manifest V2 extension to V3, but concerned extension might be disabled due to change in manifest permissions. My original plan was to create a new beta extension with existing V2 code and perms, install it from the chrome store locally, then update to manifest V3 perms and see what happens, but chrome store no longer accepts new V2 extensions.
Either the official documentation is purposely vague on the matter of permissions, or I missed something. Other SO questions I see are very specific. Hoping someone with more experience sees this and might be able to spot right away if anything may trigger with the manifest upgrade below. Ideally it's a smooth process given were already requesting a broad match on one of the content script blocks, and the permission list is also reduced.
Current manifest V2 (non pertinent values redacted)
{
"manifest_version": 2,
"name": "...",
"short_name": "...",
"description": "...",
"version": "1.8.0",
"background": {
"page": "background.html"
},
"content_scripts": [
{
"matches": ["*://*.example.com/*",
"*://example2.co/*",
"*://*.example2.com/*",
"http://www.example3.com/*", "https://www.example3.com/*"],
"css": [],
"js": ["js/content_script1.min.js"],
"run_at":"document_end"
},
{
"matches": ["http://*/*", "https://*/*"],
"exclude_matches": [
"*://example2.co/*",
"*://*.example2.com/*",
"*://*.example3.com/*"
],
"css": [],
"js": ["js/content_script2.min.js"]
}
],
"browser_action": {
"default_icon": "images/icon.png",
"default_popup": "popup.html",
"default_title": "..."
},
"permissions": [
"activeTab",
"background",
"storage",
"tabs",
"notifications",
"http://*/",
"https://*/"
],
"content_security_policy": "script-src 'self' https://ssl.google-analytics.com https://static.example.com https://api.example.com https://plugin.example.com https://example.com https://s3.us-west-2.amazonaws.com; object-src 'self'",
"externally_connectable": {
"matches": ["*://example.com/*"]
},
"icons": { ... },
"web_accessible_resources": ["/*.png", "/*.svg"]
}
New manifest V3
{
"manifest_version": 3,
"name": "...",
"version": "2.0.0",
"description": "...",
"minimum_chrome_version": "93",
"permissions": [
"storage",
"alarms"
],
"host_permissions": [
"*://*/*"
],
"web_accessible_resources": [
{
"resources": [
"/assets/*"
],
"matches": [
"*://*/*"
]
},
{
"resources": [
"chunks/*-*.js",
"ui/content-script/index.js"
],
"matches": [
"https://*/*",
"http://*/*",
"*://*/*"
]
}
],
"action": {
"default_title": "...",
"default_popup": "ui/popup/index.html",
"default_icon": { ... }
},
"icons": { ... },
"background": {
"service_worker": "service-worker.js",
"type": "module"
},
"content_scripts": [
{
"js": [
"ui/content-script/import-index.js"
],
"matches": [
"https://*/*",
"http://*/*"
],
"run_at": "document_end"
}
],
"externally_connectable": {
"matches": [
"*://example.com/*"
]
}
}
[!["manifest_version": 2,
"icons": {
"16": "/images/icon16.png",
"48": "/images/icon48.png",
"128": "/images/icon128.png"
},
"browser_action": {
"default_icon": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
},
"default_popup": "/screens/popup.html"
},
"permissions": \["tabs", "storage", "webNavigation"\],
"content_scripts": \[
{
"js": \["popup.js", "websites.js"\],
"matches": \[
"<all_urls>"
\]
}
\],
"background": {
"scripts": \["background.js"\],
"persistent": false
},
"content_security_policy": "script-src 'self' https://ajax.googleapis.com https://stackpath.bootstrapcdn.com; object-src 'self';"
}
I don't know why my chrome extension icon isn't showing. I saved all the icons into the images folder hence the /images. it is giving me the blue puzzle piece in the middle Is there something wrong with my code?
This example is working on my browser. I don't know why your manifest json starts with [![. Maybe this is the problem. I'm not sure. Can you edit this example according to your json file?
{
"manifest_version": 2,
"name": "Test",
"description": "Test",
"version": "1.0",
"browser_action": {
"default_icon": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
},
"default_popup": "popup.html"
},
"permissions": [
"activeTab"
]
}
Try copy-pasting this into your manifest.json file. You have loads of artefacts that might cause issues, I also removed the default_icons key which isn't necessary in my opinion. Also removed the backslash / before the image folder-paths.
{
"name": "Some extension",
"manifest_version": 2,
"icons": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
},
"browser_action": {
"default_popup": "/screens/popup.html"
},
"permissions": ["tabs", "storage", "webNavigation"],
"content_scripts": [{
"js": ["popup.js", "websites.js"],
"matches": [
"<all_urls>"
]
}],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"content_security_policy": "script-src 'self' https://ajax.googleapis.com https://stackpath.bootstrapcdn.com; object-src 'self';"
}
I had the same issues. I opened the png file(s) with paint and resaved them and it worked. So please verify your png files.
I am trying to get the local IP address of the device but when I add the permission system.network I am getting the warning
'system.network' is only allowed for packaged apps, but this is a extension.
What does it mean by packaged app and if it will work after publishing, how can I test the extension locally?
manifest.json
{
"manifest_version": 2,
"name": "Fetcher",
"version": "1.0.1",
"description": "Internet download manager",
"icons": {
"128": "icon_128.png",
"48": "icon_48.png",
"16": "icon_16.png"
},
"background": {
"scripts": [
"detectors/audio_detector.js",
"background.js"
]
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["app.js"]
}
],
"permissions": [
"<all_urls>",
"system.network"
]
}
I have created a new chrome extension and installed it in developers mode.It is working fine in my laptop. But in some other laptops, the options button is disabled. Please help.
I am unable to share the full code but this is how the manifest.json file looks like:
{
"name": "Asana Actual vs Estimation",
"version": "0.0.1",
"manifest_version": 2,
"description": "Add tags to task if the actual hours exceeds the estimated value",
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"default_locale": "en",
"content_scripts": [{
"matches": ["<all_urls>"],
"all_frames": true,
"js": ["js/jquery/jquery.js","js/content.js"],
"css": ["css/styles.css"]
}],
"options_page":"options.html",
"permissions": [
"activeTab",
"<all_urls>",
"storage"
],
"content_security_policy": "script-src 'self' https://www.gstatic.com/; object-src 'self'",
"browser_action": {
"default_icon": "icons/icon16.png"
}
}
Thank you!
Its working. This line was not there
"options_page":"options.html"
in manifest.json. Adding that line solved the problem.
I'm sure that it is I tried with/without BOM and I still get this error :
{
"manifest_version": 2,
"default_locale": "en",
"name": "__MSG_ext_name__",
"description": "__MSG_ext_description__",
"version": "1.6.0",
"icons": {
"16": "icon_16.png",
"48": "icon_48.png",
"128": "icon_128.png"
},
"browser_action": {
"default_icon": "icon_19.png",
"default_popup": "popup.html"
},
"background": {
"page": "background.html"
},
"options_page": "options.html",
"permissions": [
"tabs"
],
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"js": [
"scripts/content.js"
],
"run_at": "document_start",
"all_frames": true
}
]
}
I used a program to mass convert all my files in UTF-8, now it works, I think as 方 觉 said, the problem was coming from another file than the manifest.