2

有什么方法可以让我在脚本中将任何 DOM 对象转换为 HTML 页面？

假设我有这样的 dom 对象： content script.js

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
  if (request.method == "fromPopup") {
     console.log("got Request from Popup");   
     var myDivObj = document.getElementById("definition");
   //sendResponse({data: "from Content Script to Popup"});
   if ( myDivObj ) {
     sendResponse({data:myDivObj});
     }
     else{
     sendResponse({data:"Empty or No Tag"});
     }
      console.log("sent Response1");   
  } else {
    sendResponse({}); // snub them.
    console.log("sent Response2");   
  }
});

这是我的 popup.html

<body>
  <Div>Searching..</Div>
  <Div id="output">Response??</Div>
  <script>
  console.log("Pop UP Clicked");
 chrome.tabs.getSelected(null, function(tab) {
  chrome.tabs.sendRequest(tab.id, {method: "fromPopup", tabid: tab.id}, function(response) {

    console.log("got Response from Content Script");   
    document.getElementById("output").innerHTML=response.data;
  });
});
  </script>


</body>

我知道我们只能将 JSON 类型的数据发送到 popup.html 页面。对吗？

如果是的话，我有什么方法可以用我收集的 DOM 对象（ myDivObj ）创建 HTML 页面。

任何替代解决方案..？

简而言之，我只想获取 DOM 对象中当前标签页的特定部分，并将其显示在 popup.html 或单独的 html 页面中。

4

1 回答 1

2

使用. 这将返回可用于重新构造 HTML 的字符串。sendResponse({data:myDivObj.outerHTML});

笔记：

  • 动态添加的事件侦听器和属性会丢失，除非使用属性/内容修改方法 ( setAttribute('key','value')/ .innerHTML=...'.
  • 由于样式表，该元素可能看起来不同。

警告：不要盲目地从任意页面注入代码。否则，您将在扩展中打开一个安全漏洞：弹出窗口中的所有脚本都可以完全访问所有允许的扩展 API。

于 2012-06-30T09:12:52.400 回答