（jquery的新手）为什么我的chrome扩展程序无法在reddit上运行？

Question

I did a few online courses on javascript and jQuery and decided to test out my skills by reworking a chrome extension. The one I am playing with is based off of Reddit Hover Text

I played around with it and switched a few functions, commented out a lot of functionality and tried to make the hover tab apply to any link on any site. But it still only works on Reddit.com.

The only thing I can see that is still reddit specific is the CSS div name, but I don't believe that has an effect. If anyone can help me figure this out I would be grateful.

---

I'm sure there is a better way to show the code, but here is the main extension JS file. If there is a better way to show/give this (and perhaps the supporting files) I'm all ears.

---

    /**
 * Copyright 2011 Zoee Silcock (zoeetrope.com)
 *
 * This file is part of Reddit Hover Text.
 *
 * Reddit Hover Text is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * Reddit Hover Text is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with Reddit Hover Text. If not, see <http://www.gnu.org/licenses/>.
 **/

/**
 * The timeout variable we use to delay showing and hiding of the hover div.
 **/
var hideTimeout;
var showTimeout;
/**
 * The url whose data we have in the hover div currently, it's used to avoid
 * asking for the same data several times in a row.
 **/
var lastUrl;
/**
 * The link_id whose data we have in the hover div currently, it's used to avoid
 * asking for the same data several times in a row.
 **/
var lastLink;

/**
 * This is where the magic starts as soon as the page has finished loading.
 * We go through all the anchor tags with the class title and check if they
 * are text based submissions and not url submissions. We add eventhandlers for
 * mouseenter and mouseleave to the text submissions.
 **/
$(document).ready(function() {
    initHover();

  $('a').mouseenter(handleMouseEnter);
  $('a').mouseleave(handleMouseLeave);
});

/**
 * This function adds the floating div we use to display the content. We are
 * handling mouseenter and mouseleave events on it to avoid hiding the hover
 * when the user moves the mouse over it. This allows the user to press links
 * in the content.
 **/
function initHover() {
    $('body').append('<div id="reddit-hover">a</div>');
    $('#reddit-hover').hide();
    $('#reddit-hover').hover(function() {
        if(hideTimeout !== null) {
            // Don't hide the hover if the mouse enters the hover.
            clearTimeout(hideTimeout);
            hideTimeout = null;
        }
    }, handleMouseLeave);
}

/**
 * This is the event handler for mouseenter on the links. First we check to see
 * if there is a hideHover() pending, if so we will cancel it. Next we will
 * check if we need to request new data via ajax. Finally we show the hover
 * with a 250 ms delay to avoid unintended triggers.
 *
 * @argument {object} e The event object.
 **/
function handleMouseEnter(e) {
  //var thingElement = $(e.target).closest('.thing');
    var url = $(e.target).attr('href');
    var linkId = url;
    var showDelay = 1000;
/** This is regex is to check to see if it is a comments link and to see if it is a self link, then it runs the roll over **/
  // var regex = new RegExp('/r/.*/comments');

  /* if (regex.exec(url) !== null &&
      $(e.target).closest('.entry').find('.expando-button.selftext').length === 1) { */
    if(hideTimeout !== null && lastLink !== linkId) {
      clearTimeout(hideTimeout);
      hideTimeout = null;
      showDelay = 0;
    }

    showTimeout = setTimeout(function() {
      showTimeout = null;
      if (lastLink !== linkId) {
        // Old verion -> lastUrl = 'http://www.reddit.com' + url;
        lastUrl = url;
        populateHover(linkId, url);
      }

      positionHover($(e.target));
      showHover();
    }, showDelay);
  }
// }

/**
 * This is the event handler for mouseleave both on links and on the actual
 * hover div. We use a 250 ms timeout which allows the user to move from the
 * link to the hover and back without hiding the hover.
 *
 * @argument {object} e The event object.
 **/
function handleMouseLeave(e) {
    if(showTimeout !== null) {
        clearTimeout(showTimeout);
        showTimeout = null;
    } else {
        hideTimeout = setTimeout(function() {
            hideTimeout = null;
            hideHover();
        }, 250);
    }
}

/**
 * This function positions the hover div based on the location of the link
 * it is attached to.
 *
 * @argument {object} element The element used to decide the placement of the
 * hover div.
 **/

function positionHover(element) {
    var position = $(element).offset();

    $('#reddit-hover').css('left', position.left);
    $('#reddit-hover').css('top', position.top + $(element).height() + 2);
}

/**
 * This is where we actually put content into the hover div. We start by
 * placing our loading gif so the user knows that we are retreiving the data.
 * Next we trigger an ajax call to the link and extract the selftext_html
 * from the JSON result.
 *
 * @argument {string} linkId The id of the link to fetch.
 **/

function populateHover(linkId, url) {
    lastLink = linkId;
    $('#reddit-hover').html('<img src="' + chrome.extension.getURL("/ajax-loader2.gif") + '" />');

 /*  This is the original funciton to pull data from the Reddit API
 $.ajax({
    url: 'http://www.reddit.com/api/expando',
    type: 'POST',
    data: {
      'link_id': linkId
    },
    success: function(data) {
      $('#reddit-hover').html(html_entity_decode(data));
      $('#reddit-hover').prepend(getOptionsDiv());

      if (markAsVisitedEnabled()) {
        chrome.extension.sendRequest({action: 'addUrlToHistory', url: lastUrl});
      }
    }
  }).fail(function() {
    hideHover();
    lastUrl = '';
    lastLink = null;
    $('#reddit-hover').html('');
  }); */

  var data =  url + '<br>The description hover overlay goes here. If you are seeing this text that means it worked. Isnt that fantastic? I sure think its fantastic';
  $('#reddit-hover').html(data);

}

/**
 * This shows the hover div, it's in a separate function in case we decide to
 * put an animation on it later.
 **/
function showHover() {
    $('#reddit-hover').show();
}

/**
 * This hides the hover div, it's in a separate function in case we decide to
 * put an animation on it later.
 **/
function hideHover() {
    $('#reddit-hover').hide();
}

function getOptionsDiv() {
  var div = $('<div class="optionsDiv"></div>');
  var markAsVisited = $('<a href="#">Mark as visited</a>');
  var visitedHelp = $('<span>(Click to toggle marking links as visited.)</span>');

  if(!markAsVisitedEnabled()) {
    markAsVisited.addClass('enableisited');
  } else {
    markAsVisited.addClass('disableVisited');
  }

  $(markAsVisited).bind('click', function(event) {
    event.preventDefault();
    toggleMarkAsVisited();

    if(!markAsVisitedEnabled()) {
      $(this).addClass('enableVisited');
      $(this).removeClass('disableVisited');
    } else {
      $(this).addClass('disableVisited');
      $(this).removeClass('enableVisited');

      chrome.extension.sendRequest({action: 'addUrlToHistory', url: lastUrl});
    }
  });

  $(markAsVisited).bind('mouseenter', {help: visitedHelp}, function(event) {
    $(event.data.help).show();
  });
  $(markAsVisited).bind('mouseleave', {help: visitedHelp}, function(event) {
    $(event.data.help).hide();
  });

  $(div).prepend(visitedHelp);
  $(visitedHelp).hide();
  $(div).prepend(markAsVisited);

  return div;
}

function toggleMarkAsVisited() {
  if(markAsVisitedEnabled()) {
    localStorage.setItem('markAsVisited', false);
  } else {
    localStorage.setItem('markAsVisited', true);
  }
}

function markAsVisitedEnabled() {
  return localStorage.getItem('markAsVisited') === 'true';
}

Answer 1

Problem is in the manifest.json which you didnt publish here. Search for 'reddit' there. Read the docs about that manifest parameter and what its for.