1

I am trying to create an add-on through Mozilla Add-On Builder. What I need to know is how to get the URL of a left clicked link in the active tab through the add-on and open it in a new tab.

I know this process involved adding an eventlistener through a page-mod and then using the tabs module, however I can't seem to get the syntax correct.

Edit: (This is what I have so far)

var Widget = require("widget").Widget;
var tabs = require('tabs');
var pageMod = require("page-mod");

exports.main = function() {


    pageMod.PageMod({
    include: '*',
    contentScriptWhen: 'ready',
    contentScript: "window.addEventListener('click', function(event) { self.port.emit( 'click',event.target.toString() )},false)",
    onAttach: function(worker) {
        worker.port.on("click", function(urlClicked) {
            tabs.open(urlClicked);

        });
     }

    }); 

};
Wladimir Palant
  • 56,865
  • 12
  • 98
  • 126
Cuyware
  • 13
  • 4
  • 2
    Could you show us what you tried? The approach is correct, so without your code I cannot tell you where you made a mistake. Only a suspicion that you tried using the `tabs` module from the content script instead of sending a message back to the extension so that it does that. – Wladimir Palant Apr 26 '12 at 07:48
  • Wladimir, I haved edited my original post to include the code I have so far. What I am needing is to be able to get the url of the link clicked and then be able to manipulate parts of that url to form a different one which would then be opened in a new tag. Make sense now? – Cuyware Apr 26 '12 at 21:50

1 Answers1

0

The code you have there is mostly correct and works for me. There are two issues with your content script code however:

  • It needs to call event.preventDefault() to prevent the browser from following the link. Otherwise the linked page will be loaded both in the current tab and the new tab opened by your extension.
  • It doesn't check whether event.target is actually a link. It could be a child node of the link or it might not be a link at all.

Altogether, your content script should look like this:

window.addEventListener("click", function(event)
{
  var link = event.target;
  while (link && link.localName != "a")
    link = link.parentNode;

  if (link)
  {
    self.port.emit("click", link.href);
    event.preventDefault();
  }
}, false);

For a non-trivial content script like this, you shouldn't use contentScript parameter but rather put it into its own file in the data/ directory. You can then use contentScriptFile parameter when constructing the panel:

contentScriptFile: require("self").data.url("contentScript.js"),
Wladimir Palant
  • 56,865
  • 12
  • 98
  • 126
  • Wladimir, that seems to be working. I have just one more question. When I click a link at Google Documents which uses https I get a security error saying "Security Error: Content at https: *** may not load data from https: *** with the stars representing a url. Do you know what could be causing this? Also is there a way to determine if a file is being clicked such as a PDF file? – Cuyware Apr 27 '12 at 17:31
  • @Cuyware: I am pretty sure that the security error is not related to your extension - it's an issue with some Google internals. As to recognizing PDF files - this is impossible, at least until the file starts downloading. – Wladimir Palant Apr 27 '12 at 20:51
  • I was thinking the href target would have .pdf in the title, so I was thinking there was a way to test this. – Cuyware Apr 27 '12 at 21:05
  • @Cuyware: File extension is meaningless when dealing with HTTP - the file type is determined by the `Content-Type` header. `http://example.com/foo.pdf` can be a regular HTML page and `http://example.com/getDoc?id=123` can be a PDF file. – Wladimir Palant Apr 27 '12 at 21:08
  • I see. Well I have solved the issue and your help has been instrumental. Thanks alot – Cuyware Apr 28 '12 at 05:31