Found an interesting bug I think.
Make a simple html page with a speech to text input with x-webkit-speech, like this for exemple :
<html><body>
<input type="text" id="speech" x-webkit-speech />
</body></html>
If you open it in chrome and you click the microphone in the input, everything works Ok.
Now, create a plain extension, with "permissions": ["tabs"], and in the popup script somewhere create a panel or detached_panel window pointing to the previous html page. For exemple :
chrome.windows.create({
url: "index.html",
width: 320,
height: 240,
focused: true,
type: "detached_panel"
});
Now click on the microphone in the input : nothing happens, nada.
Is this a known bug ?
Also, I have tested with type="popup" or type="normal" and it works Ok, so the bug seems to be only on panel and detached_panel windows. Also, I have tried to put it in an iFrame inside the panel window but still doesn't work. Note that x-webkit-speech doesn't work either in the extenions bubbles.
Furthemore, I started using the experimental API proposed by Chrome, but they require the experimental api flag to be enabled, which the x-webkit-speech doesn't require.
Thanks for any clue.
Related
With Chrome 27, it seems that extensions that override Chrome's New Tab Page can't take focus away from Chrome's Omnibox like they used to in previous versions of Chrome.
Is there a new way to focus an input box in a New Tab Page, or has this functionality been disabled completely? :(
To test this, create an extension folder with three files:
1. manifest.json:
{
"name": "Focus Test",
"version": "0",
"minimum_chrome_version": "27",
"chrome_url_overrides": {
"newtab": "newTab.html"
},
"manifest_version": 2
}
2. focus.js:
document.getElementById('foo').focus();
3. newTab.html:
<html>
<body>
<input id="foo" type="text" />
<script type="text/javascript" src="focus.js"></script>
</body>
</html>
Then, when you load the extension and open a new tab, the input field does not get focused on the new tab page.
I have also tried adding the autofocus attribute to the input field, but no luck either. The extension's new tab page can't take focus away from Chrome's Omnibox.
Any ideas? Is this a bug or a new "feature"?
ManifestV3 update
This answer is adapted from https://stackoverflow.com/a/11348302/1754517.
This has been tested with both Manifest V2 and V3.
Tested in Google Chrome 99.0.4844.51 64-bit (Windows 10).
Replace the content of focus.js with:
if (location.search !== "?x") {
location.search = "?x";
throw new Error; // load everything on the next page;
// stop execution on this page
}
Add the autofocus attribute to the <input>.
Go to the Extensions page in Chrome and click the Load unpacked button. Choose the folder of your extension.
Open your new tab page. You might see a modal dialogue reading Change back to Google?. Click Keep it to keep your custom new tab page.
Inline Javascript - Manifest V2 only
If you're inlining the Javascript in the HTML file, then you'll need to take some extra steps:
After adding your inline Javascript to your HTML file, open DevTools (F12 key) and observe the error output in the Console. Example output you should see:
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem:".
Either the 'unsafe-inline' keyword, a hash ('sha256-MK0Gypb4mkZTI11eCOtWT+mGYcJNpN5zccvhfeaRb6E='), or a nonce ('nonce-...') is required to enable inline execution.
Select & copy this hash.
Add a line to manifest.json to allow the JS to run, pasting in the hash you just copied between the single-quotes. E.g.:
"content_security_policy": "script-src 'self' 'sha256-MK0Gypb4mkZTI11eCOtWT+mGYcJNpN5zccvhfeaRb6E='"
Go to the Extensions page again. Remove the extension, then re-add it using the Load unpacked button.
Open your new tab page. Your extension should now autofocus on the <input>.
Note inlining only works with Manifest V2; Manifest V3 returns a failure message when attempting to load the extension (even with a properly formed "content_security_policy" object in manifest.json, to replace the Manifest V2 "content_security_policy" string):
Failed to load extension
File C:\path\to\extension
Error 'content_security_policy.extension_pages': Insecure CSP value "'sha256-...'" in directive 'script-src'.
Could not load manifest.
As per the Chrome Extension Documentation,
Don't rely on the page having the keyboard focus.
The address bar always gets the focus first when the user creates a new tab.
See reference here: Override Pages
Here's the solution for Manifest v3
chrome.tabs.onCreated.addListener((tab) => {
if (tab.pendingUrl === 'chrome://newtab/') {
chrome.tabs.remove(tab.id)
chrome.tabs.create({
url: '/index.html',
})
}
})
I saw a pretty old blog which updates the new tab conditionally. However, simply updating the tab does not steal the focus. I had to close the pending tab and open a new one.
Cons: An ugly chrome-extension://akfdobdepdedlohhjdalbeadhkbelajj/index.html in the URL bar.
I have a cheap work around that allows stealing focus from address bar focus. It's not for everyone. I do actually do use this because I want to control a new tab focus just that bad in my own custom new tab solution:
<script>
alert('Use enter key to cancel this alert and then I will control your focus');
document.getElementById('...AckerAppleIsCrafty...').focus()
</script>
USE CASE: I built my own HTML chrome custom tab that has a search input that custom searches my history and bookmarks the way I like it too.
Cash me focusing outside how bout dat?
With Chrome 27, it seems that extensions that override Chrome's New Tab Page can't take focus away from Chrome's Omnibox like they used to in previous versions of Chrome.
Is there a new way to focus an input box in a New Tab Page, or has this functionality been disabled completely? :(
To test this, create an extension folder with three files:
1. manifest.json:
{
"name": "Focus Test",
"version": "0",
"minimum_chrome_version": "27",
"chrome_url_overrides": {
"newtab": "newTab.html"
},
"manifest_version": 2
}
2. focus.js:
document.getElementById('foo').focus();
3. newTab.html:
<html>
<body>
<input id="foo" type="text" />
<script type="text/javascript" src="focus.js"></script>
</body>
</html>
Then, when you load the extension and open a new tab, the input field does not get focused on the new tab page.
I have also tried adding the autofocus attribute to the input field, but no luck either. The extension's new tab page can't take focus away from Chrome's Omnibox.
Any ideas? Is this a bug or a new "feature"?
ManifestV3 update
This answer is adapted from https://stackoverflow.com/a/11348302/1754517.
This has been tested with both Manifest V2 and V3.
Tested in Google Chrome 99.0.4844.51 64-bit (Windows 10).
Replace the content of focus.js with:
if (location.search !== "?x") {
location.search = "?x";
throw new Error; // load everything on the next page;
// stop execution on this page
}
Add the autofocus attribute to the <input>.
Go to the Extensions page in Chrome and click the Load unpacked button. Choose the folder of your extension.
Open your new tab page. You might see a modal dialogue reading Change back to Google?. Click Keep it to keep your custom new tab page.
Inline Javascript - Manifest V2 only
If you're inlining the Javascript in the HTML file, then you'll need to take some extra steps:
After adding your inline Javascript to your HTML file, open DevTools (F12 key) and observe the error output in the Console. Example output you should see:
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem:".
Either the 'unsafe-inline' keyword, a hash ('sha256-MK0Gypb4mkZTI11eCOtWT+mGYcJNpN5zccvhfeaRb6E='), or a nonce ('nonce-...') is required to enable inline execution.
Select & copy this hash.
Add a line to manifest.json to allow the JS to run, pasting in the hash you just copied between the single-quotes. E.g.:
"content_security_policy": "script-src 'self' 'sha256-MK0Gypb4mkZTI11eCOtWT+mGYcJNpN5zccvhfeaRb6E='"
Go to the Extensions page again. Remove the extension, then re-add it using the Load unpacked button.
Open your new tab page. Your extension should now autofocus on the <input>.
Note inlining only works with Manifest V2; Manifest V3 returns a failure message when attempting to load the extension (even with a properly formed "content_security_policy" object in manifest.json, to replace the Manifest V2 "content_security_policy" string):
Failed to load extension
File C:\path\to\extension
Error 'content_security_policy.extension_pages': Insecure CSP value "'sha256-...'" in directive 'script-src'.
Could not load manifest.
As per the Chrome Extension Documentation,
Don't rely on the page having the keyboard focus.
The address bar always gets the focus first when the user creates a new tab.
See reference here: Override Pages
Here's the solution for Manifest v3
chrome.tabs.onCreated.addListener((tab) => {
if (tab.pendingUrl === 'chrome://newtab/') {
chrome.tabs.remove(tab.id)
chrome.tabs.create({
url: '/index.html',
})
}
})
I saw a pretty old blog which updates the new tab conditionally. However, simply updating the tab does not steal the focus. I had to close the pending tab and open a new one.
Cons: An ugly chrome-extension://akfdobdepdedlohhjdalbeadhkbelajj/index.html in the URL bar.
I have a cheap work around that allows stealing focus from address bar focus. It's not for everyone. I do actually do use this because I want to control a new tab focus just that bad in my own custom new tab solution:
<script>
alert('Use enter key to cancel this alert and then I will control your focus');
document.getElementById('...AckerAppleIsCrafty...').focus()
</script>
USE CASE: I built my own HTML chrome custom tab that has a search input that custom searches my history and bookmarks the way I like it too.
Cash me focusing outside how bout dat?
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
I have an extension that I'm provisionally calling "multi-tab" for opening a given set of URLs in multiple tabs. For my personal use, which is to open several stock charts for stocks I'm tracking, I've just hard-coded the URLs. But it seems to me like this is something that others might find useful, and I can't find it among existing extensions. But in order to make it useful to others, I need to have some kind of interface for editing the URLs that you want to open. Here's the Github of what I have so far: https://github.com/aisthesis/multi-tab
So far the behavior is: You click on the icon for the extension, and it just opens the tabs. I'd like to keep that as simple as possible. I also tried using the "commands" API with a hot-key like "Ctrl+Shift+E" for opening some kind of editor interface (for which I think the Stack Exchange question monitor extension is a good model), but I couldn't get that to work, probably because I don't have a background popup for the key combo to bind to. I also tried using an omnibox where the editing menu would come up after you type "multi-tab-edit " or something like that. While I could get the omnibox version to work, but it doesn't seem very user-friendly. What I think would be ideal would be to have Ctrl-click on the icon in the extensions section open a dialog for editing your URLs, but I'm not seeing how the APIs would support that. Please respond if you can give me any pointers on how to make that happen!
Another option would be to open a popup when you click on the icon that would then allow you to choose whether you want to open the URLs you have currently set or to edit those URLs. I don't like that because it creates an additional step in the base use-case of just opening the tabs.
Does anyone have an idea for how one might implement an "editing" interface in a user-friendly way and leaving it so that just clicking on the icon just makes the various tabs open? Or is it possible to open an editor simply when you control-click on the icon?
You can simply set up an option page, with a bunch of HTML input elements, where your users can input the URLs they want to open:
<input type="text" name="url1" value="" />
<input type="text" name="url2" value="" />
<input id="save" type="button" value="Save" />
Then you save all those URLs to the local storage:
$('#save').click(function()
{
var urls = [];
$( "input[type=text]" ).each(function( index )
{
urls.push($(this).val());
});
var items = { "urls": urls };
chrome.storage.local.set(items, function() {});
});
Finally, you get all those URLs on a click on your browser action:
chrome.browserAction.onClicked.addListener(function(tab)
{
chrome.storage.local.get("urls", function(items)
{
var urls = items.urls;
for (var i = 0; i < urls.length; i++)
{
chrome.tabs.create({ url: urls[i]});
}
});
});
I've been making a Google Chrome extension, one that streams an audio file from another site. I use a Google audio player to do this, and it works fine.
The only problem is, the soundtrack stops playing when I leave the extension is closed. Right now, I don't use Java and would prefer to keep it that way, since I have about zero experience in that field. If I need to, I am perfectly willing to use it.
<embed type="application/x-shockwave-flash" flashvars="audioUrl=AUDIO URL HERE" src="http://www.google.com/reader/ui/3523697345-audio-player.swf" width="400" height="27" quality="best"></embed>
This is what I'm using to play my audio files. I need to somehow get this to keep playing in the background page. I've tried making the main background page and the popup page the same; doesn't work. Here's my manifest file, with the popup and background pages one and the same:
"background_page": "Main Code.html",
"permissions": [
"background"
],
"icons" : {
"16" : "KH icon_16.png",
"48" : "KH icon_48.png",
"128": "KH icon_128.png"},
"browser_action" : {
"default_icon" : "KH icon_19.png",
"default_popup": "Main Code.html"
Please help me, I've scoured the web for info on this, and being an amateur programmer, I really need help.
From what I seem to understand. Your problem is that as soon as you leave the extension the audio stops playing. I would suggest that you instead of using background_page, you should add a background script.
Use Manifest version 2.
Add a background script like this.
"background":
{
"scripts": ["background.js"]
}
play your audio files through this background script.
I think this will solve your problem.
Um... I think you mean Javascript and not Java (2 completely different languages - not related in any way what so ever). Next you should get rid of all the spaces in your file names, not only is this terrible practice but your manifest is probably having trouble identify all of the the extensions components.
Finally... It may work to play the audio from the background page. Refer to the Google Chrome Extensions API for what a background page is. The code on the popup is not going to be the same as the code in the background page. To talk between the two refer to the chrome.extension.* package API. For a quick solution here is a socket utility that provides two way communication.