如何在加載新頁面時執行腳本

我試圖構建一個擴展程序，該擴展程序正在下載當前頁面的元標記中具有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

來源

2016-11-13 Sorin Lungu

要真正提供解決方案，我們需要更詳細地瞭解您實際上希望發生什麼樣的事件順序，以及用戶與擴展程序和Chrome進行的互動以及何時*完全*您期望的圖像被下載。 – Makyen

從你的代碼，我不明白你爲什麼有一個彈出。彈出窗口中沒有任何用戶交互，也沒有提供給用戶的信息。當單擊'action_button'（不顯示彈出窗口）時，彈出框的作用是什麼，而不是僅僅是作用？ – Makyen

我希望當用戶點擊鉻擴展圖標時，存儲在meta中的當前選項卡屬性「og：image」的url將被傳遞給chrome.downloads.download。彈出窗口用於向用戶顯示信息，如：renderStatus（'Downloading ...'）; –