Chrome扩展程序:将DOM信息传递到后台页面/脚本

时间:2016-03-03 00:02:03

标签: javascript html google-chrome google-chrome-extension

我很难理解如何传递信息,特别是具有特定ID的HTML元素的值,在Chrome扩展程序中我尝试通过extension documentation并且几乎没有帮助我

最终,我尝试构建的扩展程序将读取一个动态生成表单的特定页面。表单包含<input id="foo">标记;生成<input>时,我希望内容脚本将包含同一页面上另一个<div id="bar">中包含的文本的消息传递给后台页面。一旦进入后台页面,文本将被解析,并且switch语句将在输入下方创建一个div,并将其颜色为红色或绿色,并填充一些文本。

但是,现在,我正在努力处理消息传递以及如何确定我的内容脚本实际上在做什么。此时,有人可以告诉我,只要在用户选项卡中单击按钮并使用按钮的ID执行提醒(),我就可以简单地向后台页面发送消息吗?

这是我到目前为止所做的:

的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.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);
})

内容脚本(auth.js):

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

这里的任何帮助或指示都将非常感激。谢谢你们!

1 个答案:

答案 0 :(得分:2)

您将邮件作为String发送,您的邮件应该是一个对象,否则它会将您的第一个参数视为扩展ID。 阅读here

试试这个:

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

然后,在接收端:

alert(response.buttonID);

它应该有用。

我希望这会有所帮助。