我是构建 Chrome 扩展的新手。我正在使用内容脚本来检索值。但我无法将值加载到 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
});
任何人都可以帮助我在单击按钮后将值存储到弹出框中的文本框中。
最佳答案
对于特定任务，甚至不需要事件页面和单独的内容脚本文件:
manifest.json:
"permissions": ["tabs", "activeTab"]
popup.html:
...............
<script src="popup.js"></script>
</body>
</html>
popup.js(不需要“load”事件，因为脚本在解析 DOM 后执行):
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 的第一个参数)由于是可选的而被简单地省略。- 注入(inject)的脚本结果是代码中的最后一个值，它以数组
结果形式传递。
关于javascript - 如何通过单击按钮将从内容脚本检索到的值存储到文本框中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32165792/