Question

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

点击按钮后，任何人都可以帮助我将值存储在弹出框中的文本框中。

Answer 1

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

的manifest.json：

"permissions": ["tabs", "activeTab"]

popup.html：

        ...............
        <script src="popup.js"></script>
    </body>
</html>

popup.js（＆＃34;加载＆＃34;因为在解析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中传递。

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

1 个答案: