With the following code I try to open a mailto: link in a tab if the user clicks on the Chrome extension icon. However, upon click on the icon, no action is being performed.
manifest.json
{
"manifest_version": 2,
"name": "Extension",
"description": "Description",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png"
},
"permissions": [
"tabs"
]
}
popup.js
chrome.browserAction.onClicked.addListener(function tab) {
var emailUrl = "mailto:address#domain.com";
chrome.tabs.create({ url: emailUrl });
};
There are multible issues with your code:
You never require you popup.js.
You JavaScript code is invalid.
I recommend using an eventPage to trigger the E-Mail link:
manifest.json
{
"manifest_version": 2,
"name": "Extension",
"description": "Description",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png"
},
"background": {
"scripts": ["eventPage.js"],
"persistent": false
}
}
eventPage.js
chrome.browserAction.onClicked.addListener(tab => {
chrome.tabs.create({ url: 'mailto:address#domain.com' })
})
Related
I need to close a specific tab in Google Chrome.
The behaviour is that an extension open up URL after she loaded and this can't be avoid.
This doesn't work :
#manifest.json
{
"name": "Close Tab Helpx Adobe",
"description": "Close the url http://www.example.com",
"version": "0.1",
"manifest_version": 2,
"app": {
"background": {
"scripts": ["background.js"],
"persistent": false
}
},
"icons": {
"16": "close-tab-helpx-adobe-16.png",
"128": "close-tab-helpx-adobe-128.png"
},
"permissions": [
"tabs"
]
}
#background.js
chrome.tabs.onUpdated.addListener(function(tab) {
if(tab.url=="http://www.example.com") {
chrome.tabs.remove(tab)
}
});
In developper mode, i can see Uncaught TypeError: Cannot read property 'onUpdated' of undefined
As you can see, i'm a beginner.
Do you know how to achieve this ?
EDIT:
I also tried :
#background.js
chrome.tabs.onActivated.addListener(function(activeInfo) {
chrome.tabs.get(activeInfo.tabId, function(tab){
if(tab.url=="http://www.example.com") {
chrome.tabs.remove(tab);
}
});
});
chrome.tabs.getCurrent(function(tab){
if(tab.url=="http://www.example.com") {
chrome.tabs.remove(tab);
}
});
chrome.tabs.query({currentWindow: true, active: true}, function(tabs){
if(tabs[0].url=="http://www.example.com") {
chrome.tabs.remove(tabs[0]);
}
});
The error is the same, only the property name change onActivated, getcurrent or query
Thanks to wOxxOm (and his patience), here is a code which do the job :
#manifest.json
{
"name": "Close Tab Helpx Adobe",
"description": "Close the url http://www.example.com",
"version": "0.1",
"manifest_version": 2,
"background": {
"scripts": ["background.js"],
"persistent": false
},
"icons": {
"16": "close-tab-helpx-adobe-16.png",
"128": "close-tab-helpx-adobe-128.png"
},
"permissions": [
"tabs"
]
}
#background.js
chrome.tabs.onCreated.addListener(function(tab) {
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
if(tab.url=="http://www.example.com") {
chrome.tabs.remove(tab.id);
}
});
});
So, i have my answer.
To go further ...
Haibara Ai says "Please be aware chrome.tabs.onUpdated will also fired for iframes, if a page contains many iframes, each completed iframe will trigger the event though you have checked : https://stackoverflow.com/a/36818991/2241806"
I'm looking to create a "new tab" extension like Panda or the Product Hunt Extension: the user can open a new tab with my website inside, with an hidden url.
I've generated my package with the awesome Extensionizr and here is my manifest.json :
manifest.json
{
"name": "My app",
"version": "0.0.1",
"manifest_version": 2,
"description": "My awesome app",
"homepage_url": "http://myapp.com",
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"default_locale": "en",
"background": {
"scripts": [
"src/bg/background.js"
],
"persistent": false
},
"permissions": [
"tabs",
"http://myapp.com/*"
]
}
My background.js come from this answer, the problem seems really similar.
background.js
chrome.browserAction.onClicked.addListener(function(activeTab) {
var newURL = "http://myapp.com";
chrome.tabs.create({ url: newURL });
});
I'm still getting this error when I try to run the background page from the extension settings : Uncaught TypeError: Cannot read property 'onClicked' of undefined
And when I open a new tab, Google Chrome took the advantage and display me a google search page.
I do it wrong, and I don't know how/where/why
You're completely off-track. You don't want to open a (simple) new tab, you want to replace the "New Tab page".
Daniel's answer correctly explains why your code does not work, but it won't do what you wanted.
To replace Chrome's New Tab page, you need to use Override Pages:
"chrome_url_overrides" : {
"newtab": "myPage.html"
},
Inside that myPage.html, you can add an <iframe> for your remote content.
That's because you need to register the browser action in the manifest. Here is your manifest with the browser action added at the bottom.
{
"name": "My app",
"version": "0.0.1",
"manifest_version": 2,
"description": "My awesome app",
"homepage_url": "http://myapp.com",
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"default_locale": "en",
"background": {
"scripts": [
"src/bg/background.js"
],
"persistent": false
},
"permissions": [
"tabs",
"http://myapp.com/*"
],
"browser_action": {}
}
Here are the browser action docs: https://developer.chrome.com/extensions/browserAction
I need to know how to display a pop up window when an extension is installed.What I am trying to ask is that when I install my extension,at that moment itself, a popup window should be opened asking for a username and password.How can I do that?I am not familiar with this issue.
Here is my manifest.json
{
"name": "Calpine Extension",
"version": "1.0",
"description": "Log on to calpinemate",
"manifest_version": 2,
"browser_action": {
"default_icon": "icon_128.png"
},
"background": {
"persistent": false,
"scripts": ["background.js"]
},
"browser_action": {
"default_title": "Calpine Extension",
"default_icon": "calpine_not_logged_in.png"
},
"permissions": [
"*://blog.calpinetech.com/test/index.php",
"alarms",
"notifications"
],
"web_accessible_resources": [
"/icon_128.png"]
}
Try this:
chrome.runtime.onInstalled.addListener(function (details) {
if (details.reason == "install") { //reason ( enum of "install", "update", or "chrome_update" )
//Show the PopUp
}
});
http://developer.chrome.com/extensions/runtime.html#event-onInstalled
I have made an extension to my website.It navigates to my home page which is my login page.When the user log on to my site,the extension icon must appear green and when user log out, the icon should appear red. Please someone help me. I have been trying these two days, but I am not getting how to do it.
Here is my manifest.json file:
{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"manifest_version": 2,
"browser_action": {
"default_icon": "icon_128.png"
},
"background": {
"scripts": ["background.js"]
}
}
Here is my background.js file:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.create({'url': "http://www.example.com"});
});
Here is my manifest.json:
{
"name": "Calpine Extension",
"version": "1.0",
"description": "Log on to calpinemate",
"manifest_version": 2,
"browser_action": {
"default_icon": "icon_128.png"
},
"background": {
"persistent": false,
"scripts": ["background.js"]
},
"browser_action": {
"default_title": "Test Extension",
"default_icon": "calpine_not_logged_in.png"
},
"externally_connectable": {
"matches": ["http://calpinemate.com"]
}
}
One solution is to communicate the login status from your webpage to your extension (as explained here).
From your webpage you have to send messages to the extension to inform it about the user's login status.
Once the user successfully logs in, make sure you let the extension know:
chrome.runtime.sendMessage(
<your-extension-id>,
{status: 'LOGGED_IN'});
Once you detect that the user's session has ended (either expired or due to manually logging out), make sure you let the extension know:
chrome.runtime.sendMessage(
<your-extension-id>,
{status: 'LOGGED_OUT'});
From your extension listen for messages from the webpage and update accordingly, e.g. change the extension's icon. You'll need two icons (e.g. red.png for indicating logged-out user and green.png for indicating logged-in user) and the source code below:
background.js:
var url = '<your-webpage-url>';
// Listen for external messages (messages from web-pages).
chrome.runtime.onMessageExternal.addListener(function (msg, sender) {
if (sender.url === url) {
// OK, this page is allowed to communicate with me.
if (msg.status === 'LOGGED_IN') {
// Cool, the user is logged in.
chrome.browserAction.setIcon({path: 'green.png'});
} else if (msg.status === 'LOGGED_OUT') {
// How sad, the user is logges out.
chrome.browserAction.setIcon({path: 'red.png'});
}
}
});
manifest.json:
{
"manifest_version": 2,
"name": "Test Extension",
"version": "0.0",
"background": {
"persistent": false,
"scripts": ["background.js"]
},
"browser_action": {
"default_title": "Test Extension",
"default_icon": "red.png"
},
"externally_connectable": {
"matches": ["<your-webpage-url>"]
}
}
U can keep 2 icon 1 in red and other in green and track session if login then show green icon else red
I need to create a simple chrome extension which when clicked have to navigate to that website.I have been searching long.But I couldn't find out.Please help me.
Here is my manifest.json file
{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"manifest_version":2,
"browser_action": {
"default_icon": "icon_128.png"
},
"background_page": "background.html",
"permissions": [
"tabs"
]
}
this is my background.html
<script>
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.create({'url': "http://calpinemate.com"});
</script>
I am just trying to navigate into my site.But it is not working.Anyone please help me.I only have these two files in my directory and an image icon_128.png.Please help me
background_page is no longer supported in manifest_version 2. Instead use the new format. You can also remove the tabs permissions value since chrome.tabs.create doesn't require it.
{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"manifest_version": 2,
"browser_action": {
"default_icon": "icon_128.png"
},
"background": {
"scripts": ["background.js"]
}
}
Move background.html to background.js, and remove the <script></script> tags.
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.create({'url': "http://calpinemate.com"});
});
Maybe it is because you are missing theclosibg }) in your background page.
Besides, you don't need any permissions for what you want and it is recommended to use anon-persistent background page (a.k.a. event page).
E.g.:
background.js:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.create({ "url": "http://calpinemate.com" });
});
manifest.json:
{
"manifest_version": 2,
"name": "Test Extension",
"description": "...",
"version": "0.0",
"background": {
"persistent": false,
"scripts": ["background.js"]
},
"browser_action": {
"default_title": "Test Extension"
"default_icon": "icon_128.png"
}
}
BTW, since you seem to be interested in changing the extension icon, you can take a look into chrome.browserAction.setIcon().
Below is an example that toggles the extension icon when the user clicks on the browser-action (you can adapt it according to your specific needs).
background.js:
var icons = ["red.png", "green.png"];
chrome.browserAction.onClicked.addListener(function(tab) {
var iconIdx = localStorage.getItem("iconIdx");
var newIdx = iconIdx ? (parseInt(iconIdx) + 1) % 2 : 1;
chrome.browserAction.setIcon({ path: icons[newIdx] });
localStorage.setItem("iconIdx", newIdx);
});