将表单值发送到Chrome扩展

我是铬扩展开发的新手，我创建了一个扩展chrome，它根据用户给出的表单数据检索一些数据。但是，我不知道如何动态地将表单值发送给chromes扩展。以下是我正在使用的代码。 的manifest.json将表单值发送到Chrome扩展

{ 
"manifest_version": 2, 
"name": "Bookmark Extension Example", 
"description": "POST details of the current page to a remote endpoint.", 
"version": "0.2", 
"background": { 
    "scripts": ["event.js"], 
    "persistent": false 
}, 
"browser_action": { 
    "default_icon": "icon.png", 
    "default_popup": "popup.html" 
}, 
"permissions": [ 
    "tabs", 
    "http://*/*", 
    "https://*/*" 
] 
}

popup.html

<body> 
    <form id="addbookmark"> 
     <p><label for="title">Title</label><br /> 
     <input type="text" id="title" name="title" size="50" value="" /></p> 
     <p><label for="url">Url</label><br /> 
     <input type="text" id="url" name="url" size="50" value="" /></p> 
     <p><label for="summary">Summary</label><br /> 
     <textarea id="summary" name="summary" rows="6" cols="35"></textarea></p> 
     <p><label for="tags">Json Name</label><br /> 
     <input type="text" id="jsonName" name="jsonName" size="50" value="document.title" /></p> 
     <p> 
      <input id="submitJson" type="submit" value="Send JSON Object/Value" /> 
      <!-- <span id="status-display"></span> --> 
     </p> 
    </form> 
</body>

content.js

chrome.runtime.sendMessage({ 
'title': document.title, 
'url': window.location.href, 
'summary': window.location.href 
});

event.js

个

function getPageDetails(callback) { 

chrome.tabs.executeScript(null, { file: 'content.js' }); 

chrome.runtime.onMessage.addListener(function(message) { 

    callback(message); 
}); 
};

popup.js

function onPageDetailsReceived(pageDetails) { 
document.getElementById('title').value = pageDetails.title; 
document.getElementById('url').value = pageDetails.url; 
document.getElementById('summary').value = pageDetails.summary; 
} 



window.addEventListener('load', function(evt) { 

chrome.runtime.getBackgroundPage(function(eventPage) { 

    eventPage.getPageDetails(onPageDetailsReceived); 

}); 
});

任何一个可以建议我如何动态地发送文本jsonName值序得到的文档的动态数据作为警告。例如，如果用户在jsonName中输入window.location.href，它应该返回输入字段的值作为警报。

来源

2015-08-22 Srinivas B

一个小问题，我们开始之前，确保包括弹出JS在你的HTML，像这样：

popup.html

<body> 
    <form id="addbookmark"> 
     <p><label for="title">Title</label><br /> 
     <input type="text" id="title" name="title" size="50" value="" /></p> 
     <p><label for="url">Url</label><br /> 
     <input type="text" id="url" name="url" size="50" value="" /></p> 
     <p><label for="summary">Summary</label><br /> 
     <textarea id="summary" name="summary" rows="6" cols="35"></textarea></p> 
     <p><label for="tags">Json Name</label><br /> 
     <input type="text" id="jsonName" name="jsonName" size="50" value="document.title" /></p> 
     <p> 
      <input id="submitJson" type="submit" value="Send JSON Object/Value" /> 
      <!-- <span id="status-display"></span> --> 
     </p> 
    </form> 
    <script src="popup.js"></script> 
</body>

其次，由于content.js执行时，在页面上您的浏览器操作将打开，您可以添加其他代码以打开Port回到弹出页面和弹出窗口可以通信的弹出窗口。 connect和onConnect是这里的相关方法。就像这样：

content.js

chrome.runtime.sendMessage({ 
    'title': document.title, 
    'url': window.location.href, 
    'summary': window.location.href 
}); 

// Create port. 
var port = chrome.runtime.connect({ 
    name: "page" 
}); 

// Listen for messages. 
port.onMessage.addListener(function (message) { 
    if (message.name === "query") { 
    var objectPath = message.query; 
    var parts = objectPath.split('.'); 
    var obj = window; 
    var error = false; 
    // Get value. 
    for (var i = 0; i < parts.length; i++) { 
     var part = parts[i]; 
     // Check if in current object or prototype chain. 
     if (part in obj) { 
     obj = obj[part]; 
     } else { 
     error = true; 
     break; 
     } 
    } 

    if (error) { 
     port.postMessage({ 
     name: "query_error", 
     query: objectPath, 
     reason: "window." + parts.slice(0, i + 1).join('.') 
     }); 
    } else { 
     port.postMessage({ 
     name: "query_response", 
     query: objectPath, 
     value: obj 
     }); 
    } 
    } 
});

该负责创建端口并侦听从弹出的查询服务。下一页：

popup.js

function onPageDetailsReceived(pageDetails) { 
    document.getElementById('title').value = pageDetails.title; 
    document.getElementById('url').value = pageDetails.url; 
    document.getElementById('summary').value = pageDetails.summary; 
} 

// Listen for page to connect. 
chrome.runtime.onConnect.addListener(function (port) { 
    if (port.name === "page") { 
    console.log("Received page port"); 
    port.onMessage.addListener(function (message) { 
     if (message.name === "query_error") { 
     alert("Error retrieving " + message.query + "!\n" + message.reason + " was not found."); 
     } else if (message.name === "query_response") { 
     alert("Retrieved value for " + message.query + ": " + message.value); 
     } 
    }); 
    // Set button listener. 
    document.getElementById("submitJson").addEventListener("click", function (e) { 
     var value = document.getElementById("jsonName").value; 
     if (value !== "") { 
     port.postMessage({ 
      name: "query", 
      query: value 
     }); 
     } else { 
     alert("You must enter a value!"); 
     } 
    }); 
    } else { 
    console.warn("Received unknown port."); 
    } 
}); 

window.addEventListener('load', function(evt) { 
    chrome.runtime.getBackgroundPage(function(eventPage) { 
    eventPage.getPageDetails(onPageDetailsReceived); 
    }); 
});

它处理建立点击监听器，通过端口发送的查询和处理响应。

有几种方法可以改善上述情况，例如使用端口发送带有初始页面信息而不是sendMessage的消息，但是应该让您知道如何继续。另外请务必查看chrome.tabs中的现有API。如果你能以这种方式获得你想要的信息（URL，标题等），它可以简化事情！

来源

2015-08-22 16:55:27

将表单值发送到Chrome扩展

回答

相关问题