www.webdeveloper.com
Results 1 to 2 of 2

Thread: getting element HTML code from an event

Hybrid View

  1. #1
    Join Date
    Feb 2013
    Posts
    2

    getting element HTML code from an event

    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:

    HTML 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

  2. #2
    Join Date
    Feb 2013
    Posts
    2

    Arrow

    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:
    Code:
    {
      "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:
    Code:
    //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

    Code:
    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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles