我做了一些关于javascript和jQuery的在线课程，并决定通过重新设计chrome扩展来测试我的技能。我正在玩的那个是基于Reddit Hover Text
我玩了它并切换了一些功能，注释了很多功能，并试图让悬停选项卡适用于任何网站上的任何链接。但它仍然只适用于Reddit.com。
我唯一可以看到的仍然是reddit具体是CSS div名称，但我不相信这会产生影响。如果有人能帮我解决这个问题，我将不胜感激。
我确定有更好的方法来显示代码，但这里是主要的扩展JS文件。如果有一个更好的方式来展示/给出这个（也许是支持文件），我全都是耳朵。
/**
* 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';
}
答案 0 :(得分：0)
问题在于你没有在这里发布的manifest.json。 在那里搜索'reddit'。 阅读有关该清单参数的文档及其用途。