如何通过单击按钮将从内容脚本中检索到的值存储到文本框中 [英] How to store the values retrieved from content script into textboxes with a button click
本文介绍了如何通过单击按钮将从内容脚本中检索到的值存储到文本框中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是第一次建立chrome扩展程序.我正在使用内容脚本来检索值.但是我无法将这些值加载到popup.html中.
I am new to building chrome extension. I am using content script to retrieve the values. But Iam unable to load the values into the popup.html.
下面是代码.
popup.html
<head>
<script src="popup.js"></script>
</head>
<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="jsonName">Json Name</label><br />
<input type="text" id="jsonName" name="jsonName" value=""/></p>
<p><label for="jsonKey">Key</label><br />
<input type="text" id="jsonKey" name="jsonKey" value="" /></p>
<p><label for="jsonValue">JSON Value</label><br />
<input type="text" id="jsonValue" name="jsonValue" value="" /></p>
<p>
<input id="submitJson" type="submit" value="Send JSON Object / Valued" />
<!-- <span id="status-display"></span> -->
</p>
</form>
</body>
</html>
popup.js
function onPageDetailsReceived(pageDetails) {
document.getElementById('title').value = pageDetails.title;
document.getElementById('url').value = pageDetails.url;
document.getElementById('jsonValue').value = pageDetails.retrievedJsonValue;
}
window.addEventListener('load', function(evt) {
document.getElementById('submitJson').addEventListener('click',function(){
var jsonName = document.getElementById('jsonName').value;
if(jsonName.length > 1){
var jsonKey = document.getElementById('jsonKey').value;
var jsonValueToFind = "";
jsonValueToFind = jsonName+"."+jsonKey;
chrome.runtime.getBackgroundPage(function(eventPage) {
eventPage.getPageDetails(function(response){
alert(response.url);
document.getElementById('url').value = response.url;
}, jsonValueToFind);
});
}
});
});
event.js
function getPageDetails(callback,jsonValueToFind) {
chrome.tabs.executeScript(null,
{code:'var jsonValue ='+jsonValueToFind},
function(){
chrome.tabs.executeScript(null,{file: 'content.js' });
});
chrome.runtime.onMessage.addListener(function(message) {
callback(message);
});
}
content.js
chrome.runtime.sendMessage({
'title': document.title,
'url': window.location.href,
'retrievedJsonValue': jsonValue
});
单击按钮后，有人可以帮我将值存储到弹出框中的文本框中吗?
Can anybody help me in storing the values to text boxes in the popup boxes, after the button click.
推荐答案
对于特定任务，甚至不需要事件页面和单独的内容脚本文件:
For the particular task the event page and separate content script file aren't even necessary:
manifest.json:
manifest.json:
"permissions": ["tabs", "activeTab"]
popup.html:
popup.html:
...............
<script src="popup.js"></script>
</body>
</html>
popup.js(由于在解析DOM之后执行脚本，因此不需要加载"事件):
popup.js ("load" event isn't needed since the script is executed after DOM is parsed):
document.getElementById('submitJson').addEventListener('click', function() {
var jsonName = document.getElementById('jsonName').value;
if(jsonName.length > 1) {
var jsonKey = document.getElementById('jsonKey').value;
getPageDetails(jsonName + "." + jsonKey, function(pageDetails) {
Object.keys(pageDetails).forEach(function(id) {
document.getElementById(id).value = pageDetails[id];
});
});
}
});
function getPageDetails(jsonValueToFind, callback) {
chrome.tabs.executeScript({code: jsonValueToFind}, function(result) {
var value = result[0];
chrome.tabs.query({currentWindow: true, active: true}, function(tabs) {
callback({
url: tabs[0].url,
title: tabs[0].title,
jsonValue: value
});
});
});
}
-
tabId(executeScript的第一个参数)由于是可选的而被省略. - 注入的脚本结果是代码中的最后一个值，并以数组
result的形式传递. tabId(the first parameter of executeScript) is simply omitted due to being optional.- injected script result is the last value in the code and it's passed in an array
result.
这篇关于如何通过单击按钮将从内容脚本中检索到的值存储到文本框中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
