Question

我讨厌这么说，但是自从几个小时前开始学习扩展以来，我在开发扩展方面还没有走很长的路。：（

如果此线程重复，我事先表示歉意，但是老实说，我已经走到了尽头。这是我的问题：

我想为自己开发一个扩展程序，以自动从名为readcomiconline.to的网站下载图像列表。

我的第一个问题是，当我使用getElementById（）时，它看起来完全位于我的扩展弹出窗口中。

我的第二个问题是我还没有找到一种使用Javascript自动下载多个文件的方法。

请记住，我不会理解任何有关扩展的高级术语，但是我对Javascript有相当扎实的理解。

此外，也不建议使用JQuery。

我的代码：

Manifest.JSON

{
    "name": "Comic Downloader",
    "options_page": "options.html",
    "version": "1.0",
    "description": "Build an Extension!",
    "permissions": [ "tabs",
        "notifications",
        "http://*/",
        "https://*/", "downloads", "activeTab", "declarativeContent", "storage", "tabs", "<all_urls>"],
    "background": {
      "scripts": ["background.js"],
      "persistent": false
    },
    "page_action": {
      "default_popup": "popup.html",
      "default_icon": {
        "16": "images/get_started16.png",
        "32": "images/get_started32.png",
        "48": "images/get_started48.png",
        "128": "images/get_started128.png"
      }
    },
    "icons": {
      "16": "images/get_started16.png",
      "32": "images/get_started32.png",
      "48": "images/get_started48.png",
      "128": "images/get_started128.png"
    },
    "manifest_version": 2
  }

popup.JS：

// Copyright 2018 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

'use strict';

let changeColor = document.getElementById('changeColor');
chrome.storage.sync.get('color', function(data) {
  changeColor.style.backgroundColor = data.color;
  changeColor.setAttribute('value', data.color);
});

changeColor.onclick = function(element) {
    let color = element.target.value;
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {

      chrome.tabs.executeScript(
          tabs[0].id,
          //{code: 'document.getElementById("divImage")'});
          {code: 'var filesForDownload = [];
                 filesForDownload( { path: "/path/file1.txt", name: "file1.txt" } );
                 filesForDownload( { path: "/path/file2.jpg", name: "file2.jpg" } );
                 filesForDownload( { path: "/path/file3.png", name: "file3.png" } );
                 filesForDownload( { path: "/path/file4.txt", name: "file4.txt" } );
                 $jq(\'input.downloadAll\').click( function( e ){
                     e.preventDefault();
                     var temporaryDownloadLink = document.createElement("a");
                     temporaryDownloadLink.style.display = \'none\';
                     document.body.appendChild( temporaryDownloadLink );
                    for( var n = 0; n < filesForDownload.length; n++ ) {
                        var download = filesForDownload[n];
                        temporaryDownloadLink.setAttribute( \'href\', download.path );
                        temporaryDownloadLink.setAttribute( \'download\', download.name );
                        temporaryDownloadLink.click();
                    }
                    document.body.removeChild( temporaryDownloadLink );
                }
            );'
        });
          //{code: 'document.body.style.backgroundColor = "' + color + '";'});
    });
  };

使用Chrome扩展程序从网页中提取和下载图像

0 个答案: