Question

当我点击扩展按钮时，我正在尝试构建一个扩展程序，该扩展程序正在下载当前页面元标记中包含URL的图像。不幸的是，每次导航到新页面时，我都会遇到一些问题，想知道如何获取图像的URL。

换句话说，我的扩展部分正在运作。当我从第一页导航到链接到第一页的页面时，它总是从我访问的第一页下载图像而不是下载新图像。

这是我的代码：
的manifest.json

{
  "manifest_version": 2,

  "name": "Image downloader",
  "description": "This extension alows you to download your images",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html",
    "default_title": "Download Picture"
  },
  "permissions": [
    "tabs",
    "activeTab",
    "downloads"
  ]
}

popup.html

<!doctype html>
<html>
  <head>
    <title>Getting Started Extension's Popup</title>
    <style>
      body {
        font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
        font-size: 100%;
      }
      #status {
        white-space: pre;
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: 400px;
      }
    </style>

    <script src="popup.js"></script>
  </head>
  <body>
    <div id="status"></div>
  </body>
</html>

popup.js

/**
 *Download images
 *
 */
function getCurrentTabUrl(callback) {
    var queryInfo = {
        active: true,
        currentWindow: true
    };
    chrome.tabs.query(queryInfo, function (tabs) {
        var tab = tabs[0];
        var url = tab.url;
        console.assert(typeof url == 'string', 'tab.url should be a string');

        callback(url);
    });
}

function renderStatus(statusText) {
    document.getElementById('status').textContent = statusText;
}

function getImage() {
    var imgUrl = "";
    var url = "";
    var title;

    getCurrentTabUrl(function (url) {
        if (url.substring(0, 13) != 'https://page1') {
            renderStatus('Please navigate to page1 ');
        } else {
            chrome.tabs.executeScript(null, {
                file: 'script.js'
            },
            function (result) {
                imgUrl = result[0];
                var filenametimestamp = Math.floor(Date.now() / 1000);
                if (imgUrl == null) {
                    renderStatus('Not Found... ');
                } else {
                    renderStatus('Downloading... ');
                    console.log('URL: ' + imgUrl);
                    chrome.downloads.download({
                        url: imgUrl,
                        filename: filenametimestamp + ".jpg"
                    });
                }
            });
        }
    });
};

window.onload = function () {
    console.log('onload');
    getImage();
};

的script.js

var picUrl
    //location.reload();
var metas = document.getElementsByTagName('meta');
for (var i = 0; i < metas.length; i++) {
    if (metas[i].getAttribute("property") == "og:image") {
        picUrl = metas[i].getAttribute("content");
        imgUrl = picUrl;
        i = metas.length + 1;
    }
}
picUrl;

我尝试了window.onclik，但同样的问题也发生了。

这是一个问题的屏幕录制（点击进行全尺寸录制，由于太大而无法在此处上传而存储在场外）：

screen-recording of the issue http://g.recordit.co/xvBi8DeaY8.gif

Answer 1

我更多地调查了这个问题，我发现浏览器扩展在其他网站上运行良好。所以它必须是我最初测试它的网站的限制。谢谢你的帮助！

如何在加载新页面时执行脚本

1 个答案: