chrome

Blog posts tagged 'chrome'

Clearing Chrome Internal DNS cache

Nov 24 16

Visiting a url, but getting the (old dns) version of a page?
I was too.

Turns out that Chrome keeps an internal DNS cache.

You can view it by visiting the following ‘url’ (enter this in your address bar in Chrome)

chrome://net-internals/#dns

Create a Google Chrome Extension

Mar 25 11

I’ve been meaning to look into creating a Google Chrome extension for a while.

Earlier this week, I successfully RickRoll’d Rob Ashton on twitter, which in turn, after a RT, RickRoll’d several others. Many of whom replied with tweets like

So, that got me thinking.

What if there was a way to stop you being RickRoll’d. Then I remembered I wanted to learn how to create a Google Chrome Extension… The two ideas fused, and RickMeNot was born.

Step 1 – Create a Manifest File

I created a RickMeNot directory (and init a git repo, of course…)

Then, create a new file using <insert your favourite text editor here>

All  extensions, installable web apps and themes have a manifest file.
This is a JSON file, needs to be called, quite descriptively, manifest.json.

Read more on Manifest Files

The manifest.json for RickMeNot looks like this

Most of this is fairly self explanatory.

What we’re basically doing, is setting the name, version and description of the extension.

We then specify the background_page.

A background page, is basically a long running script that manages a task in the background, while the extension is active.

This particular extension won’t need a fancy button (Browser Action) or anything like that, so we only need to specify our background page.

Permissions

One thing to take not of is the permissions array.

This particular extension needs to be able to access the urls of tabs etc… so, we’ll need permission to use “tabs”.

Background Page

Ok. So we have our manifest file that tells the extension what to do, so now we need to create a file that tells it how. This will be where the main functionality of this extension is.

Although this is a .html it doesn’t have to contain the usual doctype and other tags.

It simply needs a <script> and </script> tag, with all the script for the code in between.

Let’s start real simple:

<script> chrome.tabs.onUpdated.addListener(tab_updated); </script>

What this does, is add an event handler for the tabs.onUpdated event.

As expected, this fires when a tab (any tab) is updated.

Note: I’ve called our callback tab_updated – this can of course be called anything.

Our tab_updated function looks like this:

Ok- so what this does, is loop through all the values in our (as yet undefined) rickUrls and checks if the tab.url (the value from the passed in tab object) is equal to one of the values in our array.

If it does, it updates the tabs url (think of this as a redirect) to “savedFromARickRoll.html” (more on this later)

Populating our array using body onload

So, now we need to populate our rickUrls array.

While our background page doesn’t have to have HTML tags, it can. It can also contain some client side executed javascript.

In this instance, we’re most interested in executing the body onload event

In our background.html we simply add:

Our “init” function is in between the <script> </script> tags and looks like:

In version 0.1, we’re just hardcoding a few of the known youTube URL’s

In later versions, I’ll rewrite this to check an external file / service or something to get an up-to-date list of them.

Putting It All Together

This is what our background.html looks like:

Files within an Extension

An extension can contain files, like our savedFromARickRoll.html, and you can reference them locally.

This also applies to images (see the image in our savedFromARickRoll.htmlnoRickRoll.jpg)

You can’t however, refer to anything else on disk (c:\ or anything like that)

This is obviously for security reasons.

Source

I’ve put all the source for this post on GitHub

You can download it here: https://github.com/alexjamesbrown/RickMeNot

What’s next…

I’ve got a couple of follow up posts planned on this.

Firslty, a short one on how to list your extension in the Google Apps Marketplace (will add link as soon as it’s ready)

Also, when I get time, I’ll write a post along the lines of calling external services to get a list of updated Rick URLs

View XML in Google Chrome

Jan 19 11

Sometimes, I need to be able to view an XML document in a browser.

While IE supports this natively, you’ll need an extension for that in Chrome.

The one I use is XML Tree by Alan Stroop.

After installing it, it simply “just works”
Viewing any server side XML page displays nice and hierarchically, similar to IE / Firefox

However, to enable opening of a local XML file, you will need to explicitly allow this in the extension settings.

chromeExtensionSettingsMenuOptionTo do this, open the extensions settings page, either by typing chrome://extensions/ into the browser, or by clicking the spanner in the top right corner > Tools > Extensions

(see image to the right for clarification)

 

In the extension settings, locate XML Tree, and click the “Allow access to file URLs” check box:

chromeXMLTreeAllowAccessToFileUrls

Now the extension will also work with local XML files