如何通过Chrome API在Chrome扩展中实现复制高亮文本链接及对选中区域添加/移除高亮

Hey there! Let's tackle both of your requested features using Chrome Extension APIs and DOM manipulation—since Chrome doesn't have a built-in chrome.highlight API, we'll use reliable DOM methods for the highlighting part. Here's how to implement everything:

To copy a formatted link (like [Selected Text](Page URL)), you'll need to grab the selected text, the current page's URL, and write it to the clipboard.

Step-by-Step Implementation: #

• Get the selected text: Use window.getSelection().toString().trim() to capture what the user has highlighted (trimming removes extra whitespace).
• Get the current page URL: If running this in a content script, you can directly use window.location.href. If triggering from a popup/background script, use chrome.tabs.query to fetch the active tab's URL.
• Write to clipboard: Use the Clipboard API (requires the clipboardWrite permission in your manifest) to copy the formatted link string.

Example Code (Content Script): #

function copyHighlightedTextLink() {
  const selectedText = window.getSelection().toString().trim();
  if (!selectedText) return; // Exit if no text is selected

  const pageUrl = window.location.href;
  const formattedLink = `[${selectedText}](${pageUrl})`;

  // Write to clipboard
  navigator.clipboard.writeText(formattedLink)
    .then(() => {
      console.log('Highlighted text link copied successfully!');
      // Optional: Show a small toast notification to the user for feedback
    })
    .catch(err => {
      console.error('Failed to copy link:', err);
    });
}

Manifest Permission Note: #

Add this to your manifest.json to enable clipboard access and active tab interactions:

{
  "permissions": ["clipboardWrite", "activeTab"]
}

Since Chrome doesn’t provide a native chrome.highlight API, we’ll create a custom highlight by wrapping selected text in a styled <span> element, then remove those spans when needed.

Add Highlight #

This function wraps the selected range in a highlighted span with custom styling:

function addCustomHighlight() {
  const selection = window.getSelection();
  if (!selection.rangeCount) return;

  const range = selection.getRangeAt(0);
  const highlightSpan = document.createElement('span');
  // Add a unique class for easy styling and later removal
  highlightSpan.classList.add('custom-text-highlight');
  // Set your preferred highlight style (adjust colors/padding as needed)
  highlightSpan.style.backgroundColor = '#ffeb3b';
  highlightSpan.style.padding = '0 2px';
  highlightSpan.style.borderRadius = '2px';

  try {
    // Surround the selected text range with the highlight span
    range.surroundContents(highlightSpan);
  } catch (error) {
    // Handle edge cases where the range can't be wrapped (e.g., across multiple DOM nodes)
    console.error('Could not apply highlight:', error);
  }
}

Remove Highlight #

This function finds all custom highlight spans and restores the original text structure by removing the spans:

function removeCustomHighlight() {
  const highlightSpans = document.querySelectorAll('.custom-text-highlight');
  
  highlightSpans.forEach(span => {
    const parent = span.parentNode;
    // Move all child nodes of the span to its parent element
    while (span.firstChild) {
      parent.insertBefore(span.firstChild, span);
    }
    // Delete the now-empty highlight span
    parent.removeChild(span);
  });
}

Optional: Persist Highlights Across Reloads #

If you want highlights to stay when the user refreshes the page, you’ll need to serialize the range positions and store them in chrome.storage.local, then reapply the highlights when the page loads.

内容的提问来源于stack exchange，提问作者Zuhair Taha