Question

标题说明了一切，我对Chrome扩展程序非常陌生（这是我的第一个扩展名）。

我正在制作一个基本扩展，其中包含一个简单的文本字段，我希望将其内容显示为页面加载时的警报。

我的popup.html看起来像：

  <html>
  <body>
      <p>Name: <input type="text" id="test" value="Mickey Mouse"></p>
  </body>
  </html>

我的内容脚本有：

  $(document).ready(function(){
  alert("Value: " + $("#test").val());
  });

和manifest.json是：

  {
    "manifest_version": 2,

    "name":...
     ,

    "browser_action": {...
     },

     "content_scripts": [
     {
        "matches": ["http://*/*"],
         "js": ["jquery.js","script.js"]
     }
     ]
  }

但网页始终显示：

enter image description here

Answer 1

尝试从内容脚本访问popup.html上定义的输入的值将永远不会起作用。请记住，内容脚本可以查看注入它们的页面的DOM以及 nothing else。（在您的示例中，文本输入存储在popup.html）的DOM中。

解决此问题的一种方法是使用message passing。因此，在popup.html内，您可以使用消息传递API将包含文本输入值的消息发送到内容脚本。

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

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);
}

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

1 个答案: