如何从 Chrome 中的网页抓取数据并输出到 Chrome 扩展弹出窗口中?

2024-03-09

对于 Google Chrome 扩展程序,我编写的用于操作扩展程序 popup.html 的 DOM 的 Javascript 似乎都不会对弹出窗口的 DOM 产生任何影响。我可以使用 content_script.js 很好地操作浏览器中当前网页的 DOM,并且我有兴趣从网页中获取数据并将其输出到扩展弹出窗口中,如下所示(如下:popup.html):

<div id="extensionpopupcontent">Links</div>
<a onclick="click()">Some Link</a>

<script type="text/javascript">
 function click() {
  chrome.tabs.executeScript(null, {file: "content_script.js"});
  document.getElementById("extensionpopupcontent").innerHTML = variableDefinedInContentScript;
  window.close();
 }
</script>

我尝试使用文档中的 chrome.extension.sendRequesthttp://code.google.com/chrome/extensions/messaging.html http://code.google.com/chrome/extensions/messaging.html,但我不确定如何在我的情况下正确使用它,特别是问候语和响应。

contentscript.js
================
chrome.extension.sendRequest({greeting: "hello"}, function(response) {
  console.log(response.farewell);
});

到目前为止,你所做的都是正确的。您唯一缺少的是您需要设置一个chrome.extension.onRequest http://code.google.com/chrome/extensions/extension.html#event-onRequest事件侦听器,用于处理从内容脚本返回到弹出窗口的消息。

因此,在弹出窗口中执行类似的操作应该有效(额外):

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
  if (sender.tab && request.greeting == "hello")
    sendResponse({farewell: "goodbye"});
  else
    sendResponse({}); // snub them.
});

上面的代码片段将执行什么操作,它将侦听来自内容脚本的事件(当来自内容脚本时,sender.tab == true)。

如果您阅读了有关消息传递的整个页面,它会用很好的示例解释所有这些:http://code.google.com/chrome/extensions/messaging.html http://code.google.com/chrome/extensions/messaging.html

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何从 Chrome 中的网页抓取数据并输出到 Chrome 扩展弹出窗口中? 的相关文章

随机推荐