Auto-load Bookmarklet When In Webpage As A Google Chrome Extension

Basically I made a bookmarklet, and I'd like it to run when a certain wildcarded URL is opened. For some reasons it won't simply run as javascript in a chrome extension, and I'm ti

Solution 1:

You can make cross domain calls from a content script if you put a url in the permissions part of your manifest... http://code.google.com/chrome/extensions/xhr.html

What it seemed to be choking on was the callback that you put in the request url and thats not needed so I took it out. Here's a working version of your code.... Manifest

{"name":"dA Tooltip Thumbnail","version":"1.0.0","description":"What the name says.","permissions":["http://backend.deviantart.com/*"],"icons":{"48":"sample-48.png","128":"sample-128.png"},"content_scripts":[{"matches":["http://my.deviantart.com/messages/*"],"js":["jquery-1.7.1.min.js","contentscript.js"]}]}

ContentScript

$(".mcb-title a:first-child").each(function() {
    var b=$(this).attr("href");
    null!=b.match(/https?:\/\/fav\.me\/.*|https?:\/\/.*\.deviantart\.com\/art.*/)&&"true"!=$(this).attr("da-message-preview-attached")&&$.getJSON("http://backend.deviantart.com/oembed?url="+encodeURIComponent(b),$.proxy(function(b) {
        $(this).addClass("da-message-preview").attr("rel",b.thumbnail_url).attr("da-message-preview-attached","true");
        $(this).hover(function(a) {
            window.daMessagePreviewTitle=this.title;
            this.title="";
            $("body").append('<p id="da-message-preview"><img src="'+this.rel+'"/></p>');
            $("#da-message-preview").css( {top:a.pageY-10+"px",left:a.pageX+30+"px",position:"absolute",border:"1px solid #666",background:"#EEE",padding:"5px",display:"none","-webkit-border-radius":"6px","-moz-border-radius":"6px","border-radius":"6px","-webkit-box-shadow":"0px 2px 8px #000","-moz-box-shadow":"0px 2px 8px #000","box-shadow":"0px 2px 8px #000","z-index":"123456"}).fadeIn("fast")
        },function() {
            $("#da-message-preview").remove()
        });
        $(this).mousemove(function(a) {
            $("#da-message-preview").css("top",a.pageY-10+"px").css("left",a.pageX+30+"px")
        })
    },this))

});  

The only error I noticed after the changes was it tries to get a url that gets a 404... http://backend.deviantart.com/oembed?url=http%3A%2F%2Fnews.deviantart.com%2Farticle%2F143885%2F ...small error, Ill leave it up to you to get rid of that one ;). OH, and I took out the timer stuff, is that really needed? Wont you be going to a different url when you click on a gallery?...because if you do then the content script will get reinjected (you may need to add more matches for that tho, didnt really look).

Solution 2:

There is almost no work required in converting from a bookmarklet to a Chrome extension (provided the bookmarklet only accessess DOM elements - a criterion with which your extension appears to comply). Simply paste the JavaScript into your extension's content_script.js.

Note, though, that your bookmarklet uses jQuery. You'll have to embed that in your content script, as well. See here for how to do that.

One other note. You don't need to exploit some sort of bug in order to "break out" of the extension; by design, Chrome extensions are allowed access to DOM elements of the page, but nothing else inside of the JavaScript namespace. In other words, if the page has loaded some super secret variables into var bob = 'My secret!!!1', your extension could not access bob and read its value. On the other hand, if bob's value were loaded into a span tag, your extension could find that tag and read it, since it is part of the DOM.

Solution 3:

I think what you're looking for is Message Passing:

http://code.google.com/chrome/extensions/messaging.html

With it you can pass events from your content_script to your background script. Within the background page you'll have all the Chrome Extension capabilities at your disposal.