0

Bear with me please if this sounds too simple.

I am writing a chrome extension that once the user right clicks on an object in the page, the context menu appears and there he has an option to get the ID the of clicked div-class + rate it.

I've been working on this for a few days and managed to add the extra buttons to the context menu. Once any of those buttons is clicked, the page's source is logged. Could have taken me less time to do that but it's my first time writing in javascript and I got stuck along the way.

Anyways I don't want the whole html code of the page, but the clicked div-class. I after googling it turns out that the best way to do this is by using jquery's "html" function instead of pure javascript. Problem is that it doesn't work for me.

Here is my code:

BackgroundPage (everything seems to be working fine here)

    function genericOnClick(tab) 
    {
        console.log(tab.pageUrl);

        chrome.tabs.getSelected(null, function(tab) 
        {
            chrome.tabs.sendMessage(tab.id, {action: "getSource"}, function(source) {
            console.log(source);
            });
        });

    }


    // 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 child3 = chrome.contextMenus.create
(
    {"title": "Rank 3", "contexts":["all"], "parentId": parent1, "onclick": genericOnClick}
);

ContentPage: (problem here)

chrome.extension.onMessage.addListener(function(request, sender, callback) 
{
    if (request.action == "getSource")
    {
     // callback(document.documentElement.outerHTML); //here i can get the page's whole source, I only want the clicked div class
     callback($('div class).html(); <--- something wrong here
    }

  });

Manifest file:

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

Any ideas? Again I know that my questions seems simple but I am self teaching myself all this, and for some reason I finding web-programming a little harder than application programming.

Much thanks.

EDIT: Just for clarification the html source I want is this: <div class="story reviewed-product-story" data-story-id="488481648"....</div>. I want this div class, so that I can parse it to get the data-story-id. If there is a way to get the ID without getting the div class first then that would also work (and maybe even preferable)

EDIT: Thanks to Adeneo, I can now get the ID of the first div-class in the page's source, but not the clicked one. A step forward on what I had but not exactly what I need. Maybe I have to get the source of clicked div before using $('.story').data('story-id'). Any suggestions?

1 Answer 1

1

I'm guessing it's supposed to be:

chrome.extension.onMessage.addListener(function(request, sender, callback) {
    console.log('message listener');
    if (request.action == "getSource") {
        callback( $('.story').data('story-id') );
    }
});
7
  • No not really. Edited the question for more clarification. Thanks for answering though :)
    – r3x
    Feb 15, 2013 at 16:17
  • @r3x - Changed it, does that come closer ?
    – adeneo
    Feb 15, 2013 at 16:21
  • No that did not work unfortunately. Nothing gets logged, more so when I wrote alert($('.story').data('story-id') )); I got null...Maybe I am calling out the jquery methods all wrong and it should be jquery.data or something similar. Thanks anyways :)
    – r3x
    Feb 15, 2013 at 16:47
  • @r3x - Try putting a console.log at the top and see if the event even triggers, like in my edited code above ?
    – adeneo
    Feb 15, 2013 at 17:16
  • I can't really recreate your function, but did you try with $(this).data('story-id') or with one of the parameters, like sender $(sender).data('story-id') ??
    – adeneo
    Feb 16, 2013 at 18:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.