Pages

Sunday, August 26, 2012

GWT Chrome extension using version 2 manifest

Hi everyone,

A while ago I wrote a small post about how to create Chrome extension using GWT, claiming
you could use GWT to make powerful Chrome extension.
One of the comments was regarding the usage of the manifest version.
When you write a Chrome extension, you must provide with a file called manifest.json which
serves as some kind of descriptor file to your extension.
It contains all sorts of things, such as the name of the extension, description, icon, action,
javascript files involved, and so on...

One of the entries in that file is the version entry.
As for today Chrome supports the current version - 2, and also supports (for the moment)
version 1.
However, this is changing, and Google already announced that they will stop supporting version 1
in the future (see http://developer.chrome.com/extensions/manifest.html#manifest_version), due
to security reasons.

So I was asked whether it was possible or how is it possible to deploy the GWT extension with the
version 2 attribute in the manifest.json file.

Version 2, is stricter in terms of security than version 1. Especially when it comes to using external JavaScript files.
You can read about security concerns over here:
http://developer.chrome.com/extensions/content_scripts.html#security-considerations
http://developer.chrome.com/extensions/xhr.html

One of the problems I faced, was the inline scripting I had (JavaScript showing inside the HTML).
That problem came not only on my "Hosting" HTML file, but also on the compiled outputs of GWT,
where HTML file which was needed was created and contained JavaScript code.
When that happened, I couldn't execute the extension on Chrome using version 2 in the manifest.json file.

I wrote in response to a comment someone left regarding this problem, that in case Google would have a way to separate JavaScript files from HTML, then problems would be solved.
Back then, I didn't see such options for the GWT compiler.

However, after doing some more searching, I found out that it does exist (!).
And so by adding a simple line in the .gwt.xml file of the application, you can compile all
your GWT application output into a single JavaScript file. Meaning - no HTML files containing
inline JavaScripts.

The line one needs to add is:
...
<add-linker name="sso" />
...

I added it to my Quickpik.gwt.xml file, and so when you run the GWT compiler, you get at the end
one JavaScript file containing the entire code of your app. Awesome!

You can access the entire code on Github and download it from there:
https://github.com/nirgit/Quickpik

You can simply click on the "Downloads" on the right hand of the screen, in order to download
the repository as a ZIP file.

In case you're a GIT user, my suggestion is that you just clone the repository. It's really small.
Simply open your GIT shell and type:
git clone https://github.com/nirgit/Quickpik.git

The extension is already ready to be used in Chrome, and you can deploy it by opening Chrome's
Tools -> Extensions tab, and checking the "Developer mode" box.
Afterwards, you will be able to deploy the extension by selecting the "Load unpacked extension..."
option and selecting the war directory of Quickpik.

I am hoping this is somewhat useful.
I think GWT is an absolutely great tool, and one that can be a lot of fun writing Chrome Extensions.

Until next time!




8 comments:

  1. Did you manage to run your application in hosted mode? I am using the Eclipse plugin and have yet to find out how to run in hosted mode.

    ReplyDelete
  2. Hey! Thanks for the comment.
    You are right and I should have mentioned this issue.
    All you need is to comment the
    <add-linker name="sso" /> line in the Quickpik.gwt.xml file in order to be able to run it in dev mode.
    Thanks for the "heads-up"!

    Nir

    ReplyDelete
  3. Is it possible to debug the load module in hosted mode?I am using the Eclipse plugin and searching how to debug in hosted mode.

    ReplyDelete
  4. Hi, I forked the project in GitHub, as you suggest. I then created an Eclipse project and configured Chrome to load the extension. It works like a charm. :-)

    However, when I inspected the code, I realize that everything is being done at client side and, therefore, GWT RPC is not being used at all. The main problems of manifest 2 are with RPC so, IMHO, still there is a way to go with this example.

    Any experience in using GWT PRC with manifest 2?

    Thanks

    ReplyDelete
    Replies
    1. Hi Adolfo,
      First of all, I'm happy to hear that you managed to make the extension work easily. That's good to hear.

      You are right, this example demonstrates client code only using GWT. That was the idea :) Of course, you are 100% right in your perspective of extending the example for server side using GWT RPC mechanism.
      I haven't done that in this example, since I try to keep things as simple as possible.
      That's the idea behind some of those posts - to give a good starting point to others.

      I suppose there shouldn't be any problem doing what you just asked.
      All the restrictions considering calls to external URLs
      should be handled in the manifest file, so it should work without any problems.

      It would be really great if you can make it work, and post your example, here or at least link to it from this post. I'm sure many people would find this resourceful & interesting to see an "end-to-end" flow.

      Thanks for your feedback and good luck!

      Cheers

      Delete
  5. Hi Nir,

    I have been for a while trying to make it work with RPC. I have found your example online demonstrating client side and another blog demonstrating the same thing. But, I have not seem yet any post demonstrating how to pass GWT RPC.

    My case tries to go a bit further than that as I want to use GXT (extGWT) rather than GWT and do not know the added problems that I will find over GWT. Well, if I manage to solve the issue I will post in this thread some guidelines. Thanks for clarifying as I was in doubt.

    Cheers

    ReplyDelete
  6. I forked the project in GitHub and loaded it in Chrome and it's working. But this is what I get when I try to change the project and compile your project using GWT:
    "Quickpik is not a GWT project"
    Any way to fix this issue?

    ReplyDelete
  7. Awesome technique for the video lovers. This is a very good feature that i get know about the chrome browser. Thanks to share...

    Chrome tech support, Chrome technical support

    ReplyDelete