Hugoware

The product of a web developer with a little too much caffeine

Posts Tagged ‘Extension

Yet Another jsshell Update

with 4 comments

I’m pretty psyched about jsshell right now. The user count is growing, I’ve had a lot of good reviews — I’ve even noticed that my blog is being hit with search for it.

I’ve also been getting feedback of ideas and suggestions which I’ve implemented and uploaded to the extension website (so you can go download the new version now).

More Intellisense

The intellisense now includes jQuery commands, jLinq commands and jsshell commands, each labeled with their own color. Additionally, there is now a slight delay before the intellisense is polled. This time limit is 100 milliseconds (so really if you aren’t typing a fast or even pause for a moment you should see it).

Automatic jQuery Help

I received this interesting suggestion from a user. Automatically open the jQuery website with the correct help information for the word that the caret is currently over. Brilliant!

Now, when you press CTRL+? or CTRL+F1, whatever word you have the caret will be opened on the jQuery website. If you don’t have the whole thing typed out, it will take a guess at what you meant. If it can’t even find a command by that name in jQuery then no window is opened.

Import and Export Settings

I’m not entirely certain what happens from version to version for Chrome extensions, I’ve added an export and import option for settings. Right now it just returns a string that you can import back into jsshell. In the future I’ll be adding an interface to do that for you. For now you might want to save any built in commands before you upgrade versions.

If you have any other feedback, please let me know!

Written by hugoware

January 27, 2010 at 11:03 pm

jsshell 2.0 – The Release

with 17 comments

Today you can download jsshell 2.0. This new version has a lot of new features.

If you’ve never used it before you might want to watch the jsshell screencast to help you get caught up on what it does and how it works.

Basic Usage

Here are the basics of using jsshell.

  • CTRL + Enter: Runs all of the code in the current window. You can also highlight the code you want to run and press the same keys to run just the selected code.
  • CTRL + Delete: Wipes out all of the code currently in the editor.
  • Double Click the Title bar: This will minimize and restore the code window on the page.

You can drag the window around the screen and also resize the text area by clicking the corner of the textarea and dragging it to the correct size.

Settings

You can now adjust settings in jsshell to behave how you want. Below are some commands you can use.

  • js.setting("allowAuto", true|false): Turns on and off the ability for commands to run automatically when browsing to a web page.
  • js.setting("autoDelay", milliseconds): The time to wait before attempting to run a command automatically on a page.
  • js.setting("showHint", true|false): Turns on and off the ‘intellisense’ box with the page elements, classes and ids.
  • js.setting("displayNodes", true|false): Turns on and off is the ‘Growl’ style boxes can appear or not.
  • js.setting("autoShow", true|false): Turns on or off if the box should automatically appear at the bottom of every page (without clicking the jsshell icon)
  • js.setting("onlyTop", true|false): (experimental) Causes the editor window to only appear in the top frame and not any other sub frames.
  • js.color("dialog|editor|font", "#color"): Changes a color setting for the jsshell window.

Data

jsshell now allows settings to persist from session to session and page to page.

  • js.data.list(): Shows a complete list of all data currently saved for the browser.
  • js.data.save("key", {object}): Saves an object to the data container. Uses JSON.stringify so be careful what you save.
  • js.data.load("key"): Returns the object the data found in the container of the key provided.
  • js.data.edit("key", delegate(data) { }): Edits the data found with the method provided. The method must return the data or nothing will be saved.
  • js.data.use("key", delegate(data) { }): Similar to the edit command, but just allows access to the data. Nothing will be saved regardless of what is returned.

Other Built In Commands

jsshell also has several other built in commands that perform a variety of tasks.

  • js.call("command"): Invokes a built in command like nostyle or any custom commands you have created.
  • js.note({message:"message", [title:"title"]}): Displays a ‘Growl’ style popup box with a message inside. The Message accepts HTML so you can include links.
  • js.go("url.com"): Browses to the url provided in the command.
  • js.debug(): Nothing special…

Shortcut Commands

Shortcut commands can be called by simply entering !commandName or with js.call(“commandName”).

  • !nostyle: Removes style information from the page like stylesheets, attributes and classes.
  • !flash: Attempts to move the jsshell window over the top of Flash elements on the page.
  • !save: Manually saves the settings for jsshell, but you shouldn’t ever need to call it. Special for all you paranoid people out there 🙂
  • !reset: Resets all information for jsshell and returns to the default settings.

Custom/Auto Commands

One of the cooler new features is that you can write custom commands to run as soon as you get to a page. You can specify a regular expression to evaluate the URL you navigate to and then have a custom command run right away (or multiple commands). If you don’t want to run them automatically then you can still invoke them by using the Shortcut Command syntax shown above.

  • js.custom.edit("commandName"): Shows the dialog to allow you to make changes to a custom command.
  • js.custom.remove("commandName"): Removes a custom command from your settings.
  • js.custom.list(): Displays a full list of all commands available in your settings file.

New Screencast

You can watch the new screencast to see more of the new features in jsshell.

Download It Now!

You can download jsshell 2.0 at my website. Make sure to send me a message if this is helpful and any other features you might want to see!

Written by hugoware

January 12, 2010 at 12:29 am

jsshell 2.0 — Yeah… already…

with 2 comments

The new jsshell is here! Go read about the release at this blog post

Last post I shared an extension I was working on for Chrome called jsshell — The name is terrible since I found out it is also the name of a computer virus. I suspect many users would be confident to download and install it if they knew.

I’m not going to post the plug in tonight so I can test it a bit longer, but I wanted to share some of the new features. If you have some ideas then please share them with me. I’ve already added on new feature based on feedback I’ve heard (thanks Pierre).

Settings for jsshell

There are now settings for a handful of features. For example, using jsshell.color("dialog", "#f00"); will change your window to a new color. The settings will persist till the next time you open the page.

Additionally, there are settings for notification displays, auto execute timers and more. Nothing exciting but it is new. 🙂

Notifications

I personally loathe the alert box. I think they should all be replaced with something like this…

Okay, well maybe not that… They are required at times. Even jsshell has one.

In any case, jsshell tries to create more pleasant notifications similar to the ones you see in other plugins like jGrowl. After a few seconds they will go away on their own. You can hover over the window to keep it from closing.

Custom/Auto Commands

One of the cooler things you’ll have is the ability to write your own custom commands and then save them so you can execute them later. So for example you could write a command called mp3 and then execute it by entering !mp3 or jsshell.call("mp3"); into the editor and then executing it.

To take it a step further, you can define certain commands to run automatically on certain pages (which you define with a regular expression). So for example, in my herdingcode.com demo I could have my MP3 script run as soon as I reach the page.

I’ve found a few interesting uses already (for example, performing a login that spans across multiple pages)

And More… but not that much more…

This is some of the better features that have been added. I’ll probably release the next version on Monday, but as for now tell me if this sounds like a good direction to go or if I ought to change my thought process.

Written by hugoware

January 7, 2010 at 11:07 pm

Chrome Extension: jsshell

with 4 comments

The new jsshell is here! Go read about the release at this blog post

I started messing around with writing a extension for Chrome yesterday and I’m surprised just how easy they are to put together. With the exception of a little configuration the whole process is HTML and JavaScript — something that most of us are already experts at (not saying I’m an expert, I’m just saying for the rest of you)

In any case, it didn’t take very long to put something that wasn’t half bad.

jsshell

I’m taking votes on a better name, but for now I simply named it jsshell or JavaScript Shell. Basically, you get a nifty little window as you browse the web that you can use jQuery and jLinq to execute custom commands. Not a bad idea, huh?

I won’t talk about it too much here – I did a screencast and a have a link to download (and install) the extension into your browser.


Watch the screencast about jsshell!

Don’t forget, this extension only works with Google Chrome (and possibly only version 4). Try it out and let me know what you think!

This is my last post of 2009 (it is only 11:16PM here in Texas) — See you all next year!

Written by hugoware

January 1, 2010 at 12:17 am