javascript - 通过dict数据类型使选项卡特定的变量

我正在编写一个扩展程序，可以检测来自Coursera页面的视频请求（如果检测到），然后在单击浏览器操作图标时将其下载。

开封后

https://www.coursera.org/learn/human-computer-interaction/lecture/pE6EB/human-computer-interaction

我使用chrome.webRequest.onBeforeRequest来检测视频URL，如果检测到，则将其分配给targetUrl。例如，由于可能同时打开许多Coursera页面，因此您可以打开此链接

https://www.coursera.org/learn/human-computer-interaction/lecture/25EPu/the-power-of-prototyping

打开最后一页后，targetUrl可能是该页面的视频URL，而不是最后一页。为了使targetUrl特定于每个Coursera页面，我将使用字典数据类型存储选项卡特定的变量，键应为选项卡的唯一属性，值是相应页面的视频URL。

我面临的困难是我不知道如何以及何时创建密钥，有什么帮助吗？

在为targetUrl赋值之后创建键似乎是合适的，我使用chrome.tabs.getCurrent(function callback)在那里获得tab属性（background.js中的注释代码），但是我只是得到了未定义的对象，任何人都可以解释为什么？

以下是代码

manifest.json

{
    "manifest_version": 2,
    "name": "Coursera",
    "version": "1.0",
    "minimum_chrome_version": "31",
    "browser_action": {
        "default_icon": "video-128.png",
        "default_title": "Click here!"
    },
    "description": "I can't has cheezburger!",
    "permissions": [
        "activeTab",
        "tabs",
        "http://*/*",
        "https://*/*",
        "cookies",
        "storage",
        "management",
        "downloads",
        "webRequest",
        "webRequestBlocking"
    ],
    "background": {
        "scripts": [
            "background.js"
        ]
    }
}

background.js

var tabId;
var tabId2targetUrl={};
var targetUrl;

chrome.webRequest.onBeforeRequest.addListener(function(details) {
    targetUrl = details.url;

    // chrome.tabs.getCurrent(function(tab) {console.log(tab.title);});
    // tabId2targetUrl[tabId]=targetUrl;

    console.log(targetUrl);
},
{
    urls: ["https://*.cloudfront.net/*index.webm*", "https://*.cloudfront.net/*index.mp4*", "http://*/*.aac","http://v.stu.126.net/mooc-video/nos/flv/*",  "http://*/*.mp4"]
});


chrome.browserAction.onClicked.addListener(function(tab) {
    // targetUrl=tabId2targetUrl[tabId];

    var parser = document.createElement('a');
    parser.href = targetUrl;
    var pathname= parser.pathname;
    fileNameExt =pathname.substr(pathname.lastIndexOf('.') );

    chrome.downloads.download({
        url: targetUrl,
        filename: tab.title.split(' - ')[0] + fileNameExt
    },
    function(downloadId) {
        console.log('downloadId '+downloadId);
    });
});

最佳答案

tabId应该可以满足您的目的，并且实际上是由webRequest / browserAction事件提供的。

chrome.webRequest.onBeforeRequest.addListener(function(details) {
  targetUrl = details.url;
  tabId2targetUrl[details.tabId]=targetUrl;
},
{
    urls: ["https://*.cloudfront.net/*index.webm*", "https://*.cloudfront.net/*index.mp4*", "http://*/*.aac","http://v.stu.126.net/mooc-video/nos/flv/*",  "http://*/*.mp4"]
});

chrome.browserAction.onClicked.addListener(function(tab) {
  targetUrl=tabId2targetUrl[tab.id];
  /* ... */
});

请注意：当选项卡导航离开时，您可能想清除字典条目。



在您的情况下，使用内容脚本按需从页面提取URL可能会容易得多。在这种情况下，无需维护词典。

或者，您可以（并且应该！）使用Page Action，在检测到URL后显示它。导航离开时它将自动清除（除非存在基于pushState的过渡，即IIRC）


  对于只有几页有意义的功能，请使用页面操作。