0

I am having a hard time understanding how to pass information, most specifically values of an HTML element with a specific ID, in Chrome extensions I've tried going through the extension documentation and that has barely helped me.

Ultimately, the extension I'm trying to build will read a specific page which dynamically generates forms. The form has an <input id="foo"> tag; when the <input>is generated I would like the content script to pass a message containing the text contained within another <div id="bar"> on the same page to the background page. Once at the background page, the text will be parsed and a switch statement will create a div underneath the input and color it either red or green and fill with some text.

For now, however, I'm struggling with message passing and how to determine what my content script is actually doing. At this point, can someone tell me how I can simply a send a message to the background page once a button is clicked in the user's tab and execute an alert() with the button's id?

Here is what I have so far:

manifest.json

{
"manifest_version": 2,

"name": "Authinator",
"description": "extension",
"version": "1.0",
"background": {
    "scripts": ["background.js"]
},
"browser_action":{
    "default_icon": "icon.png"
},
"permissions":[ 
    "tabs",
    "activeTab",
    "https://ajax.googleapis.com/"
],
"content_scripts": [ 
  {
    "matches": [ "http://*/*", "https://*/*"],
    "js": [ "auth.js", "jquery.min.js"]
  }]
}

background page (background.js):

//alerts when extension icon clicked
chrome.browserAction.onClicked.addListener(function(tab) { alert('icon clicked')});

//trying to alert when button is clicked
chrome.runtime.onMessage.addListener(function(response, sender, sendResponse){
    alert(response);
})

content script (auth.js):

var someButton = document.findElemendById("foo");
someButton.addEventListener("click", function(button){
    chrome.runtime.sendMessage(button.id);
})

Any help or direction here would be much appreciated. Thanks guys!

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
Jay
  • 199
  • 2
  • 12
  • If your content script is injected, the code you have entered should work. I don't understand your problem statement properly. Are you not sure whether the script is injected or not? – years_of_no_light Mar 03 '16 at 07:27
  • Based on my understanding, you want to send a message to the background page. If you only need to send a single message to another part of your extension, you should use th4e simplified 'runtime.sendMessage' or 'tabs.sendMessage'. have check this docs: https://developer.chrome.com/extensions/messaging. related SO ticket: http://stackoverflow.com/questions/15888177/chrome-extension-sendmessage-error-from-content-script-to-background-html – Android Enthusiast Mar 03 '16 at 15:18

1 Answers1

2

You are sending your message as a String, your message should be a object else it will treat your first parameter as extension id. Read here.

Try this:

chrome.runtime.sendMessage({buttonID: button.id});

And then, at receiving end:

alert(response.buttonID);

It should work.

I hope this helps.

Nikhil Sharma
  • 891
  • 1
  • 8
  • 11
  • Thanks! That definitely helped. Also, I'd entered findElemendById, which is not a method lol (double facepalm). It's all fixed now, and I'm now working on the part where the strings are parsed to process the response. – Jay Mar 05 '16 at 01:01
  • @Jay Great. Good luck. You can upvote and accept the answer if that worked out. – Nikhil Sharma Mar 05 '16 at 01:12
  • I don't have enough reputation to upvote yet, but I did try. I will come back to the post and do that once I have enough rep :D – Jay Mar 06 '16 at 00:05
  • @Jay Oh yes. Thanks :-) – Nikhil Sharma Mar 06 '16 at 02:49