如何使用按鈕單擊將從內容腳本中檢索到的值存儲到文本框中

我是構建Chrome擴展的新手。我正在使用內容腳本來檢索值。但Iam無法將這些值加載到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 
});

任何人可以幫助我在存儲值文本框，在彈出框，按鈕點擊後。

來源

2015-08-23 Srinivas B

對於特定任務的活動頁面和獨立內容的腳本文件，甚至沒有必要的：

manifest.json的：

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

popup.html：

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

彈出。（無需「load」事件，因爲腳本DOM被解析之後執行）JS：

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通過。

來源

2015-08-23 11:26:12 wOxxOm

嗨，這工作的罰款。現在如果我想在窗口對象中檢索一些json值，比如window.configData.ensightenTag.pageSource，它顯示「Can not read property'ensightenTag'of undefined。但是當我在開發者工具的控制檯中做同樣的事情時，我我得到的JSON值您能否提供一些想法來檢索JSON對象從window.configData.ensightenTag –

這也可能是一個對象，所以儘量'代碼：「JSON.stringify（」 + jsonValueToFind +「）」' – wOxxOm

不過，同錯誤。woxx ..是否有其他方式來獲取window.configData.ensightenTag.pageSource的價值 –

如何使用按鈕單擊將從內容腳本中檢索到的值存儲到文本框中

回答

相關問題