通过google打包的应用程序访问网站的DOM

问题描述：

我的目标是为Chrome编写一个应用程序，该应用程序通过xhttprequest将网页DOM的详细信息传递给本地Web服务器。为了访问一个网站，一个通常会结合这样的内容脚本中使用标签的DOM：通过google打包的应用程序访问网站的DOM

chrome.tabs.create({ url: "www.example.com" }); 
chrome.tabs.executeScript(null, {file: "content_script.js"});

然后使用邮件系统中的东西传达给后台脚本。

不幸的是，当我这样做时，我需要为清单添加“标签”权限，这是打包应用程序不允许的，仅用于扩展。我需要实现一个打包的应用程序，因为在通常的扩展中，不允许套接字连接（我需要在某个时间）。

我也试了一下，这里建议：How to write content in child window using chrome packaged app?

然而，

chrome.app.window.create

是否只针对本地HTML文件的工作，而不是外部网站。

所以我的问题再次：（如何）是否有可能在打包的应用程序访问网站的dom？

答

您可以尝试在Chrome应用中使用<webview>，并通过executeScript方法注入自定义脚本。

请记住在清单文件中指定"webview"权限。

答

非常感谢！我完全按照你说的那样做了，约瑟夫波特利。代码：

main.js

chrome.app.window.create('webview.html', {}, 
    function (createdWindow) { 
     var win = createdWindow.contentWindow; 
     win.onload = function() { 
     var webview = win.document.querySelector('#webview'); 
     webview.setAttribute("src", "http://www.example.com"); 
     webview.addEventListener("contentload", function() { 

     webview.executeScript({file: "content_script.js"}, function(result) {}); 
     chrome.runtime.onMessage.addListener(
      function(request, sender, sendResponse) { 
       if(request.dom) { 
       plugin.sendDom(request.dom, request.browser); 
       } 
      }); 
     }); 
    } 
    });

webview.html

<!doctype html> 
<html> 
    <body> 
     <webview id="webview" style="height:100%;width:100%"/> 
    </body> 
</html>

content_script.js

... 
var body = document.getElementsByTagName("body")[0];  
var dom = {root: domTraverser.recurseDomChildren(body)}; 
chrome.runtime.sendMessage({dom:dom, browser: getBrowserName()});

通过google打包的应用程序访问网站的DOM

相关推荐