The popup.html file is not opening when I click the extension button. The chrome extension is also changing the newTab through the main.html file. But the popup does not show, neither does the "inspect Pop Up" button. Why is this happening?
Manifest.json:
{
"name": "Name",
"description": "Add description",
"version": "0.1.9.2",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab"
],
"chrome_url_overrides" : {
"newtab": "main.html"
},
"background": {
"scripts": ["jquery-2.2.3.min.js", "background.js"],
"persistent": false
},
"icons": { "16": "icon16.png",
"24": "icon24.png",
"32": "icon32.png",
"48": "icon48.png",
"64": "icon64.png",
"128": "icon128.png",
"256": "icon256.png",
"512": "icon512.png"
},
"permissions": [
"activeTab",
"https://ajax.googleapis.com/",
"storage",
"tabs",
"http://*/*",
"https://*/*"
],
"browser_action": {
"default_title": "app"
},
"manifest_version": 2
}
Popup.html:
<!doctype html>
<html>
<head>
<style type="text/css">
body {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
TEXT TEXT TEXT
</body>
</html>
You have 2 browser_action sections in your manifest:
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
...
"browser_action": {
"default_title": "app"
},
When the manifest is parsed, it's not a syntax error* but the second one overwrites the first one. So you no longer have a default_popup.
You should merge them into one key:
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html",
"default_title": "app"
},
* Technically, duplicate keys are not disallowed by the JSON standard: SHOULD but not MUST have no duplicate keys; as such, implementation-dependent.
Related
I'm trying to write a Chrome extension where part of the action is changing style of elements to those provided in css file. CSS content is internal for extension and not not downloaded from anywhere. It is exactly in the same location as any other file for extension.
files are following:
manifest.json
{
"name": "Test extenstion",
"description": "Test Extension!",
"version": "1.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"action": {},
"permissions": ["storage", "activeTab", "scripting"],
"host_permissions": ["*://*/*"],
"icons": {
"16": "/images/get_started16.png",
"32": "/images/get_started32.png",
"48": "/images/get_started48.png",
"128": "/images/get_started128.png"
}
}
background.js:
chrome.action.onClicked.addListener((tab) => {
chrome.scripting.executeScript({
target: {tabId: tab.id},
files: ['detection-script.js']
});
});
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
if (changeInfo.status === 'complete') {
chrome.scripting.insertCSS({
target: { tabId: tabId },
files: ['./elements-highlight.css']
})
.then(() => {
console.log("INJECTED THE FOREGROUND STYLES.");
})
.catch(err => console.log(err));
}
});
In detection-scrpt.js I'm just running script that updates style of each element to style defined in elements-highlight.css. This part is working, I can see styles of element on the website being updated.
What I cannot get is why CSS is not injected? I figured that I had to add host_permissions to remove error:
Extension manifest must request permission to access the respective host.
But beside that I'm not sure what might be missing.
EDIT based on wOxxOm's comment
Dropped only chrome.tabs.onUpdated and updated manifest.json like this
{
"name": "Getting Started Example",
"description": "Build an Extension!",
"version": "1.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"action": {},
"permissions": ["storage", "activeTab", "scripting"],
"host_permissions": ["*://*/*"],
"icons": {
"16": "/images/get_started16.png",
"32": "/images/get_started32.png",
"48": "/images/get_started48.png",
"128": "/images/get_started128.png"
},
"content_scripts": [
{
"matches": ["*://*/*"],
"css": ["elements-highlight.css"]
}]
}
I don't see any change in behavior. Still no change in CSS, beside adding new class to elements.
I get this error in Firefox:
There was an error during the temporary add-on installation.
Error details ▼
File red_apples.zip does not contain a valid manifest
This is the extension I'm trying to port. Here's the manifest:
{
"manifest_version": 2,
"name": "Red Apples",
"permissions": [
"tabs", "activeTab"
],
"background": {
"persistent": false,
"scripts": [
"background.js"
]
},
"version": "0.0.0.2",
"icons": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
},
"browser_action": {
"default_icon": "icon16.png",
"default_title": "Red Apples",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": [
"script.js"
]
}
]
}
At the bottom of this tutorial it says there's a 99% chance it works without modification, if it passes the test here. But it passes the test and still doesn't work.
I get the manifest error both for the version packed with Chrome, and for the version just compressed as .zip.
What am I missing that popup is not being shown?
In an extension folder I have four files. I load that folder as extension. I can see the icon, but when I click on it popup is not shown. Why?
content_script.js: empty (just added so that I can load the extension)
icon.png: It is shown, when I load extension.
manifest.json:
{
"name": "Popup poc",
"version": "1.4",
"description": "Simple popup example",
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content_script.js"]
}
],
"page_action": {
"default_name": "Display Map",
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"manifest_version": 2
}
popup.html:
<!doctype html>
<html>
<head>
<title>Popup</title>
</head>
<body>
This is body
</body>
</html>
Replace "page_action" with "browser_action" in your manifest.json. You should be able to see the popup on all pages this way.
It's possible duplicate of: Chrome extension popup not showing anymore
But it seems like I don't have enough reputation points to flag it for that.
Popups only for certain hosts URL patterns
(Edit)
If you want your popup available only on certain sites (for example, only on Google), then you need to specify declarativeContent permissions in your manifest, and also a little setup in a background script.
So, your manifest.json would look something like this:
{
"name": "Popup poc",
"version": "1.4",
"description": "Simple popup example",
"permissions": ["declarativeContent"],
"content_scripts": [
{
"matches": ["https://www.google.com/*"],
"js": ["content_script.js"]
}
],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"page_action": {
"default_name": "Display Map",
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"manifest_version": 2
}
Your background.js would look like this:
chrome.runtime.onInstalled.addListener(function() {
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [new chrome.declarativeContent.PageStateMatcher({
pageUrl: {hostEquals: 'www.google.com'},
})
],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
});
This code is largely from the Getting Started Tutorial.
I recently submitted a chrome extension, but when I try to download the extension it says that the manifest file is invalid. Not sure why.
Here is my manifest :
{
"name": "My chrome extension",
"version": "0.2",
"description": "My chrome extension description.",
"permissions": [ "activeTab", "tabs", "contextMenus" ],
"background": {
"persistent": false
},
"browser_action": {
"default_icon": "favicon.png",
"default_popup": "index.html"
},
"manifest_version": 2
}
Is there a tool online where I can validate a Chrome extension manifest file?
You are missing scripts in your background item.
{
...
"permissions": [ "activeTab", "tabs", "contextMenus" ],
"background": {
"scripts": [
"path/to/js/script",
],
"persistent": false
},
"browser_action": {
"default_icon": "favicon.png",
"default_popup": "index.html"
},
...
}
OR just remove the background item from your manifest if you are not planning on using it.
{
...
"permissions": [ "activeTab", "tabs", "contextMenus" ],
"browser_action": {
"default_icon": "favicon.png",
"default_popup": "index.html"
},
...
}
--
You don't need tools to test the manifest, go to the chrome://extensions page, enable developer mode on the top right and load your extension, it will tell you the error and how to solve it.
I've tried everything but still not showing the popup at all when I click the browser action button of my extension. Clicking the icon doesn't show the popup.html located at the directory src/cbrowser_action/popup.html, the console doesn't give me any helpful reasons why it failed. I read a lot of the other answers but it all seem to point to manifest which I can't see anything missing.
here's my manifest
{
"name": "Tool",
"version": "0.0.1",
"manifest_version": 2,
"description": "",
"homepage_url": "",
"icons": {
"16": "icons/on.png",
"48": "icons/on.png",
"128": "icons/on.png"
},
"default_locale": "en",
"background": {
"page": "src/bg/background.html",
"persistent": true
},
"browser_action": {
"default_icon": "icons/on.png",
"default_title": "browser action demo",
"default_popup" :"popup.html"
},
"permissions": [
"<all_urls>", "management", "tabs", "webRequest","webNavigation", "webRequestBlocking", "storage"
],
"content_scripts": [
{
"run_at": "document_end",
"matches": [
"<all_urls>"
],
"js": [
"src/lib/jquery.min.js","src/inject/content.js"
],
"css": [
"src/inject/content.css"
]
}
]
}
popup.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="popup.js"></script>
<title></title>
</head>
<body>
asdfsup
</body>
</html>
popup.js
console.log('loaded');
The output of console.log is not going to be on the page console. The console scope for the popup is the popup itself by right-clicking the browser action icon and selecting "Inspect popup".
The logging output should be visible there.