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

【问题标题】：How to store the values retrieved from content script into textboxes with a button click如何通过单击按钮将从内容脚本检索到的值存储到文本框中
【发布时间】：2015-11-16 21:39:07
【问题描述】：

我是构建 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
});

点击按钮后，谁能帮我将值存储到弹出框中的文本框中。

【问题讨论】：

标签： javascript html json google-chrome-extension

【解决方案1】：

对于特定任务，甚至不需要事件页面和单独的内容脚本文件：

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 的第一个参数）因为是可选的，所以被省略了。
注入的脚本结果是代码中的最后一个值，它以数组 result 的形式传递。

【讨论】：

嗨，工作正常。现在，如果我想检索窗口对象中的一些 json 值，例如 window.configData.ensightenTag.pageSource，它会显示“无法读取未定义的属性 'ensightenTag'。但是当我在开发人员工具的控制台中做同样的事情时，我我正在获取 json 值。你能建议一些从 window.configData.ensightenTag 检索 json 对象的想法
这可能是一个对象，所以试试code: "JSON.stringify("+jsonValueToFind+")"
仍然是同样的错误。 woxx .. 还有其他方法可以获取 window.configData.ensightenTag.pageSource 的值
这是一个单独的问题，搜索unsafeWindow chrome解决方案。