How to executeScript when new page is loaded

Question

I'm trying to build an extension that is downloading an image that has the URL in the meta tag of the current page, when the extension button is clicked. Unfortunately, I have some issues figuring out how to get the URL of the image each time when I navigate to a new page.

With other words, my extension is partially working. It is always downloading the image from the first page I visit instead of downloading a new image when I navigate from the first page to a page that is linked to the first one.

Here is my code:
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;

I tried window.onclik but the same problem happens.

Here is a screen-recording of the issue (click for full size recording which is stored off-site due to being too large to upload here):

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

Answer 1

I investigated this issue more and I found out that the browser extension works well on other sites. so it must be a limitation of the site I was initially testing it. Thank you for your help!

How to executeScript when new page is loaded

Question

1 answers

solution1
0 2016-11-16 13:44:55

How to executeScript when new page is loaded

Question

1 answers

solution1 0 2016-11-16 13:44:55

solution1
0 2016-11-16 13:44:55