Les nouveautés et Tutoriels de Votre Codeur | SEO | Création de site web | Création de logiciel

seo New Text-to-Speech API for Chrome extensions 2013

Seo Master present to you: Author Photo
By Dominic Mazzoni, Software Engineer

Interested in making your Chrome Extension (or packaged app) talk using synthesized speech? Chrome now includes a Text-to-Speech (TTS) API that’s simple to use, powerful, and flexible for users.

Let’s start with the "simple to use" part. A few clever apps and extensions figured out how to talk before this API was available – typically by sending text to a remote server that returns an MP3 file that can be played using HTML5 audio. With the new API, you just need to add "tts" to your permissions and then write:
chrome.tts.speak('Hello, world!');
It’s also very easy to change the rate, pitch, and volume. Here’s an example that speaks more slowly:
chrome.tts.speak('Can you understand me now?', {rate: 0.6});
How about powerful? To get even fancier and synchronize speech with your application, you can register to receive callbacks when the speech starts and finishes. When a TTS engine supports it, you can get callbacks for individual words too. You can also get a list of possible voices and ask for a particular voice – more on this below. All the details can be found in the TTS API docs, and we provide complete example code on the samples page.

In fact, the API is powerful enough that ChromeVox, the Chrome OS screen reader for visually impaired users, is built using this API.

Here are three examples you can try now:

    TTS Demo (app)
    Talking Alarm Clock (extension)
    SpeakIt (extension)

Finally, let's talk about flexibility for users. One of the most important things we wanted to do with this API was to make sure that users have a great selection of voices to choose from. So we've opened that up to developers, too.

The TTS Engine API enables you to implement a speech engine as an extension for Chrome. Essentially, you provide some information about your voice in the extension manifest and then register a JavaScript function that gets called when the client calls chrome.tts.speak. Your extension then takes care of synthesizing and outputting the speech – using any web technology you like, including HTML5 Audio, the new Web Audio API, or Native Client.

Here are two voices implemented using the TTS Engine API that you can install now:

    Lois TTS - US English
    Flite SLT Female TTS - US English

These voices both use Native Client to synthesize speech. The experience is very easy for end users: just click and install one of those voices, and immediately any talking app or extension has the ability to speak using that voice.

If a user doesn't have any voices installed, Chrome automatically speaks using the native speech capabilities of your Windows or Mac operating system, if possible. Chrome OS comes with a built-in speech engine, too. For now, there's unfortunately no default voice support on Linux – but TTS is fully supported once users first install a voice from the Chrome Web Store.

Now it's your turn: add speech capability to your app or extension today! We can't wait to hear what you come up with, and if you talk about it, please add the hashtag #chrometts so we can join the conversation. If you have any feedback, direct it to the Chromium-extensions group.


Dominic Mazzoni is a Software Engineer working on Chrome accessibility. He's the original author of Audacity, the free audio editor.

Posted by Scott Knaster, Editor
2013, By: Seo Master

seo Six strategies for building a great Chrome extension 2013

Seo Master present to you: Author Photo
This guest post was written by , CTO of Ecquire

Even though the words "browser extension" connote a one-trick feature, today’s browser extensions allow developers to accomplish some pretty amazing things. Entire companies are being funded and sold as extensions and providing serious value to users.

Here’s how you can make your browser extension a formidable product.

1. Use Your Superpowers

Developing an extension gives you advantages you may not have been aware of. Think of your extension as an abnormally powerful front end. I'll name a few features we've especially enjoyed:
  • Let your users install very slickly directly from your home website to increase conversions.
  • List on the Chrome Web Store for tens of thousands of free impressions. (Tip: For maximum exposure and traffic, invest time in beautiful graphic assets.)
  • Use localStorage as a super-easy store. Unlike in regular web applications, localStorage for extensions remains untouched even if users clear their cookies. (For more structured, asynchronous, client-side storage of large amounts of objects, take a look at IndexedDB.)
  • Let Chrome sync your extension across devices, including data you store in chrome.storage.sync.
Extensions are your chance to hack with any site you've wanted to improve beyond the limits of their API. There are many more very powerful advantages browser extensions have - these are just the lesser known ones.

Check out examples and look at what other apps (even silly ones) have done. If you find yourself asking “how did they do that?”, check out the source code.

2. Know What's Going On Inside Your App

Because extensions are front ends on steroids, you have your pick of almost any web analytics software you choose. We recommend choosing an event-based, not a page view-based model because the definition of a page view is hard to interpret in most extensions. Instead, track specific interactions.

We chose Mixpanel, but there's an official Chrome tutorial on using Google Analytics in an extension. The principles of implementation are the same no matter what you choose.

Solid analytics help you answer questions about what's going on inside your app using hard data instead of intuition and opinions. It will also undoubtedly reveal a few unexpected surprises about user behavior.

3. Connect to Third-Party APIs

Good apps avoid reinventing the wheel, and great apps connect users to the services they already like using. Extensions can request permission to connect with any domain. Just because you're an extension doesn't mean you can't use OAuth to authorize those requests.

If your extension has a server backend, then fantastic, you have plenty of resources to help you. If you want to directly make requests from the user's computer, that is completely possible. The initial handshake and exchange of access token is done from a light server, but after that you can save the tokens locally. This allows your extension to run all of its interactions client-side if you'd like to keep things simple.

4. Make Money

Accepting credit cards and making financial transactions via an extension can be just as ironclad and secure as anywhere else. There's no shortage of billing management services that provide hosted payment pages and APIs.

Simply direct users to secure hosted payment pages to accept credit card information, letting the billing service deal with compliance. We use Recurly, which conveniently allows our users to use coupon codes, receive invoices by email, and manage their billing info directly, saving us even more development time and headache.

Hosted payment pages may be simple to implement, but they are pretty powerful (see also Chargify and CheddarGetter). They allow very specific management of your paying customers. Hosted payment pages can make your extension aware of the user's subscription status, to deactivate or activate as appropriate. Your customers’ payment statuses can be accessed with APIs behind the scenes throughout the lifetime of your extensions.

If you prefer a super-streamlined flow for your customers - one where they potentially do not need to enter their credit card information - using a hosted payment page from Paypal or the recently announced Google Wallet for digital goods are your best bets for maximum coverage and quickest checkout.

Using hosted payment systems affords maximum functionality with the least amount of coding and testing - or any server-side billing logic. Most importantly, you have peace of mind that your customer's financial information is secure and compliant. No compromises.

5. Use Frontend Frameworks

Anywhere there's JavaScript, you can use JQuery, BackboneJS and CoffeeScript: any JS library or plugin you love. This applies across the extension architecture, from injected UI in content scripts to any background code. The entire platform is web frontend - you can run anything you would use in a web application.

6. Test All the Freaking Time

Okay, I admit it's a more fun motto to say than to do, but if you're a TATFTer, I have good news for you. Adrian Unger provides a how-to on using Jasmine BDD in browser extensions even in the sub-cockles of your content scripts, even in the context of a live, logged-in webpage.

Peace of mind about your code is important, but it's even more crucial in extensions where you don't control the webpages you may be injecting into. You can use Jasmine to assert that the DOM of your target web sites hasn't changed too much and that your code is still valid out in the wild web.

In summary, just when you thought you knew everything you could do on the web, new doors open up. This is just a small taste of our lessons learned about what puts browser extensions in the league of extraordinary platforms. Like any new platform, I can’t even imagine the innovation that has yet to launch.


is the CTO of Ecquire, a maker of CRM workflow automation software. Capture contacts from anywhere and Ecquire puts it in the right account for you. Read Tal’s guides on Chrome development and startup experiences on the Ecquire blog.

Posted by Scott Knaster, Editor
2013, By: Seo Master

seo Google Chrome at Google I/O 2010 2013

Seo Master present to you: We kicked off Day 1 of Google I/O this year by highlighting the progress of the web platform.

The Day 1 keynote included a number of exciting announcements and demos from the Chrome Team. To demonstrate the power of building with HTML5, Sundar Pichai invited on stage a number of Chrome partners, including Clicker who demonstrated the power of video and highlighted one of the big open questions for the web: the need for a freely available, high quality video codec for the tag. With the support of Mozilla, Opera, and Adobe, we announced the launch of the WebM Project, which makes a high quality video codec freely available to everyone.

We also announced the upcoming Chrome Web Store, which will launch later this year to help make great web applications more discoverable. We showed how rich web apps and content like Sports Illustrated will be discovered, launched, and even purchased from the Web Store when it launches later this year.

In addition to our keynote announcements, the Chrome Team also led a number of sessions throughout both days of the conference, focusing on Chrome, HTML5, and the web as a platform.

Here’s a recap of what was covered in our sessions:
  • Beyond JavaScript: programming the web with native code - Although JavaScript performance is rapidly increasing, there are still applications for which native code is a better choice. Learn about Native Client and how you can use it to build rich applications with all of the advantages and power of the web.
  • Chrome Extensions - how-to - Google Chrome shipped an extensions API in version 4.0. Since last year, new capabilites have been added to the extensions framework, and many people have already written powerful extensions with minimal effort. Find out how to write an extension, and what's coming next in Chrome Extensions.
  • HTML5 status update - Where is HTML5 today? What new features are now broadly supported, what features are on the horizon, and what features are on the chopping block? How do we decide what to implement, what to propose, and what to drop? Find out.
  • Developing web apps for the Chrome Web Store - Google Chrome is a powerful platform for developing web apps. With Chrome web apps, we're making it easier for users to discover and use these apps. Learn how to build and sell apps for the Chrome Web Store.
  • WebM Open Video Playback in HTML5 - The new open VP8 codec and WebM file format present exciting opportunities for innovation in HTML5 . In this session, you'll see WebM playback in action while YouTube and Brightcove engineers show you how to support the format in your own HTML5 site.
  • Google Chrome's Developer Tools - In this session we'll give an overview of Developer Tools for Google Chrome that is a part of the standard Chrome distribution. Chrome Developer Tools allow inspecting, debugging and tuning the web applications and many more. In addition to this overview we would like to share some implementation details of the Developer Tools features and call for your contribution.
  • Developing With HTML5 - This session covers the HTML5 APIs available to Google Chrome and Google Chrome OS applications and Google Chrome extensions. Learn how to design web applications for a Google Chrome OS netbook using the latest web technologies.
  • Using Google Chrome Frame - Google Chrome Frame brings the HTML5 platform and fast Javascript performance to IE6, 7 & 8. This session will cover the latest on Google Chrome Frame, what it can do for you and your customers, how it can be used, and a sneak peak into what's planned next.

In case you couldn’t attend in-person, all the links above include videos and slides from each session. You can also find all the Chrome session videos on this YouTube playlist. Thanks to everyone who showed up this year and made Google I/O such a great event.

2013, By: Seo Master

seo Chrome Extensions for Web Development 2013

Seo Master present to you: The Chrome Developer Tools are great for debugging HTML, JavaScript and CSS in Chrome. If you're writing a webpage or even a web app for the Chrome Web Store, you can inspect elements in the DOM, debug live JavaScript, and edit CSS styles directly in the current page. Extensions can make Google Chrome an even better web development environment by providing additional features that you can easily access in your browser. To help developers like you, we created a page that features extensions for web development. We hope you’ll find them useful in creating applications and sites for the web.


For example, Speed Tracer is an extension to help you identify and fix performance issues in your web applications. With Speed Tracer, you can get a better idea of where time is being spent in your application and troubleshoot problems in JavaScript parsing and execution, CSS style, and more.


Another useful extension is the Resolution Test that changes the size of the browser window, so web developers can preview websites in different screen resolutions. It also includes a list of commonly used resolutions, as well as a custom option to input your own resolution.


With the Web Developer extension, you can access additional developer tools such as validation options, page resizing and a CSS elements viewer; all from an additional button in the toolbar.


Another extension you should check out is the Chrome Editor that allows you to easily code within your browser, so you don’t have to flip between your browser and code editor. You can also save a code reference locally to your computer for later use.

These are just a few of the extensions you can find in our extensions for web development page. You can also look for more in the extensions gallery.

2013, By: Seo Master
Powered by Blogger.