getting element HTML code from an event

This site is best viewed in a modern browser with JavaScript enabled.

getting element HTML code from an event

stevers

Hi,

First post here and new to JS (first project in JS and first time I am writing a web application). So go easy on me if my question is dumb.

Here is what I am trying to do: Make a chrome extension that lets users rate suggested items from amazon.

I am trying to get the HTML code of the element the user clicks on. Parse that code, get some additional information, and send it along with the user rating.

Problem is that I don't exactly know how to get the HTML code of an element to parse it.

I added an onClick event but event.target does not work for me (not sure if this is supported by JS, but this is how I used to get event information in other languages).

Here is my code:

.
.//some code here
.
function genericOnClick(event) 
{
      console.log(event.target);
}
.
.//some code here
.
var child1 = chrome.contextMenus.create
(
    {"title": "Rank 1", "contexts":["all"], "parentId": parent1, "onclick": genericOnClick}
);
.
.//some code here
.

Tried e.currentTarget.innerHTML and e.currentTarget.outterHTML. On both occasions I got an error. Though document.getElementsByTagName('html')[0].innerHTML works fine is error free. Any idea why I cannot use innerHTML from an event target?

Any help is appericated since I've been stuck on this for a while. Also if anyone here has some tips or that might help me in this project then please share.

Thank you

stevers

After reading more tutorials, I think I got things all wrong.

Before first getting HTML code, I first need to a add a content page and use it instead of the background one.

Did just that but for some reason I could not establish a connection between the bg page and content page.

Here is my code:

Manifest page:

{
  "name": "x",
  "description": "x",
  "version": "0.1",
  "permissions": ["contextMenus", "tabs", "notifications"],
   "content_scripts": [
    {
      "matches": ["http://*/*","https://*/*"],
      "js": ["jquery.js", "content_script.js"]
    }
  ],
  "background": {
    "scripts": ["sample.js"]
  },
  "manifest_version": 2
}

Content Page:

//copied from google tutorials
chrome.extension.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log(sender.tab ?
                "from a content script:" + sender.tab.url :
                "from the extension");
    if (request.greeting == "hello")
      sendResponse({farewell: "goodbye"});
  });

background page

function genericOnClick(info, tab) 
{
       //copy pasted from google tutorials. My own code also didn't work
       chrome.tabs.getSelected(null, function(tab) {
  chrome.tabs.sendMessage(tab.id, {greeting: "hello"}, function(response) {
    console.log(response.farewell);
  });
});


}



// Create a parent item and two children.
var parent1 = chrome.contextMenus.create({"title": "Rank Trigger", "contexts":["all"]});

var child1 = chrome.contextMenus.create
(
    {"title": "Rank 1", "contexts":["all"], "parentId": parent1, "onclick": genericOnClick}
);
var child2 = chrome.contextMenus.create
(
    {"title": "Rank 2", "contexts":["all"], "parentId": parent1, "onclick": genericOnClick}
);
var child2 = chrome.contextMenus.create
(
    {"title": "Rank 3", "contexts":["all"], "parentId": parent1, "onclick": genericOnClick}
);

Any ideas please? Maybe cuz the event is triggered from the context menu but I am not too sure. I am new to JS and chrome extensions programming.

Thanks