Chrome extension that captures middle click and replaces URL

Question

I'm completely new to chrome extensions but I've read the getting started and assembled the example from Google. I would like to build an extension that while it's active it captures middle mouse click events on mydomain.com, reads the URL , modifies it and launches the new tab with the newly created URL.

From what I understand so far I need to have a manifest.json file and a my_script.js file that will be injected in all mydomain.com page loads. Is this correct ? If yes how should I proceed next and what should I add to my manifest and javascript file to accomplish the given task. Some code examples would be much appreciated.

I've also read a couple of answers here on stackoverflow and if browserAction is going to be used it can only be used in extension pages, so you can not use it in content scripts. That would mean I would have to place my code in the background page instead of my_script.js . Please advice how should I proceed.

Thank you

Working script solution is:

$(document).click(function(e) {
    var urlToGo = window.location.href;

    // middle button
    if (e.which == 2) {
        urlToGo = "http://google.com"; 
        window.open(urlToGo);       
        e.preventDefault();
        e.stopPropagation();
    }
});

Answer 1

You can start with my simple Chrome Extension Content Script Skeleton https://github.com/robin-drexler/Simple-Chrome-Extension-Content-Script-Skeleton, which provides a manifest and a content script, that'll be executed on every page you visit.

Now you can go on and implement your desired feature. Then you could either usewindow.open to open a new tab/window (easier way) or the native Chrome APIs to open a new tab.

window.open (in content script)

 $(function() {
        $(document).on('click', function(e){
            //do some replace magic here
            var url = 'http://google.com';
            if (e.which === 2) {
                window.open(url);       
            }        
        });
    });

http://jsfiddle.net/886jY/2/

Interesting reads for Chrome APIs

Messaging between background page and content script. IIRC you can only use the CHrome Tab APIs in the background page. http://developer.chrome.com/extensions/messaging.html

Chrome Tab API http://developer.chrome.com/extensions/tabs.html

Answer 2

You need to have the manifest.json declaring a content script, which are js files that are going to be run for each page (and recursively to each frame inside the document, if you set the property to "all_frames" to true).

Check this sample manifest.json:

{
  "name": "MyExtension",
  "version": "0.2",
  "manifest_version": 2,
  "description": "My description.",
  "content_scripts": [
  {
    "matches": ["<all_urls>"],
    "js": ["jquery.js", "my_javascript_to_execute_on_each_frame.js"],
    "all_frames": true
  }
  ]
}

With this manifest, you would have to provide jquery (optional) and a single js file with the code to listen for the mouse click, change the current document's url and open a new tab. This script could like something like this:

​$(document).click(function(e)​ {
    var urlToGo = window.location.href;

    // middle button
    if (e.which === 2) {
        urlToGo = ... // do your url hackery =)
        window.open(urlToGo);       
        e.stopPropagation();
    }

});
    ​   

Answer 3

Just as a little side-note, it is possibly not a good idea about middle button, because it is most redundant, least frequently used by users and even may be missing in some devices, especially on touch screens. You should possibly re-consider your approach in favor of using first mouse button, which can be conditionally enabled or disabled for your extinsion by means of a browser action button, which you mentioned yourself, or better yet - page action button, because you want to work only with specific domain.

As for the code of your interest (for middle button), it has nothing special about extensions, it's just a usual JavaScript to work with DOM of the page, where your content script is injected. For example, you can bind your handler for clicks something like this:

document.onmousedown = mouseDown;

function mouseDown(e)
{
  var midclick;
  if (!e) var e = window.event;
  if (e.which) midclick = (e.which == 2);
  else if (e.button) midclick = (e.button == 4); // MS
  if (midclick)
  {
    var target;
    if (e.target) target = e.target;
    else if (e.srcElement) target = e.srcElement;
    if (target.innerHTML) // do stuff what you need here,
    {                     // assume get all the content as url
      openNewURL(target.innerHTML);
    }
  }
}

function openNewURL(newurl)
{
  chrome.extension.sendMessage({url: newurl}, function(response) {});
}

Your first understanding was correct: you need manifest and content script, and background page.

In the background page process incoming requests:

chrome.extension.onMessage.addListener(
function(request, sender, sendResponse)
{
  if (request.url)
  {
    chrome.tabs.create({url: request.url});
  }
});