单击菜单时触发事件

Question

I'm working on a Chrome extension. I've used chrome.contextMenus.create to create a menu item, and also passed in the function name to fire on click. Now what I want to do is, get the active link's textContent when I click on the context menu item. What type and/or event should I listen to? I don't know if textContent is even the correct thing. Let me try to describe: When you make a query on Google (let's say "putty" for the sake of example), the first hit is "PuTTY Download Page - Chiark" which points to some URL. What I want to get is this "PuTTy Download Page - Chiark" rather than its URL.

EDIT: This is what I have so far:

chrome.contextMenus.create({'title': 'Add to mySU bookmarks', 'contexts': ['link', 'page'], 'onclick': mySUBookmark});

function mySUBookmark() {
  var a = document.addEventListener('click', function() {
  ...
  });
}

I wonder if I'm in the right path.

Regards, mto

Answer 1

Your click handler, is passed a contextMenusInternal.OnClickData info object , which has some properties of what was clicked (not the actual object itself). For link elements this includes a linkUrl property, which you could use to create an element selector for the element, and pass this to your content script (which can access the page DOM).

This may be something like the below (you may need to change to work for your extension)

function mySUBookmark(info, tab) {
   var elSelector = 'a[href="'+info.linkUrl+'"]';
   console.log(elSelector);
   // now send the selector to the content script on the page so it can use it
   // to select the element from the page DOM and do whatever you want with the
   // text / html of the element
   chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      chrome.tabs.sendMessage(tabs[0].id, { elSel: elSelector }, function(resp) {});
   });
}

These links could help in understanding how all this stuff works,

• Sample context menu example
• Chrome extension content scripts
• Sending message from background to context script