ITP Blog

Hecking the Browser - Week 4: Two Extensions and Final Proposal


Week 1: Create a responsive web site

Week 2: Create a bookmarklet against users

Week 3: Create a chrome extension


TITLE: Bootstrap is the new Geocities

DATE: Feb 21, 2017



This week I made Two chrome extensions.


Google Concentration Blocker

This blocker adds a group of fake curses to chase to the real curse when people are using google or chrome developer reference, which was inspired by Leon Eckert. It turns the searching experience into a game to distract users and reduce the productivity, so I called it concentration blocker.

Here is a video to show how it looks like:

Here is the link to the original code:

I got stuck by 5 problems when I was developing it. I marked them inside the code using comments.

At the same time, I found some tips or guess:

1. The script embedded in HTML doesn't have access to chrome API. And injecting script from external source is not allowed. So if we want to inject scripts in our extensions except the chrome extenstion content.js and background.js, as far as I know, we can do:

1.1 Redirect one of the scripts to your scripts, which was included in your extension package. Using chrome.extension.getURL() to get the URL. But this one has a problem, it will hurt the original experience. And the redirect scripts doesn't have access to chrome extension API, so it can't use the libs we declared in manifest/content_scripts. But I got a way to fix this, in content.js, embedded the libs to the HTML head:

var jqry = document.createElement('script');
jqry.src = chrome.extension.getURL('jquery.js');
(document.head || document.documentElement).appendChild(jqry);


1.2  By figuring out the method above, I came out another way to inject scripts. Using the code above but embedded our scripts so it won't hurt the original experience. But, they don't have access to chrome extension API.


1.3 In background.js, using chrome.tabs.executeScript() function, and your scripts will have the access to the chrome extension API.



2. I can't use jQuery functions inside P5.js functions, which makes no sense.


3. I figured out a way to pass resource(imgs) from chrome packages to scripts outside the package. Using content.js to embed the image to the HTML body and hide it.

var mouse = document.createElement('img');
mouse.src = chrome.extension.getURL("mouse.png"); = 'mouse';
//hide the bridge for passing the imgURL = "display: none";
(document.body || document.documentElement).appendChild(mouse);

Then in my scripts, get the elements by ID. It's quick and dirty. 

var mouseURL = document.getElementById("mouse").src;


Lol, I don't know what's the point of doing this... just using content.js and background.js will be fine.


Shout Out Your Embarrassing History

This extension override the chrome history page with a view counter for specific url and shout out the times you have visited the specific url.

In the development of this one, I explored override specific page(easy), history(a little confused), tts(a little confused).

Here is the video to show how it looks like:

Here is the link to the original code:

Well, I counted google urls here :)



Reverse engineer an extension

When I was searching for some interesting extensions, I found this boilerplate for chrome extension. It's awesome.

I found one named ExtensionOpen TOP10 links in tabs.

Basically, when users go to ProductHunt, HackerNews, Reddit, Google, Amazon and Ebay, and click the extension, it will open TOP10 non visited links to tabs. At first I felt like it was a useless one and we could use the feeds reading tools like feedly to easily replace it. But when I rethink about it. I changed my mind, it's genius. 

Feeds(right images) stack like this, which was my previous subscriptions, I sort of quit design now, I will never read them...

But if it open them for me, and ten picks one time, at least I will have a glance at them and then close. If I'm lucky enough, I will find something I like.

I have to admit that chrome extension in the wild are pretty complicated. But the Chrome API this one used is pretty simple, it used chrome.runtime API, which is the same we used to communicate with content.js.

Then in background.js it use chrome.tabs.create() to open new tabs.

I am still working on reading the code.




Final Proposal

At first I got an idea, an extension that visualize the style data of each elements on the page. So we don't need to open inspector to find the data out of a pile of complex code. Like this, but more visualized with css animation.

But I to some extend doubt if it's necessary to make it. Because it's not funky enough to survive in ITP :( 

I'm still working on the ideation, if I can't figure out a new funky idea before next class, I will make this!