So the Google Chrome Extension I am working on, finally has some purpose, I connected the dots in my code to allow some neat functionality. Remotely connecting to WordPress, logging in and creating a post. Right from the comfort of my own browser.
This is the simple basics. I will be integrating, editing, commenting and approving comments right from this extension.
Anyhoo, I’ll keep you updated and follow up with some examples on connecting with XML-RPC.
Sweet.
If you read my post on How To: Take Advantage of HTML5 localStorage to Remember Your Place in a Chrome Extension within the extension, download this working code example.
After installing the application, right click on the extension, and click on popup explorer, take a look at the local storage and look for the variable ‘lastPage’. You should see the last page you left off on.
As I continue to develop my app, I will post examples on how to go about creating a simple Chrome Extension.
Let me know if you have any questions.
So I started working on my chrome extension a few weeks ago and right off the bat, I needed to solve a problem. Having my chrome extension remember my place when I exit, so when I return it will be on the same “tab” within my application. Using HTML5 localStorage you can save the users place.
This may seem minor, but if a user needs to use your extension and re-navigate to get back to their spot, it could get annoying or deter use of the extension or app, this is how to solve that issue.
A practical example. You want to monitor your blog comments, when you exit, you need to re-navigate to, tools>comments>and adjust a datestamp. 5 minuts go by, you open, re-navigate to tools>comments>and adjust a datestamp. See? If Chrome could just remember your place and load it when you relaunch, that would be idea.
Remember, that you need a HTML5 capable browser for these functions work.
Lets begin. I have a 4 page extension: an index.html, login.html, tools.html and config.html – what I need to solve for is a way for it to recognize what page I am on, and store it in the localStorage. Check for it on my next extension start up, then load the page where the user left off.
There are many ways to go about doing this, but after thinking about it for a little, I found this to be the most efficient way. Instead of having the tab load, then set the current page variable, it should be set before you even arrive on that page, from the link. This will avoid any errors.
Lets start with the index page since this will be the important one, or the one doing the processing on extension launch. Create links to all your pages so you have a unversal navigation:
Index | Tools | Config | Login
Next we want to set our first HTML5 localStorage variable done in Javascript by using this:
localStorage.setItem('variableName', 'variableValue');
The first variable is the variable you want to store, and the second value is the value of that variable. Since we want this variable to be set onClick the link, we next need to add onClick's with this localStorage value. Pertaining to this example, set the variable name to "lastPage" and set the variable value to the page they will be going to.
onclick="localStorage.setItem('lastPage', 'index');
onclick="localStorage.setItem('lastPage', 'tools');
onclick="localStorage.setItem('lastPage', 'config');
onclick="localStorage.setItem('lastPage', 'login');
Index | Tools | Config | Login
By doing so, as soon as the user clicks tools, it will store the last page "tools" in the database. Rather than going to the page, loading the page and setting the value.
Next we want to add this to every page.
After this is on every page lets go back to the index page so we can do the logic to process the variables after the extension is reopened.
The first thing we want to do, is check to see that the last page was, before we load our index page, because by default, the index page will load but if we have an "if statement" we can re-rout to the appropriate page.
Lets add a localStorage get to the page like so, and create a variable "lastPage" to store it:
var lastPage = localStorage.getItem('lastPage');
below that we want to add our if statement. What this will do, with thehelp from the localStorage.getItem, is grab the stored value of lastPage, then run through the if statement. Once it finds a match, it will simply redirect to that page.
if (lastPage == 'index')
{
//SINCE WE ARE ON THE INDEX PAGE ALREADY, DO NOTHING
}
else if (lastPage == 'tools')
{
window.location = "tools.html";
}
else if (lastPage == 'login')
{
window.location = "login.html";
}
else if (lastPage == 'config')
{
window.location = "config.html";
}
else
{
}
After that is in place, you are complete. Just a few lines of code can solve for an annoying issue. Especially if you don't want to annoy your users.
I will be documenting multiple topics on HTML5 as I continue with this project. Hope you find this useful.
So it’s now 2011, a time for new things and higher standards. I have set many goals for the new year. One thing in particular is to expand my API knowledge. I have been working with many API’s recently. Google Analytics, Google Charts, Bit.ly, Feed Burner etc, and want to push myself to know them in and out.
Outside of API’s I have been experimenting with Google Chrome Extension’s and App development. I am currently working on a personal project using XML-RPC for WordPress and hope to get it out in market within a month or so. This tool will be a neat experiment for myself and open many doors. I am in a mobile/web app mindset right now really trying to fill my head with all knowledge pertaining to that area.
With the release of Google Chrome’s Store, this would allow many people to take the skills they already have and easily create a web app or tool to monetize.
If you want to check out an app that is in market navigate to the Chrome Editor by Bryan Lynn, a good friend of mine who is working on an offline editor.
If you have any resources, or things which you found interesting, please let me know!
Hi im Tim and I love to do experiments and take adventures online. Professionally I am a Digital Media Producer out of Boston, MA and design, develop and produce interactive media.
