How to programmatically open chrome extension popup.html - google-chrome-extension

I have a created a desktop notification using google extension which works great:
icon = '';
var popup = window.webkitNotifications.createNotification(my notification');
icon, 'Awesome title', 'Click here to view more. ');
popup.show();
Is there a way to launch the actual google extension popup.html (as shown on the image below), when the user click on the the desktop notification?
Thanks.

Short answer is that you can't, but if you want to open the popup in a new tab instead, this is how you would do it:
Put this before you call show
popup.onclick = function() {
chrome.tabs.create({url : "popup.html"});
popup.cancel();
}

I wanted to add to the comment that Miscreant posted.
One approach that might work would be to setup a keyboard shortcut for
the pop up in the extension's manifest, then use an executable file to
artificially trigger that keyboard shortcut. See Native Messaging for
more info about how to communicate with an executable file from an
extension
This is how you set up a shortcut key that opens your extension.
...
"commands": {
"_execute_browser_action": {
"suggested_key": {
"default": "Ctrl+Shift+Y"
}
}
Here's the API on 'commands'.

Related

How to make Chrome Extension title bar like Google Hangouts?

This isn't working:
How to build an chrome extension like Google Hangouts
My question is similar to this:
How do I customize the title bar of a popup in a chrome extension?
I used chrome.windows.create({...type:panel}); but its appearance is like this:
Is it possible to customize 'Normal title bar' area ?
codes here.
var createWindow = function (tab) {
if (appWindow) {
chrome.windows.remove(appWindow.id);
}
chrome.windows.create({
tabId: tab.id,
url: 'http://localhost:8080',
left: Math.round(screen.width - 300),
top: Math.round(screen.height - 500),
width: 300,
height: 500,
type: 'panel'
}, function(win) {
appWindow = win;
chrome.tabs.executeScript(appWindow.tabs[0].id, { file: './js/app_inject.js'}, function(){
// console.log('inject executed');
});
});
};
chrome.browserAction.onClicked.addListener(createWindow);
"//localhost:8080" is my local server page.
I believe your (apparently simple) question implies a couple more questions, so I'll try to split that up and address each one separately:
1. Why does my "panel" look different than Hangouts ?
Hangouts opens as a panel (so it is styled as such).
Your "panel" opens as a popup (so it is styled as such).
2. Why does my "panel" open as a popup ?
In order for an extension to be able to open panel-windows, the user must have this (experimental) feature enabled (and of course the underlying OS must support it). If panels are not enabled, all windows of type 'panel' or 'detached_panel' open as type 'popup' (documentation).
3. How can a user enable panels ?
Navigate to chrome://flags/#enable-panels and click Enable.
4. How is it possible for Hangouts to open panel-windows when the flag is disabled ?
Short answer: It is white-listed in the source code.
Longer answer: Take a look at this answer.
5. Can I style the title-bar of a popup ?
Not really. The title-bar displays (among other things) the title of the page, so you can customize that part :)
6. Do I have an alternative ?
If you absolutely need to be able to style your window, you could use a Packaged App. Apps can open frameless windows, so you can create (and style) a title-bar using HTML/CSS.
If you just want to start a hangout and copy a link to that hangout with 1 click, check out this extension (this is apparently still not an easy thing to do with Google+):
https://chrome.google.com/webstore/detail/one-click-google-hangout/aokjakdncnbbfhhammcdkbblmcglpobn

Run content script in scope of a single tab

I'm developing an extension for Google Chrome. I have created an icon for my extension. What I'd like to do, is the following:
A user clicks extension's icon.
A new tab is opened.
Content scripts are run as set in manifest file, but only in this
tab.
I think it's clear, but e.g.: let's say I set in my manifest file a following property:
"content_scripts" : [
{
"matches" : ["http://stackoverflow.com"],
"js" : ["script.js"]
}
]
And let's say I have 2 tabs: the first one was opened manually, and the second one was opened by clicking extension's icon. Now, I open the stackoverflow's index page in both tabs. In the first tab nothing happens, but in the second one the "script.js" script is run.
How can I achieve it? I know I can implement a tab's id checking, but isn't there any simpler way to achieve it?
You shouldn't use the content_scripts entry in the manifest in this case. You can use chrome.tabs.executeScript calls to run the content scripts. You will need to track which tabs you created but that's not hard.
You can have something like this in a background script:
var createdTabs = {};
chrome.browserAction.onClicked.addListener(function() {
chrome.tabs.create( {}, function( tab ) {
createdTabs[tab.id] = true;
}
}
chrome.tabs.onUpdate.addListener(function(tabId, changeInfo) {
if( createdTabs[tabId] && changeInfo.url )
chrome.tabs.executeScript( tabId, {file: 'script.js'} );
}

How to detect tabs change URLs or tabs create on Google Chrome Extension?

I have a question about writing Google Chrome Extension. My goal now is to detect that if a tab is created or a URL of a tab has been changed.
Practically, I want to insert a dictionary .js from a link online to any webpage on Chrome, and the script will run as background.html. For example, if you open the browser and go to your homepage, it will run the script to insert dictionary.js into that page. When a new tab is created or a new page is open, it will run the script too. And when people change tab's url, it will run the script too. How do I detect if the tab changes in such situations? Ok, here is my ... code, i guess, to explain that.
chrome.someFunctionThatDetectTheSituationsAbove(function() {
insertDictionaryScript();//I'd love to have the script of detection, not the insertDictionaryScript();
}
I would appreciate for any idea. Thank you. :P.
[x]
Just add this on your background.js :
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
insertDictionaryScript();
});
chrome.tabs.onCreated.addListener(function(tab) {
insertDictionaryScript();
});
There's also onActivated event:
chrome.tabs.onActivated.addListener(function(tabId, changeInfo, tab) {
insertDictionaryScript();
});
What you are describing is called a content script. You don't need any coding for that, just make a declaration in the manifest file. More about content scripts here.
You can detect new tab creation by adding a listener to the onCreated event.
You can detect the url change of the tab by adding a listener to the onUpdated event.
To detect the tab change in google chrome extensions:
In your background script.js add the below code:
chrome.tabs.onActivated.addListener(function() {
chrome.tabs.query({currentWindow: true, active: true}, function(tabs){
var currentURL = tabs[0].url;
console.log(currentURL);
})
});

Chrome Tab Extensions: getCurrent vs. getSelected?

I'm writing a Chrome extension. As part of the extension, I want to get the URL of the tab that the extension was called from. What's the difference between using:
chrome.tabs.getSelected(null, function(tab) { var myTabUrl = tab.url; });
and
chrome.tabs.getCurrent(function(tab) { var myTabUrl = tab.url; });
?
Method chrome.tabs.getSelected has been deprecated. You should use chrome.tabs.query instead now.
You can't find the official doc for obsolete method chrome.tabs.getSelected. Here is the doc for method chrome.tabs.query.
getCurrent should be what you need, getSelected is a tab that is currently selected in a browser. When they could be different - maybe your extension runs some background cronjob in tabs, so that tab could be not currently selected by a user.
Ok I got it all wrong apparently. getCurrent should be used only inside extension's own pages that have a tab associated with them (options.html for example), you can't use it from a background or popup page. getSelected is a tab that is currently selected in a browser.
As to your original question - you probably need neither of those two. If you are sending a request from a content script to a background page, then the tab this request is being made from is passed as a sender parameter.
For those who is looking for working example of chrome.tabs.query instead of deprecated chrome.tabs.getSelected:
chrome.tabs.query({
active: true,
lastFocusedWindow: true
}, function (tabs) {
var myTabUrl = tabs[0].url;
});

Getting current window on a popup (Google Chrome extension)

I'm building a Google Chrome extension, and I'm trying to get the selected window in a popup. (I'm talking about the popup that shows when you click on the extension icon).
I tried to use the documentation, but I didn't understand it well. Specifically, I tried to use:
chrome.windows.getCurrent(function(w) {
chrome.windows.get(w.id,
function (response){
alert(response.location.href);
});
});
But it didn't work. Any ideas?
Thanks
(sorry if the English is bad).
1) have you added the "tabs" permission to the manifest?
{
"name": "My extension",
...
"permissions": ["tabs"],
...
}
2) It also looks like you should be using the tabs API and not the windows API if you want to know the current URL of the selected tab in the current Window
chrome.windows.getCurrent(function(w) {
chrome.tabs.getSelected(w.id,
function (response){
alert(response.url);
});
});

Resources