Question

I have a touch screen tablet. Now if I was a Windows user I could use iTouch, but I’m a Linux user, and what about OS 10, or the users that got the Chromebook, or installed Chromium OS on their tablet pc?

Well I thought of exactly that, and well I found this site, and the user created the ripple effect.

However how to make this as a chrome extension so the ripple effect is shown every time the user clicks, with a background radial gradient done in CSS3 representing the content of whatever website the user maybe on?

Answer 1

The major component of such extension would be injecting this js library into all pages along with css. You can do this with so called content scripts.

Then you would need some way of turning it on/off. It is usually done with a browser action (toolbar button) or context menu.

A good way to start would be reading through those links (and everythign else on that site).

UPDATE

It doesn’t work because in your background page when you are calling:

chrome.tabs.executeScript(null, {file: "js/ripple.js"});

It is getting injected right away into a tab that was current during extension installation (which is most likely chrome://extensions/, where you can’t inject anything).

That’s why I mentioned earlier that for triggering the effect you would most likely want to user browser action button. Your background page should look like:

chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.executeScript(tab.id, {file: "js/ripple.js"});
});

Or if you want this ripple effect to be always on, just add ripple.js to the manifestwith the rest of the scripts.