Question

有没有什么方法可以将任何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>

我知道我们可以将onaly JSON类型的数据发送到popup.html页面。我是对的吗？

如果是，我可以用DOM Object（myDivObj）创建HTML页面我收集了..

任何替代方案..？

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

Answer 1

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

注意：

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

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

chrome扩展：获取DOM对象中当前标签页的特定部分，并将其显示在popup.html或新的html页面中？

1 个答案: