javascript - 尝试使用javascript下载所有谷歌搜索图像

Question

我正在尝试制作一个脚本来下载所有 Google 搜索图像，以制作我的机器学习项目的数据集。我正在关注this tutorial下载高分辨率图像，但突然出现错误，内容如下:

Refused to load the script 'https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js' because it violates the following Content Security Policy directive: "script-src 'report-sample' 'nonce-Q6xQOKx7e+e0TlGbQFPX3g' 'unsafe-inline'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback

一些帮助将不胜感激。我通过将其粘贴到 javascript 控制台来运行此代码。谢谢!

var script = document.createElement('script');
script.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(script);

// grab the URLs
var urls = $('.rg_di .rg_meta').map(function() {
  return JSON.parse($(this).text()).ou;
});

// write the URls to file (one per line)
var textToSave = urls.toArray().join('\n');
var hiddenElement = document.createElement('a');
hiddenElement.href = 'data:attachment/text,' + encodeURI(textToSave);
hiddenElement.target = '_blank';
hiddenElement.download = 'urls.txt';
hiddenElement.click();

Answer 1

您正在使用 jQuery 来完成可以在 native javascript 中完成的操作。

document.querySelectorAll主要与 jQuery 一样使用选择器。它不返回一个数组，而是一个(在我看来)笨重的 NodeList .

为了让它正确迭代，我更喜欢 spread将其放入数组中，然后调用 forEach就在上面。

[...document.querySelectorAll('.foo')].forEach((element, index) => {
   console.log(element.innerText);
});

<div class="foo">bar</div>
<div class="foo">baz</div>
<div class="foo">bal</div>

此外，目前获取数据的方法也有所不同。

在所有需要先触发点击的图像上。
这将激活 javascript 事件处理程序，该处理程序将设置图像祖 parent 的 href。
您需要让 google 事件处理程序首先运行，因此我们分离执行流程的其余部分，以便 google 脚本可以完成它的工作并更新 DOM。我们用setTimeout()来做到这一点.
然后，当 google 脚本运行时，DOM 元素已更新，我们计划的超时有机会运行，现在 href 已填充。

点击之前，链接如下所示:

点击后

我们现在看到 href 已被填充。已输入的网址为:

https://www.google.com/imgres?imgurl=https%3A%2F%2Fwww.researchgate.net%2Fprofile%2FJerome_Droniou%2Fpublication%2F305983658%2Ffigure%2Ffig5%2FAS%3A668650201690119%401536430039650%2FMesh-patterns-for-the-tests-using-the-HMM-method-left-Test-1-right-Test-2.png&imgrefurl=https%3A%2F%2Fwww.researchgate.net%2Ffigure%2FMesh-patterns-for-the-tests-using-the-HMM-method-left-Test-1-right-Test-2_fig5_305983658&tbnid=_UuLNMPCQAT0uM&vet=12ahUKEwjhsu31zcnoAhWbgKQKHR3jAdUQMygAegUIARDTAQ..i&docid=LThLi5REXoitfM&w=428&h=428&q=hmm%20test&ved=2ahUKEwjhsu31zcnoAhWbgKQKHR3jAdUQMygAegUIARDTAQ

在此网址中，我们在 imgurl= 之后看到以 https 开头的内容。这是我们的目标图像 url，但它已经过 urlencoded，并且是更大 url 的一部分。
因此，我们通过一些简单的子字符串操作来操作字符串。

那么我们还有奇怪的角色

https%3A%2F%2Fwww.researchgate.net%2Fprofile%2FJerome_Droniou%2Fpublication%2F305983658%2Ffigure%2Ffig5%2FAS%3A668650201690119%401536430039650%2FMesh-patterns-for-the-tests-using-the-HMM-meth OD -左-测试-1-右-测试-2.png

为此我们可以使用decodeURIComponent()将其转换为普通网址

document.write(decodeURIComponent('https%3A%2F%2Fwww.researchgate.net%2Fprofile%2FJerome_Droniou%2Fpublication%2F305983658%2Ffigure%2Ffig5%2FAS%3A668650201690119%401536430039650%2FMesh-patterns-for-the-tests-using-the-HMM-method-left-Test-1-right-Test-2.png'))

然后我们将其添加到我们的数组中。

当我们处理完所有事情后，我们创建 urls 文件并下载它。

var urls = [];
var count = 0;
[...document.querySelectorAll('.rg_i')].forEach((element, index) => {
   let el = element.parentElement.parentElement;
   el.click();
   count++;
   setTimeout(() => {
       let google_url = el.href;

       let start = google_url.indexOf('=' , google_url.indexOf('imgurl'))+1;
       let encoded = google_url.substring(start, google_url.indexOf('&', start));
       let url = decodeURIComponent(encoded);
       urls.push(url);
       console.log(count);
       if(--count == 0) {
          let textToSave = urls.join('\n');
          let hiddenElement = document.createElement('a');
          hiddenElement.href = 'data:attachment/text,' + encodeURI(textToSave);
          hiddenElement.target = '_blank';
          hiddenElement.download = 'urls.txt';
          hiddenElement.click();
       }

   }, 50);

});