2

I have some HTML that has an image tag and a bit of jQuery like this:

<body>
  <img id="MainImage" src="../img/MainImage.png" style="position: absolute;">
  <script type="text/javascript">
    $(document).ready(function() {
      var $img = $("#MainImage");
      $img.hide();
      $('div').mousemove(function(e) {
        if ($(this).attr('align') === 'center') {
        // only show if the align attribute has value center
        $img.fadeIn(0);
        $img.offset({
          top: e.pageY - $img.outerHeight()-2,
          left: e.pageX - ($img.outerWidth()-18)
        });
      }
    }).mouseleave(function() {
      $img.fadeOut(250);
    });
  </script>
</body>

I also have this manifest file with the following code:

{
  "name": "Div Image Test",
  "version": "1.0",
  "manifest_version": 2,
  "permissions": [
    "tabs", "http://*/*"
  ],
  "content_scripts": [{
    "matches": ["http://*/*"],
    "js": ["js/CoreTest.html"],
    "run_at": "document_end"
  }]
}

What this script/extension is for is, whenever the user hovers over any div (with the HTML attribute "align='center'"), an image pops up next to the mouse cursor... This already works but what I need to do is insert the script/HTML file into the "body" tags of every web page out there when the extension is installed.

How can I achieve this?

Thanks in advance.

dda
  • 6,030
  • 2
  • 25
  • 34
happycamper1221
  • 177
  • 1
  • 6
  • 14

1 Answers1

1

I don't know how you would do this in a Chrome extention, but, if you are happy with a userscript:

Create a file and put a userscript header at the top of it that describes your app and has you name, etc. In that you can then create all the elements you need using JS (the img tag) and bind a hover to all imgs. I wrote such a script myself, but for Instapaper. Here is the source:

instalater.user.js

// ==UserScript==
// @name          Instalater
// @namespace     http://jcla1.com
// @description   Read Later for Instapaper
// @include       *
// ==/UserScript==

function load() {
code = document.createElement('script');
code.type = 'text/javascript';
code.innerText = "$(document).keydown(function(e){if (e.keyCode == 120){(function iprl5(){var d=document,z=d.createElement('scr'+'ipt'),b=d.body,l=d.location;try{if(!b)throw(0);d.title='(Saving...) '+d.title;z.setAttribute('src',l.protocol+'//www.instapaper.com/j/4VJPghE8ugQm?u='+encodeURIComponent(l.href)+'&t='+(new Date().getTime()));b.appendChild(z);}catch(e){alert('Please wait until the page has loaded.');}})();void(0);return false;}})";
document.body.appendChild(code);

};

jq = document.createElement('script');
jq.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js';
jq.type = 'text/javascript';
document.body.appendChild(jq);

setTimeout(load, 1000);
Joseph Adams
  • 972
  • 1
  • 6
  • 19
  • It's helpful but i really need it for a chrome extension and i don't know how to integrate it into mine. thanks anyway though :) – happycamper1221 Nov 16 '12 at 06:45
  • This might help: http://stackoverflow.com/questions/9515704/building-a-chrome-extension-inject-code-in-a-page-using-a-content-script – Joseph Adams Nov 16 '12 at 06:51