Browser as a tool

A developer in a small company - how often do you get a weird request to do something totally unrelated to writing code just because you seem to be the only efficient and able person to handle that situation? Luckily most of those oddballs still are inclined to involve a computer and as soon as a part of the task starts to sound as repetitive or ... (with a surprise) even complicated and interesting - you can most likely conjure up a justification to write a tool to do it for you. And then you are once again back at writing code and feeling less overpaid and/or undervalued.

Why write a Chrome plugin?

Because ES5 is fun and not having to worry even think about compatibility a sheer joy. Not many project managers say take the bleeding edge and run. Oh yeah.. and the reasons above. 

Chrome console is nice but when those random tasks lead you to deal with 3rd party web pages/environments it doesn't always cut it. I started out with the copy-paste my JS code to the console.. gather the results in localStorage.. navigate to the next page.. and copy-paste my.. Hmm... Already the very minimal Chrome extension allows you to include a custom JS file to the pages you visit. Task one was an ease. Task 2 - change the code in your JS file - hit the refresh button at extensions page and.. task 3? Somewhere in-between would have been that time you talked to your manager.

Some of my own use cases for the InjectCode extension:

  1. 3rd party system, no database access, just a back-end administrators view with no batch update capabilities. Used it to check, change and navigate in 40+ parallel forms/tabs.
  2. to compensate the lack of functionalities on a (mailing) service providers web environment.
  3. a few basic scrapers for ajax heavy sites.

But that was me..

..and I shouldn't have been surprised when the first 2 people with feedback to the extension came along with use cases I didn't foresee.

The second one How can I call my custom functions defined into the extension scripts from the console? I solved with the latest update. Now in your code snippets any properties and methods you attach to the global InjectCode object are also available (after hitting the run button) in the Chrome console via window.InjectCode (well or just InjectCode) object.

// For example add this
InjectCode.download = function (filename, text, type) {
    type = type || 'text/plain';
    var temp = document.createElement('a');
    var url = window.URL.createObjectURL(new Blob([text], {
        type: type, 
        charset: 'utf-8'
    }));
    temp.setAttribute('href', url);
    temp.setAttribute('download', filename);
    temp.click();    
}

// go to http://stackoverflow.com/ 
// and run this super useful code in your console:
window.all_titles = '';
$('#mainbar').find('div.summary h3').each(function () {
    window.all_titles += $(this).text() + '\n';
});
InjectCode.download('titles.txt', window.all_titles);

   

The first feature request I got in late January It would be great if one could define (a URL) where the code shall be run automatically, instead of everywhere is a bit tricky UI wise.

I didn't and still don't feel like adding a new box for defining a URL as it would clutter the interface. So I'm currently considering some options:

  • make a globally accessible function testLocation(pattern, callback),
  • specify a comment syntax to be placed on the first line and parse the location from there e.g. //Match: your.url 
  • or both.. or ... any suggestions?

Cheers to you 15-20ish weekly users out there!

Meta

Posted at 02.04.2015 in Irregular

Last modified at 02.04.2015

Tagged with: chrome , extension , feedback , utility , developer tools , javascript

Discussion

Nothing has been said

Leave a Reply

Authenticate with:        Terms, Privacy & TL;DR
*
*