Fatal编程技术网

Google chrome extension 如何从内容脚本访问popup.html中定义的文本字段

google-chrome-extension

Google chrome extension 如何从内容脚本访问popup.html中定义的文本字段,google-chrome-extension,content-script,Google Chrome Extension,Content Script,标题说明了一切，我对chrome扩展非常陌生（这是我的第一个扩展） 我正在做一个基本的扩展，它有一个简单的文本字段，我想在页面加载时将其内容显示为一个警报 My popup.html看起来像： <html> <body> <p>Name: <input type="text" id="test" value="Mickey Mouse"></p> </body> </html> ma

标题说明了一切，我对chrome扩展非常陌生（这是我的第一个扩展）

我正在做一个基本的扩展，它有一个简单的文本字段，我想在页面加载时将其内容显示为一个警报

My popup.html看起来像：

  <html>
  <body>
      <p>Name: <input type="text" id="test" value="Mickey Mouse"></p>
  </body>
  </html>
manifest.json是：

  {
    "manifest_version": 2,

    "name":...
     ,

    "browser_action": {...
     },

     "content_scripts": [
     {
        "matches": ["http://*/*"],
         "js": ["jquery.js","script.js"]
     }
     ]
  }
但网页上总是显示：

试图从内容脚本访问在
popup.html
上定义的输入值将永远无法工作。请记住，内容脚本可以查看它们被注入的页面的DOM，而不查看任何内容。（在您的示例中，文本输入存储在
popup.html
的DOM中）

解决这个问题的一个方法是使用。因此，从
popup.html
中，您可以使用消息传递API向内容脚本发送包含文本输入值的消息

在
popup.html
中，您需要向内容脚本发送消息。您需要知道要将消息发送到的选项卡的选项卡ID…作为一个简单的示例，类似这样的内容会将文本输入内容发送到所有活动选项卡：

chrome.tabs.query({}, function(tabs) {
  for(var i = 0; i < tabs.length; i++) {
    chrome.tabs.sendMessage(tabs[i].id, {txt : $("#test").val()}, function(response) {
      console.log(response);
    });
  }
});
您希望在弹出窗口显示或在选项卡中加载任何页面时显示警报吗？首先，我对这些问题表示歉意…我现在了解到，我需要通过消息传递在内容脚本和弹出页面之间建立通信…我如何才能做到这一点？您有什么想法吗？除非弹出窗口可见，否则无法访问弹出窗口中的字段。一旦它失去焦点并被隐藏，它就会被卸载，这样你就不能再访问它了。你到底想实现什么（Uticlimaly）？上面的代码片段不会向所有活动选项卡发送消息；只需转到显示弹出窗口的窗口的第一个活动选项卡。此外，
chrome.extension.onMessage
已被弃用<应该改用code>chrome.runtime.onMessage。当然，你是对的。我已经用你的更正编辑了答案。 
chrome.tabs.query({}, function(tabs) {
  for(var i = 0; i < tabs.length; i++) {
    chrome.tabs.sendMessage(tabs[i].id, {txt : $("#test").val()}, function(response) {
      console.log(response);
    });
  }
});

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  //Do stuff with the request here
  console.log(request);
}