Ajouter / injecter le contenu du fichier .html dans chaque site Web visité - Extension Chrome?

Question

Je ai du HTML qui a une balise image et un peu de jQuery comme ceci :

    $(document).ready(function() {
      var $img = $("#MainImage");
      $img.hide();
      $('div').mousemove(function(e) {
        if ($(this).attr('align') === 'center') {
        // seulement afficher si l'attribut align a la valeur center
        $img.fadeIn(0);
        $img.offset({
          top: e.pageY - $img.outerHeight()-2,
          left: e.pageX - ($img.outerWidth()-18)
        });
      }
    }).mouseleave(function() {
      $img.fadeOut(250);
    });

J'ai également ce fichier de manifeste avec le code suivant :

{
  "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"
  }]
}

Le but de ce script/extension est que dès que l'utilisateur survole n'importe quelle div (avec l'attribut HTML "align='center'"), une image apparaît à côté du curseur de la souris... Cela fonctionne déjà mais ce que je dois faire, c'est insérer le script/le fichier HTML dans les balises "body" de chaque page Web lorsque l'extension est installée.

Comment puis-je y parvenir ?

Merci d'avance.

Answer 1

Je ne sais pas comment vous feriez cela dans une extension Chrome, mais, si vous êtes satisfait avec un userscript :

Créez un fichier et mettez un en-tête userscript en haut de celui-ci qui décrit votre application et contient votre nom, etc. Ensuite, vous pouvez créer tous les éléments dont vous avez besoin en utilisant du JS (la balise img) et lier un hover à tous les img. J'ai moi-même écrit un tel script, mais pour Instapaper. Voici la 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);