如何閱讀從彈出DOM數據

我做了一個非常簡單的Chrome擴展哪裏是什麼應該發生的是，用戶可以輸入一個值到一個文本框，按下一個按鈕，並有填充到頁面的文本框中輸入值（或任何其他元素）。如何閱讀從彈出DOM數據

所以，我有

popup.html：

<!doctype html> 
<html> 
    <head> 
    <title>Getting Started Extension's Popup</title> 
    <script src="popup.js"></script> 
    </head> 
    <body> 
    <textarea type="text" id="data-details" cols="40" rows="5"></textarea> 
    <input type="button" id="btn-fill" value="Fill" /> 
    </body> 
</html>

popup.js：

document.addEventListener('DOMContentLoaded', function() { 
    document.getElementById("btn-fill").addEventListener("click", injectTheScript); 
}); 

function injectTheScript() { 
    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) { 
     chrome.tabs.executeScript(tabs[0].id, { file: "content_script.js" }); 
    }); 
}

content_script.js：

function fillElements() 
{ 
    var dataDetailsStr = document.getElementById("data-details").value; 

// error here : Uncaught TypeError: Cannot read property 'value' of null 

    document.getElementById("txt-page-input").value = dataDetailsStr; 

} 

fillElements();

manifest.json的：

{ 
    "manifest_version": 2, 
    "name": "Fill Data", 
    "description": "Fills data on the page", 
    "version": "1.0", 

    "permissions": [ 
    "activeTab", 
    "http://*/*" 
    ], 
    "browser_action": { 
    "default_icon": "img/icon.png", 
    "default_popup": "popup.html" 
    }, 
    "content_scripts": [{ 
    "matches": ["http://*/*"], 
    "js": ["jquery.js", "content_script.js"] 
    }] 
}

document.getElementById ("data-details")總是返回null。如何訪問這個元素，或者如何編寫這個正確的？我是新來的。

來源

2017-03-08 ihorko

另請參閱[如何訪問網頁DOM而不是擴展頁面DOM？]（// stackoverflow.com/a/4532567） – wOxxOm

related：[將參數傳遞給使用chrome.tabs.executeScript（）注入的內容腳本] （http://stackoverflow.com/q/17567624） – Makyen

-1

的問題是，document.getElementById("data-details")在注入腳本和瀏覽器搜索具有ID data-details在頁面中的對象，而不是在popup.html 所以

popup.js

document.addEventListener('DOMContentLoaded', function() { 
    document.getElementById("btn-fill").addEventListener("click", injectTheScript); 
}); 

function injectTheScript() { 
    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) { 
     chrome.tabs.executeScript(tabs[0].id, { file: "content_script.js" }); 
     chrome.tabs.sendMessage(tabs[0].id, document.getElementById("data-details").value); 
    }); 
}

content_script.js

function fillElements() 
{ 
    chrome.runtime.onMessage.addListener(function(message) { 
     document.getElementById("txt-page-input").value = message; 
    }); 


} 

fillElements();

來源

2017-03-08 18:12:26 FelixFrog

謝謝你，它的工作原理，但前提是我第二次在彈出的按鍵「填充」和代碼執行兩次... – ihorko

@ihorko，移動chrome.tabs.sendMessage在executeScript的回調中，請參閱文檔。不要忘記：大部分chrome。* API是異步的。 – wOxxOm

如何閱讀從彈出DOM數據

回答

相關問題