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.
Related
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.
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.
I'm using several constants that are shared between my content.js and popup.js. How can I put them in one file and share them between both?
This does not work, global.js contains the constants
{
"manifest_version": 2,
"name": "Test Extension",
"version": "0.0",
"background": {
"persistent": false,
"scripts": ["global.js", "background.js"]
},
"content_scripts": [{
"matches": ["http://*/*", "https://*/*"],
"js": ["global.js", "content.js"],
"run_at": "document_end"
}],
"browser_action": {
"default_title": "Test Extension",
"default_popup": "popup.html"
},
"permissions": [
"activeTab"
]
}
global.js
var TEST = "test"
content.js/popup.js:
console.log(TEST)
in popup.js it prints TEST is not defined
You still need to add <script type="text/javascript" src="global.js"></script> to the HTML file. I thought it was included by default when you specify it in the manifest.json
I have the following manifest to run on every page load.
The problem is that it is running only when refreshing the page.
The myscript.js will not work when I click on a link and navigate, again, only on refresh.
Why is that?
Thanks
{
"name": "BrowserActionExtension",
"version": "0.0.1",
"manifest_version": 2,
"browser_action": {
"default_title": "That's the tool tip",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": [ "<all_urls>" ],
"js": [ "myscript.js" ],
"run_at": "document_end"
}
],
"permissions": [
"tabs",
"<all_urls>"
]
}
If the page contains frames and the link on which you click does not belong to the top frame you get this behaviour.
Take a look to all_frames
This value is always false, but if you set this to true the script is injected in all frames.
I've spent hours and hours trying to figure out what's wrong with my chrome extension. I know that my function.js code is good because it works with an html page that I link it to, but perhaps it isn't right for chrome extensions?
All help is appreciated
manifest.json
{
"manifest_version": 2,
"name": "Font Find",
"description": "This extension allows you to click on any text, and find out what font it is written in.",
"version": "1.0",
"background": {
"page": "popup.html",
"persistent": true
},
"permissions": [
"activeTab",
"http://*/*",
"https://*/*"
],
"browser_action": {
"default_title": "Find the Font",
"default_icon": "icon.png"//,
// "default_popup": "popup.html"
},
"background": { "scripts": ["jquery.min.js"] },
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"js": [
"function.js"
]
}
]
}
popup.html file (note it isn't set as the popup)
<!DOCTYPE HTML>
<html>
<head>
<!-- <link rel="stylesheet" href="popup.css"/> -->
<script src="jquery.min.js"></script>
<script src="popup.js"></script>
<script src="function.js"></script>
</head>
</html>
function.js file
"use strict";
$("body").append('Test');
document.body.ondblclick = function(event){
//event.stopPropagation();
var target = event.target || event.srcElement;
alert( "What you clicked on:" + $(target).text() + " It's font-family is: " + $(target).attr("font-family") );
}
function.js file
chrome.browserAction.onClicked.addListener(function (tab) {
chrome.tabs.executeScript({
file: "function.js"
});
});
First, edit the manifest.json file. Add this code:
"content_scripts": [{
"matches": [
"http://*/*",
"https://*/*"
], "js": [
"jquery.min.js",
"function.js"
], "run_at": "document_start"
}]
And now, use this code in function.js file.
document.addEventListener("DOMContentLoaded", function() {
document.body.addEventListener("dblclick", function(e) {
var target = e.target;
alert("What you clicked on: " + $(target).text() + " It's font-family is: " + $(target).attr("font-family"));
}, true);
});
I tested this code and it works. I hope it helps.