Chrome扩展：如何通过Ajax将链接URL传入qTip实现预览

Hey there! I see you're working on a Chrome extension that shows link previews in a tooltip using qtip, but you're stuck on passing the correct URL to your Ajax call. Let's fix this step by step.

First, Let's Spot the Core Issue #

Looking at your code, the main problem is in this line:

url: api.elements.target.attr('e.url')

e.url isn't a valid attribute—you're trying to reference the event object's property incorrectly. Instead, you need to grab the actual href of the link that triggered the tooltip. Also, I noticed you have let url = this.url; early on—this should be this.href (DOM anchor elements use href, not url).

Corrected Code with Annotations #

Here's the fixed version with comments pointing out key changes:

jQuery(function($){
  $('body').on('mouseenter', 'a', function(e) {
    var o = this;
    // Fix: Use href instead of url for anchor elements
    let url = this.href;
    if ( o.href != '#' ) {
      chrome.extension.sendRequest('show', function(r) {
        var uri = $.url.parse(o.href),
            position,
            text = uri.source.replace(uri.host, '<span style="color:' + r.domaincolor + '">' + uri.host + '</span>');

        // Position logic remains unchanged
        if (r.istooltip) {
          position = { 
            my: 'top left', 
            target: 'mouse', 
            viewport: $(window), 
            adjust: { y: +25 } 
          }
        } else {
          position = { 
            my: r.position, 
            at: r.position, 
            target: $(window), 
            adjust: { y: ( r.position === 'left bottom' ? -20 : 0 ) } 
          }
        }

        // Add external link icon if needed
        if ( $(o).attr('target') == '_blank' ) 
          text = '<i class="fa fa-external-link-square" style="padding-right: 5px;"></i>' + text;

        // Initialize qtip with fixed Ajax logic
        $(o).qtip({ 
          overwrite: false,
          content: {
            text: function(event, api) {
              // Fix: Grab the actual href from the target link
              const targetUrl = api.elements.target.attr('href');
              $.ajax({
                url: targetUrl // Use the link's real URL for the request
              })
              .then(function(content) {
                // Update tooltip with fetched content
                api.set('content.text', content);
              }, function(xhr, status, error) {
                // Show error message if request fails
                api.set('content.text', status + ': ' + error);
              });
              return 'Loading...'; // Initial loading state text
            }
          },
          show: { event: e.type, ready: true, delay: r.time },
          hide: { fixed: true },
          position: position,
          style: { classes: 'qtip-dark', tip: { corner: false } }
        }, e);
      })
    }
  }).on('mouseleave', 'a', function(e){
    $(this).qtip('destroy');
  })
});

Critical Chrome Extension Notes #

1. Cross-Origin Permissions: If you're fetching content from external websites (not your extension's local files), you need to add permissions to your manifest.json. For full access to all URLs:

   "permissions": ["<all_urls>"]
   

   Restrict it to specific domains if you don't need broad access.

2. CORS Restrictions: Some websites block cross-origin requests. If you hit this issue, you might need to use a content script to inject code directly into the target page, or leverage Chrome's webRequest API to modify request headers.

3. qtip Setup: Ensure you're loading qtip's CSS and JS files correctly in your extension's manifest.json (under content_scripts or background depending on your extension structure).

That should get your tooltip showing the correct link preview instead of the current page. Feel free to ask if you run into any other hiccups!

内容的提问来源于stack exchange，提问作者Ben Stewart