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
Related
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'.
I had integrated Office Web Apps in sharepoint 2010. When Document is selected from document Library in context menu I want to hide Option View in Browser and Edit in Browser Option from Document Library.
Is is possible using jquery or javascript If yes can any tell me how ?
I used following css to hide but it only hide Delet option not View in Browser Option
li.ms-MenuUIULItem[text~=Delete]
{
display: none;
}
So I also Modified it as follows
li.ms-MenuUIULItem[text~=View in Browser]
{
display: none;
}
It also didn't work.
Can anyone help me for that ?
It is better to do it with features than doing it with javascript.
You have to create a feature with a HideCustomAction element in it.
The element structure is like this:
<HideCustomAction
GroupId = "[GroupId]"
HideActionId = "[HideActionId]"
Id = "...."
Location = "....">
</HideCustomAction>
And here is a link that will help you find your required actions Id:
http://www.sharepointarchitects.us/johnholliday/post/0001/01/01/how-to-find-customaction-identifiers/
I have created it using jquery
$(document).ready(function(){
$('.ms-MenuUIPopupBody').live('blur', function() {
var elm = $("div.ms-MenuUIULItem a:contains('View in Browser')");
elm.remove();
$("div.ms-MenuUIULItem a:contains('Edit in Browser')").remove();
});
});
It is hiding menu only on focus or blur or mouseover
I wants it to be hide on load AS soon as i Click on "V" option on right side of document it should hide View in Browser and Edit in browser
When I click on V option ![I wants As soon as i Click on v option right side of test it should hide view in Browser and edit in browser][1]
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);
})
});
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;
});
I was looking for a way to detect the browser extension I am building from my website and I need to alert my users in-case they are viewing my site without it. I have been able to do this in firefox, but I want to know is there a way I can do this in Google Chrome? Even if there is a hack to get this going I am fine.
Sure. Create a content script specific to you site in the extension, and make it add an invisible marker in the DOM, eg:
$('body').append('<div style="display: none;" class="extension_enabled" />');
In the page, set a short timeout to check for this after the document is fully loaded, eg:
$(function() {
setTimeout(function() {
if ($('.extension_enabled').length > 0) {
alert('Installed!');
} else {
alert('Not installed.');
}
}, 500);
});
NOTE: Code in jQuery format for simplicity. You can do it with raw javascript, of course.
The official Google Chrome Extensions Developers' Guide has an item covering exactly this.