google-chrome-extension - Chrome 扩展 : Attaching current tab to popup and then going through its DOM

Question

我在制作 Google Chrome 扩展程序的过程中遇到了问题。

我正在尝试通过 popup.html 中的 DOM 上传和搜索。

这是我获取当前选项卡的方式(我在某处找到了脚本，信用不属于我):

 chrome.windows.getCurrent(function(w) {
      chrome.tabs.getSelected(w.id,function (response){
  )};

我的问题是:我需要遍历响应的 DOM。当尝试手动执行此操作时，我做不到，因为响应变量现在由于某种原因未定义，所以使用控制台不是一个选项。当试图提醒 html 文件中的响应时，它作为一个对象出现。然后，我尝试浏览响应，就好像它是“文档”对象一样，但也没有成功。

任何帮助将不胜感激。

Answer 1

您可以通过将 null 作为窗口 ID 传递给 getSelected 来获取弹出窗口的选定选项卡。 () 在您的弹出窗口中，您可以监听扩展事件并执行脚本以将内容推送到您的弹出窗口:

chrome.extension.onRequest.addListener(
    function(request, sender, sendResponse) {
        if (request.action == "content")
        {
            console.log('content is ' + request.content.length + ' bytes');
        }
    });
chrome.tabs.getSelected(null, function(tab) {
        chrome.tabs.executeScript(tab.id, { file: 'scripts/SendContent.js' } );
    });

最后是内容脚本...我将它作为“scripts/SendContent.js”保存在我的扩展文件夹中，但该脚本非常简单，您可以通过将代码放在代码属性中而不是名称中来执行它您传递给 executeScript 的对象的文件属性:

    console.log('SendContent.js');
    chrome.extension.sendRequest( {
            action: "content",
            host: document.location.hostname,
            content: document.body.innerHTML
        }, function(response) { }
    );

结果:

POPUP: content is 67533 bytes

如果您遇到问题，请使用 console.log() 并右键单击您的页面或浏览器操作以检查它并在控制台上阅读您的消息(或从那里调试您的脚本)。