Javascript 如何将元素数据获取到调试器脚本？_Javascript_Google Chrome Extension

Javascript 如何将元素数据获取到调试器脚本？

javascript google-chrome-extension

Javascript 如何将元素数据获取到调试器脚本？,javascript,google-chrome-extension,Javascript,Google Chrome Extension,我正试图为一个特定的网站编写我的第一个chrome扩展，自动下载该网站加载的流。我已经使用chrome.debugger api下载了流，但现在我想使用网站上的数据自动命名流首先，让我给你一些相关的脚本： manifest.json --------------------------------------- { "name": "Downloader script", "description": "Downloads stuff", "version": "0.1", "permissi

我正试图为一个特定的网站编写我的第一个chrome扩展，自动下载该网站加载的流。我已经使用chrome.debugger api下载了流，但现在我想使用网站上的数据自动命名流

首先，让我给你一些相关的脚本：

manifest.json
---------------------------------------
{
"name": "Downloader script",
"description": "Downloads stuff",
"version": "0.1",
"permissions": [
"debugger",
"downloads"
],
"background": {
"scripts": ["background.js"]
},
"browser_action": {
"default_icon": "icon.png",
"default_title": "Downloader"
},
"manifest_version": 2
}

这是background.js，它显示一个窗口，说明所有已下载的文件

background.js
--------------------------
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.debugger.attach({tabId:tab.id}, version,
  onAttach.bind(null, tab.id));
});

var version = "1.0";

function onAttach(tabId) {
  if (chrome.runtime.lastError) {
    alert(chrome.runtime.lastError.message);
    return;
  }

  chrome.windows.create(
      {url: "headers.html?" + tabId, type: "popup", width: 400, height: 600});
}

下面是非常简单的headers.html，称为：

<html>
<head>
<style>
body {
  font-family: monospace;
  word-wrap: break-word;
}

#container {
  white-space: pre;
}

.request {
  border-top: 1px solid black;
  margin-bottom: 10px;
}

</style>

<script src="headers.js"></script>
</head>

<body>
<div id="container"></div>
</body>
</html>

现在，我从中获取流的网站具有以下结构：

<div id="trackInfo" class="unselectable">
    <div class="contents" style="display: block;">
        <div class="info">
            <div class="trackData">
                <div><a href="http://www.linktowebsite" class="songTitle" address="true">This is the song title i want to grab</a></div>
                <div><i class="byText">by</i> <a href="http://www.artistlink" class="artistSummary" address="true">Artist name i want to grab</a>
                </div>
                <div><i class="onText">on</i> <a class="albumTitle" address="true" href="http://www.albumlink" style="">Album title i want to grab</a></div>
            </div>
        </div>
    </div>
</div>

我的问题是：如何从我认为调用DOM的页面中获取元素数据，并将其与chrome.downloads api一起使用？由于headers.js文件与网页本身无关，所以我认为它只是网络部分

PS：我第一次在这里发帖，也欢迎对我的帖子提出建设性的批评。

我感觉你在用榴弹炮猎杀松鼠，利用调试器拦截网络请求并将DOM注入页面

对于拦截网络请求，有专门的API

您可以将一个侦听器附加到chrome.webRequest.onBeforeRequest，您将获得与chrome.debugger.onEvent侦听器中使用的信息相同的信息

为了注入DIV并从DOM读取数据，您只需要一个

下面的代码将假设您也将使用jQuery，没有理由不使用它，使用它更容易操作DOM。这只是一个框架代码

您可以指定一个内容脚本，以便始终加载到音乐服务上，并使用chrome.runtime.onMessage从后台收听消息：

至于提取歌曲细节，jQuery是您的朋友。您需要拿出一个选择器来选择您需要的元素：

// Inside content script
var songName = $("#trackInfo .songTitle").text();
// etc.

我感觉你在用榴弹炮猎杀松鼠；看一看，这是一个很好的机会；我只是通过修改其他示例代码来学习，所以这可能要简单得多。尽管如此，我如何从background.js获取元素数据呢？但是如果我想打开/关闭它呢？我能用browserAction.onClicked替换onMessage吗？同样，我是这里的第一个新手，仍然试图理解所有命令的作用。不添加下载链接？只是不要在onBeforeRequest中发送消息。好吧，我的弹出窗口的输出只是为了测试，我实际上希望这个脚本在后台运行，但仍然能够打开/关闭自动下载，用一个按钮启用/禁用整个脚本。我实际上刚刚注意到你打开了一个弹出窗口，没有在歌曲页面中添加div。。如果需要，可以继续打开弹出窗口，忽略用于构建的代码，但仍可以使用歌曲页面中的内容脚本来检索歌曲数据。请继续阅读将数据返回到后台的方法。恐怕您的其他问题超出了Stack Overflow可接受的格式。如果您还有其他问题，请提出新问题。不过，请注意，一般来说，这并不是初学者提问的好资源。一定要先深入阅读。我并不反对对你进行一些指导，但这必须在外部进行；在个人资料中留下一些联系信息。

chrome.runtime.onMessage.addListener(function(message) {
  if(message.songUrl){
    var newSong = $('<div>').text(New song is being downloaded...);
    /* fill the <div> and append it to the page */
  }
});

chrome.webRequest.onBeforeRequest.addListener(
  function(details){
    if (details.url.indexOf("//audio") > -1) {
      chrome.tabs.sendMessage(tabId, {songUrl: details.url});
    }
    return {}; // Do not modify the request
  },
  /* filter details */
);

// Inside content script
var songName = $("#trackInfo .songTitle").text();
// etc.