gpt4 book ai didi

javascript - 如何通过单击按钮将从内容脚本检索到的值存储到文本框中

转载 作者:行者123 更新时间:2023-12-03 09:07:15 26 4
gpt4 key购买 nike

我是构建 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com