Question

我制作了一个非常简单的Chrome扩展程序，其中应该发生的是用户可以在文本框中输入值，按下按钮，并将输入的值填入页面文本框（或任何其他元素）。

所以，我有

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。如何访问此元素，或如何写这个正确？我是新来的。

Answer 1

问题是document.getElementById("data-details")位于注入的脚本中，浏览器会搜索页面中标识为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();

如何从弹出DOM中读取数据

1 个答案: