How To Create Your Own Chrome Extensions

http://coryg89.github.io/technical/2013/08/13/how-to-create-your-own-chrome-extensions/

by CoryG89 • 13 years ago

160 32 13 years ago

coryg89.github.io

Achshar• 13 years ago

I think chrome extensions are very easy and quick to set up. I often end up making extensions for when I want to make some task easier for my mom. I just have to tell her how to install extensions once and I can run any js in her browser's context.

AlexanderDhoore• 13 years ago

That sound kind of like bash scripts for the web! I've been using bookmarklets [1] for that kind of thing. But extensions are probably a cleaner and more powerful way to do it.

[1] http://en.wikipedia.org/wiki/Bookmarklet

CoryG894• 13 years ago

This is a neat idea, I'll have to toy with using the concept for my dad's browser.

cocoflunchy• 13 years ago

Is this a good place to share mine? https://github.com/cosmith/grafit

I found that I frequently needed to monitor some value in a web page at work, so I made this extension to make a line plot out of any changing value: just right click on the value, select "graph this" and you have a little self updating graph in a popup.

It's still a little rough, but I find myself using it like once a week, so maybe it could be useful to some of you ;)

rogem002• 13 years ago

If it's ok, here is mine as well https://github.com/MikeRogers0/LivePage

It monitors the HTML/CSS then reloads the page when something has changed. I made it when I was a full time front end developer, it still needs a lot of love but it does the job.

67726e• 13 years ago

Might as well put mine out as well. Chrome extension to insert request and response headers. Good for testing and spoofing.

https://github.com/67726e/Header-Editor

https://chrome.google.com/webstore/detail/header-editor/pkok...

CoryG894• 13 years ago

Mine is linked to at the bottom of the article: https://github.com/CoryG89/MDNJump

I construct google query URLs with the I'm Feeling Lucky field specified and restricting it to the http://developer.mozilla.org domain and it brings you right where you wanna go everytime. It uses a keyword `mdn-` in the omnibar and registers a context menu item on text selection.

ronnier• 13 years ago

I'll join in...

https://chrome.google.com/webstore/detail/fgc-live-streams/f...

Totally unrelated to hacking :) It's for finding twitch streams for Fighting games (Street Fighter, etc).

dbz• 13 years ago

Cool! I'd like to share my little extension! It let's you view the cached version of a webpage with Google Cache, Coral CDN, or Wayback Machine with a click of a button.

https://github.com/Dbz/WebCache

P.S. if anyone knows how I could add more cache databases like bing cache or yahoo cache, please tell me because I couldn't figure it out.

EDIT: If anyone is willing to test the Coral CDN, I'd greatly appreciate it. For some reason Coral CDN doesn't work on my browser, so I've never tested it =`[

thejosh• 13 years ago

AHHHH!!

Needed something like this for ages, thanks a ton dbz!

kranner• 13 years ago

This reminds me of when Google was still in Beta and I was a 20-year-old at my first programming job.

Very few people in my office used Google and even fewer were aware of the cache. I wrote a quick little proxy server in Python that would serve requests from Google's cache after stripping out the 'this page is a copy of...' header. I called this proxy server Doctor Who. It was quite a hit. I kept it running until people forgot to turn off proxy settings in their browser and I started seeing plaintext passwords for Yahoo mail in my logs (at the time they were plaintext).

I had specifically asked people not to access web mail while using the proxy, though, so I did take the opportunity to yell out one guy's password in the stairwell: "Hey badboy1, how's it going?"

olegp• 13 years ago

Here's mine, a new tab page replacement: https://chrome.google.com/webstore/detail/starthq/ilcpdgfepi...

gibybo• 13 years ago

This looks very cool, although I'm not sure I want to spend the time to figure out how to install it manually :( Why not put it in the Chrome store yet? You could even put it up with an opaque name and no description just as a way for others to look at it without going through the manual install hassle?

dhruvtv• 13 years ago

Here's mine. If you need to copy link addresses more than once, you know how annoying it is. You need to right-click, find the "Copy Link Address" menu item, and click it. With the extension, you can simply do Ctrl-C/Cmd-C :)

https://github.com/dhruvvemula/copylinkaddress

https://chrome.google.com/webstore/detail/copy-link-address/...

DanielRibeiro• 13 years ago

Chrome Extensions, particularly content scripts, are really useful and powerful. You can even use WebGL inside them: https://github.com/danielribeiro/three-hub#three-hub

CoryG894• 13 years ago

Wow that is cool! I may have to add this link to my article.

th4t• 13 years ago

I would like to join in on this thread of comments:

https://chrome.google.com/webstore/detail/subreddit-omnibox/...

It helps to navigate and explore subreddits by providing autocompletion and suggestions.

jcutrell• 13 years ago

I've been working on a "Send a note to Basecamp" extension for a bit. It (currently) reads the content of your open email in Gmail, and lets you send an arbitrary note to a Basecamp project. Useful for people who like to stay in the browser while they are cleaning out their email. Also, makes my email inbox actionable.

I will share it here whenever it's ready to show off.

christiangenco• 13 years ago

I recently had to create an extension for as many browsers as I could, which ended up being Chrome, Safari, and Firefox. The easiest - by far - of these platforms was Chrome.

The Safari distribution channel is a ghost town: http://extensions.apple.com/

Most Safari extension makers choose instead to just host the raw executable on their site, but that makes pushing updates a pain. See http://textbooksplease.com (visit in Safari).

Safari does, however, have a really nice extension builder which is useful if you don't know XML, I guess. And when you get down to the nuts and bolts (at least as far as I ventured), the Safari Extension API is pretty similar to Chrome's.

Firefox has been a royal pain. They have a "7-day review process" for all submitted extensions, and a tiered structure of reviews (preliminary and final) which translates to not being able to push updates for weeks at a time. Super frustrating when I can push changes to Chrome in about two minutes and know it will get pushed to everyone who already has it installed in a timely manner. I also found their API to be poorer documented than Chrome's.

I'm terrified of IE.

CoryG894• 13 years ago

I haven't tried it for any of the other browsers yet, however, I did give them all a look and this is how the current situation appeared to me as well.

Afforess• 13 years ago

I totally agree that Firefox extensions are a massive pain. I tried the review process and after the waits, and rejections, I gave up and hosted it myself. You can host Firefox extensions and have them auto-update, but it's not well documented on what magic settings you need to enable to do so. This tutorial was helpful: http://www.borngeek.com/firefox/automatic-firefox-extension-...

byoogle• 13 years ago

I maintain a library (a more comprehensive fork of AdBlock's porting library) that emulates most of the Chrome API in Safari: https://github.com/disconnectme/port (we use this library for Disconnect). Now that Opera is based on Chromium, you can pretty easily develop an extension for three browsers with one code base.

roryokane• 13 years ago

If you want to build a “content script”-type extension that does nothing but interact with the page and run normal JS, think about building the extension on the GreaseMonkey platform. GreaseMonkey (http://www.greasespot.net/) is an extension that lets you write a content script as a single JavaScript file, with metadata such as the name and version written in specially-formatted comments at the top of the file. That makes scripts easy to develop and install. GreaseMonkey also provides a few functions that allow you to do some things that browser security doesn’t normally let you do – http://wiki.greasespot.net/Greasemonkey_Manual:API.

“GreaseMonkey” is only a Firefox add-on. But there are GreaseMonkey-compatible extensions for other browsers, such as Tampermonkey for Chrome (https://chrome.google.com/webstore/detail/tampermonkey/dhdgf...) and GreaseKit for Safari (https://www.macupdate.com/app/mac/20718/greasekit). Thus, GreaseMonkey scripts are automatically cross-browser. Chrome even supports installing GreaseMonkey scripts natively, but only through a convoluted process, for security reasons. The reason people made clones for other browsers is the huge library of existing GreaseMonkey extensions at https://userscripts.org/.

The downside of GreaseMonkey is that the user needs to have a GreaseMonkey-compatible extension installed to run your script. So your extension depends on another extension. It’s also harder to use a build system while writing a GreaseMonkey script, if you want to write it in CoffeeScript or something.

zxcvgm• 13 years ago

actually Chrome already has native support for GreaseMonkey scripts since a while ago [1]. You can just install scripts directly from http://userscripts.org.

[1] http://blog.chromium.org/2010/02/40000-more-extensions.html

Flenser• 13 years ago

If you're a developer of scripts, or want to be able to dive into the source then it's easier to install them via Tampermonkey[1] which provides an editor. It also auto-updates greasemonkey scripts which I don't think chrome is able to do natively.

[1] https://chrome.google.com/webstore/detail/tampermonkey/dhdgf...

fphilipe• 13 years ago

The other day I needed a script to tweak images on Wikipedia so I looked into Greasmonkey. I installed it on Chrome and started writing the script. Then I remembered that I'd seen an alternative before which simply runs a JS file on your FS that contains the URL's host inside ~/.js. It's called dotjs [1] and it's really strait forward to use as it does not require the complicated header section. See the tiny script I wrote to see how easy it is to run custom JS on any domain [2].

[1] https://github.com/defunkt/dotjs

[2] https://github.com/fphilipe/dotfiles/blob/master/js/wikipedi...

omegote• 13 years ago

I've built a couple of Chrome extensions and is something I really recommend. It's easy, useful and satisfying (if you have a userbase).

An example. I love checking the EXIF data of the pictures on the internet to know more about how they were shot. I use Jeffry Friedl's Exif Viewer (http://regex.info/exif.cgi). The process was: right click on the image, open in new tab, click a bookmarklet, new tab opens with the exif. Then, I decided to create a super simple Chrome extension that adds an option to the context menu of all images that opens the image in the exif viewer.

You can check the (minimal) code here https://github.com/JoseTomasTocino/send-to-exif-viewer, as well as the link to the chrome web store https://chrome.google.com/webstore/detail/send-to-jeffreys-e...

octagonal• 13 years ago

They forgot the most important part: having a good idea.

tectonic• 13 years ago

I recently converted http://selectorgadget.com from a Bookmarklet into a Chrome extension. The process was quite simple.

srik• 13 years ago

Looking at everyone's enthusiasm sharing own extensions we should have a weekly show our projects built in the last week thread. I've seena couple, but I think it would be awesome to make it regular and habitual, if only to propagate the makerness aspect of our group.

pjdorrell• 13 years ago

I thought it would be easy to create an extension that lets you adjust CSS properties using JQuery UI sliders. About three thousand and something lines of code later, I have made https://github.com/pdorrell/style-adjuster, which is not even finished yet, but it demonstrably functions.

In the course of development, I found that it is non-trivial to make a popup window inside a Chrome extension which acts on a target tab, because "window.opener" is not available. So I developed a test extension at https://github.com/pdorrell/test-popup-extension which does that, and which runs its Javascript code interchangeably inside or outside the extension.

kwerty• 13 years ago

I'd like to share mine also

YouTube User Guard is a chrome extension which lets you stay signed in to YouTube with a single account indefinitely, even while you're signing in and out of other accounts for Gmail etc.

I made it because I want don't want my YouTube account linked to my work email.

The principle is simple, it monitors for changes in several key cookies and reverts them.

http://kwerty.com/YouTube-User-Guard

https://github.com/kwerty/YouTube-User-Guard

How To Create Your Own Chrome Extensions

Related Stories