Tag Archives: extensions

Chrome, HTML5, JavaScript, webdev

Chrome Extension For Enterprise Internal Usage

Chrome ExtensionsAt the beginning of the year, I’ve worked with a big organization that wanted to avoid the automatic suggestions Chrome is making in the omnibox (=the top field in Chrome, where you type searches and see the url).

Their main requirement was the need to allow employees to type a word and get the internal site that they are use to see. For example, the user will type ‘sale’ and Chrome will redirect them to the internal portal of sales. If you won’t modify Chrome it will run a google search on ‘sale’ and the results will be something like:

Screen Shot 2013-03-11 at 5.02.05 PM

The good news is that with this little extension you will be able to control the redirect of the users to the right internal location. Let’s jump into code.

This is the code of our manifest file that describe the extension


{
"name": "Omnibox customization example",
"description" : "To use, type 'get' plus a search term into the Omnibox.",
"version": "1.1",
"background": {
"scripts": ["background.js"]
},
"omnibox": { "keyword" : "get" },
"manifest_version": 2
}

view raw

manifest.json

hosted with ❤ by GitHub

Important to notice is that we setting the keyword ‘get’ in order to activate this extension. You can choose something shorter if you like. Another aspect is the “manifest_version”: 2 which making sure we are compatible with the latest spec.

This is the code of our background page


// each time the user updates the text in the omnibox this event
// is fired and we will use it to suggest search terms for
// our internal users.
chrome.omnibox.onInputChanged.addListener(
function(text, suggest) {
suggest([
{content: "CRM" , description: " fetch the internal CRM"},
{content: "ERP" , description: " fetch the internal ERP"},
{content: "sales", description: " fetch the lastest sales report"}
]);
});
// This event is fired with the user accepts the input in the omnibox.
chrome.omnibox.onInputEntered.addListener(
function(text) {
if (text.indexOf("/") < 1) {
text += "/";
}
if (text.indexOf("http") < 0) {
text = "http://our-internal-portal/&quot; + text;
}
alert('We are taking you to: "' + text + '"');
navigate(text);
});
function navigate(url) {
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.update(tab.id, {url: url});
});
}

view raw

background.js

hosted with ❤ by GitHub

Here we will listen to the events of omnibox.onInputChanged and omnibox.onInputEntered in order to execute our logic.

Another point you might want to consider is to go to:

chrome://settings/ -> Advanced ->  and then to disable these options:

  • Use a web service to help resolve navigation errors
  • Use a prediction service to help complete searches and URLs typed in the address bar
  • Predict network actions to improve page load performance

It doesn’t matter if you are working in a startup of few people or a big organization with 2.2M employees (e.g. Walmart). In both cases, you probably have internal network and  internal systems that your users will love to access with few keywords like: CRM, ERP, Sale, Marketing, QA etc’.

Happy coding & Happy Passover.

Standard
Chrome, HTML5, JavaScript, webdev

GDL-IL On Bootstrap Chrome Extensions

GDL-IL on ExtensionsThis week we spoke with Alex Wolkov from extensionizr.com fame on Chrome extensions and how/when/why you should use them. During these 30min we covered these main points:

  • What is it an extension? If you wish to add functionality to the web app/sites you like? Well, this is the way to do it while using your front-end knowledge (HTML, JS, CSS) to add features to web app/sites that you are working with.
  • What about compatibility with other browsers? Crossrider.com (another startup from Israel) provide you wish this functionalty. We showed them in this GDL-IL Extension show
  • What are the best tools? Continue reading →
Standard
Chrome, HTML5, JavaScript

Chrome Extensions Updated Features

In this Google Developer Live episode I covered some of the new elements you wish to pay attention when you are starting to develop your Google Chrome Extension. If you don’t know what is an extension and why it’s great way to improve Chrome, try this true 101 tutorial first. As you (might) know, there is a new version for the manifest file that include few improvements. The first basic change is to add this simple declaration:

manifest_version: 2

This is a mandatory and if you have a current extension in the Chrome web store I suggest you update it to include it. The second bold change in the manifest file is the ability to make it more secure. For this we have to define what is our extension’s Contact Security Policy. In the demo case that I’ve showed, it will look like that: Continue reading →

Standard
Chrome, HTML5, JavaScript, webdev

GDL-IL on Chrome Extensions And Backbone.js In The Real World

Today I’ve spoke on GDL-IL (=Google Developer Live Israel) with Ron Reiter on his work at Any.Do and how he leverage backbone.js to create this useful chrome extension. The main points we covered during our talk:

  • Chrome Extensions– How you start developing them and why you will want to do it.
    • Extensions are small software programs that can modify and enhance Chrome. The best part is that you write them using web technologies such as HTML5, JavaScript, and CSS. Here is the code for the example extension I’ve wrote as ‘short cuts’ to Chrome internal pages.
  • Ron gave us a short description on backbone.js and what are the main components in this MV* framework. You can learn more at: http://documentcloud.github.com/backbone/
  • We talked about Any.do extension and Ron gave a nice overview of the code he used for the sync layer.
  • Few tips for extensions developers:
    • How to inspect an extension: open the popup and right click inside of it. It will give you the option to open chrome devtools (with the ‘inspect element menu item). In cases, where you don’t have a popup – you can always use chrome://extensions and click on ‘inspect background page’.
    • If you have some logic you wish to test without the extension (or not inside it) you can always run QUnit (or any other unit test framework) on a page that will be a proxy to your popup’s index.html file.

Enjoy and feel free to join us every week on WED 14:00 Israel time at https://developers.google.com/live/


Standard
Chrome, HTML5, webdev

Google Developers Live IL And Shana Tova!

shana tovaToday we lunch GDL IL. What is it? Google developer live is GDL and IL is our famous short for Israel. It is going to be a weekly show on WED 14:00 (so mark your calanders please). We are going to talk about the latest and greats news in technology. From Android to HTML5 and back to Cloud, Google APIs and anything that is interesting for developers. As ‘startup nation’ we will hosts some of the cool, interesting/amazing startups that will tell their story and will share some of their real life experience. For the first show that is focus around Chrome extensions, I had a pleasure to interview Tal from Equire (a CRM Chrome extension that integrates with Gmail and making your life better). We talked about the life of a web developer that choose to build a product in Chrome (extension and/or App). Since Tal is working from The Hub we covered what is unique about this ‘working space’ and how to be productive in such an environment. One of the key questions I’ve asked was something like: “What are the top 5 things to keep in mind when we are coming to build a chrome extension?” Tal answered:

  • Don’t rush to do the same things you always do when first building an app, think about the new architecture, understand it, it’s a different mindset, it’s not just a regular web app. The major difference is the limited ‘screen’ you have and some strong APIs – so use it smartly.
  • LocalStorage… give you a lot of power to save state/data of users.
  • Metrics – measure everything so you could improve over time and give more insight to your users.
  • APIs – There are many APIs that are available only inside Chrome so learn them and use them!
  • Very challenging UX issue – not a blank canvas like a web app. You have an option to give notifications and be ‘infront of your users’ but there is a delicate balance to strike to make sure you don’t get uninstalled.

There are many more things we covered… Some of these are covered in this post “Six Strategies for building great extensions“. However, if you want all the good stuff, you will need to watch it until the end when our next week guest will show up 😉

We finish the episode with 3 things/tools that Tal recommend.

  • Mixpanel – An analytic tool that answer any question you have about your code/users. You should start early and get a feel for it. The nice part is that you do not need any backend.
  • CoffeeScript – take a week, learn it, it will give you back 3 months of your year.
  • Backbone – especially for chrome extensions. It was a simple for Tal to start and be productive with it.

Until next time… Enjoy and Shana Tova!

Standard
Chrome, HTML5, JavaScript, webdev

Chrome Extensions – The New Event Pages

Since the first days of Chrome extensions it was clear that they are very powerful way to extend your browser and make it do stuff you care about. However, while it was good, we knew that it can get better… and this is why we have in dev channel the ‘Event Pages’. Let’s start by defining what are those pages:

  • Background pages – give your extensions the ability to have a single long-running script to manage some task(s) in the background. This can be a certain state of your app or long pulling of information that you wish to show the user (e.g. amount of unread emails).
  • Event pages – are very similar to background pages, with one important difference: event pages are loaded only when they are needed. When the event page is not actively doing something, it is unloaded, freeing memory and other system resources. Please remember this feature is currently only in dev mode.

It seems that with Event Pages our Chrome will be able to  reduce the memory foot print that is used by some idle extensions. It’s an important evolution from the state of background pages that run all the time. An event page only runs when it is handling events. Once an event page becomes idle, it is unloaded, freeing memory until the next time it’s needed. To help event pages support some important use cases, we’re also have new APIs.

  • The alarms API allows an extension to wake itself up at set times, to support features like: cron jobs type of activity, periodically syncing, anything you wish to do over time in specific timing.
  • chrome.runtime new events let extensions know when they have been installed, or when their event page is being unloaded. It is also giving the developer an option to have a ‘last error’ handler.
  • chrome.declarativeWebRequest – A declarative version of the webRequest API lets extensions do network interception without the need for a background page at all. It also works much faster than the chrome.webRequest API because you can register rules that are evaluated in the browser rather than the JavaScript engine which reduces roundtrip latencies and allows for very high efficiency.

Final Notes

  • Learn more from the event page documentation.
  • There is a good source for more information on Chrome Extensions in Chromium blog
  • There are so many option to use the new event pages with the bluetooth API…
  • Btw, @rem did it again with a new (amazing) version of JSbin – Go check it out and see how great logos ‘steal’ the show… Why I’ve added it here? because it’s a powerful online tool that let you test your app/extension and share your code before you upload it to Chrome web store. I’ve used both jsbin and jsfiddle in order to get feedback on some short code.
Standard
Chrome, HTML5, JavaScript, webdev

Tutorial: Getting Started With Google Chrome Extensions

Chrome extensions are very powerful way to make Chrome (even) better. They give you (=the developer) a lot of power to extend the functionality of the browser and gain more productivity and power in daily tasks. In this tutorial we will learn how to create a basic extension that give you the power to open all the special information pages that Chrome offers. For the ones that wish to see code of a more complicated extension that does some networking and notification – You might want to have a look at the work of my friend Mr. Smus on ‘Stackoverflow notifier‘. Ok, let’s start to role.

Getting started with your first extension

We will take for example the case of opening some Chrome internal pages. I’ve wrote this extension more then a year ago because I wanted ‘one-click’ from many interesting internal pages that chrome give developers that want to have a look at some internal parts. For example:

Browser Action or Page Action

We could choose that the user will see our extension all the time with a little button that will be place on the right side of the browser or to have our activation icon popup inside the address bar (the omni box) only when the user get to the page that our extension is working on. In our example we want the user to be able to activate the extension all the time so we will go with browser action.

The first thing we need to write is a short manifest file that describe our extension. You can see we declaring some trivial fields like: name, version, icon and more important ‘permissions’. This will give the user a warning dialog during the installation process to warn about the permissions that our extension will have. It’s good practice to use as little as possible since it will improve the confidence users will feel – thus, you will have more installations. Another good tip is to invest the time and effort to use great icons/graphics. It will also improve the user experience.

manifest.json
{
  "name": "Chrome Short Cuts",
  "version": "0.1",
  "description": "Show short cuts and tips on Chrome",
  "icons": { 
	"48": "app-icon-48.png"
   },
  "background_page": "background.html",
  "permissions": [
    "contextMenus"
  ],
  "browser_action": {
    "default_title": "Display short cuts and tips",
    "default_icon": "toolbar-icon20.png",
    "popup": "popup.html"
  }
}

After we have our manifest file we need to code (fun time) the logic/data/ui of our extension. Here is our simple code of popup.html:

<!doctype html>
<html>
<head>
<meta name="author" content="Ido Green">
<!-- move it to another file -->
<style>
html {
width: 350px;
height: 600px !important;
}
</style>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css&quot; />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script&gt;
<script src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script&gt;
<script>
// start the party
$(document).ready(function() {
$("#ext").click(function() {
chrome.tabs.create({url: "chrome://extensions/"});
});
$("#down").click(function() {
chrome.tabs.create({url: "chrome://downloads/"});
});
$("#set").click(function() {
chrome.tabs.create({url: "chrome://settings/"});
});
});
</script>
</head>
<body>
<div data-role="page" id="home" data-theme="a">
<div data-role="header" data-theme="b" >
<h1>Chrome ShortCuts</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-theme="d" data-filter="true">
<li>
<a href="#" id='ext' data-icon="gear">
<img src="ext.png" class="ui-li-icon"/>
Extensions
</a>
</li>
<li>
<a href="#" id='set'>
<img src="setting.png" class="ui-li-icon"/>
Settings
</a>
</li>
<li>
<a href="#" id='down'>
<img src="down.png" class="ui-li-icon"/>
Downloads
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
view raw ChromeShortCuts.html hosted with ❤ by GitHub

After we wrote some code, it’s time to upload the extension to our chrome and test it. You can do it by going to: chrome://chrome/extensions/ and click on the button ‘load unpack extension’. You can see it below:

Once you click on the button you need to navigate to the directory that contain the manifest file and your html/js/css files. Once you click on ‘select’ the new extension will be added to the list of extensions and you should see its button on the toolbar (right side of it). You will continue to work and improve your functionality… and once you are happy with the results it’s time to publish your work to the Chrome Web Store. I’ve wrote about this process in the past here: How to get your web app and/or extension into the Chrome Web Store.

Is it simple or what?
Please let me know if you have any thoughts on the process and how we can improve it. Also, if you have good (to great) ideas to extensions – please share them…

Final notes

  • You can set an option page so your users will be able to set their preferences. In our simple case, there is no point.
  • Background pages –  answer a common need to have a single long-running script to manage some task or state in the background. For example: check the page for certain keywords, links, check status of some web service etc’.
  • How to OAuth2.0 from extensions
  • A great source for extension developers is this guide.
Standard