Chrome 扩展程序包含错误

Question

我决定冒险创建一个 chrome 扩展程序，并决定实现一个简单的扩展程序，以防止我每天访问 facebook/linkedin 超过 5 次。

但是，我不断收到一些错误，我似乎无法调试。它们是：

奇怪的是，当它似乎是在 chrome API 中定义时，它却说无法读取未定义。

这是我使用的文件：

manifest.json

{
  "manifest_version": 2,
  "name": "Distract Me Not",
  "version": "0.1",
  "permissions": ["webNavigation"],
  "content_scripts": [
  {
    "matches": [
     "https://*.facebook.com/","https://*.linkedin.com/"
    ],
    "js": ["content.js","jquery3.1.1.js","background.js"]
  }
]
}

content.js

chrome.webNavigation.onCompleted.addListener(function(details) {
    chrome.tabs.executeScript(details.tabId, {
        file: 'background.js'
    });
});

background.js

function getDate(){
    var today = new Date();
    var dd = today.getDate();
    var mm = today.getMonth()+1; //January is 0!
    var yyyy = today.getFullYear();

    if(dd<10) {
        dd='0'+dd
    } 

    if(mm<10) {
        mm='0'+mm
    } 

    today = dd+'/'+mm+'/'+yyyy;
    return(today);
}

function main() {
    appName = $.getJSON("settings.json" , function(json){
        return json["appName"];
    });

    websiteLimits = $.getJSON("settings.json" , function(json){
        return json["websiteLimits"];
    });

    currentPage = window.location.hostname;
    currentWebsiteLimit = websiteLimits[currentPage];

    checkFor = appName + getDate();
    item = localStorage.getItem(checkFor);
    if (item) {
        item = Number(item);
        if (item > currentWebsiteLimit) {
            document.write("Sorry! Your limit for " + currentPage + " has been reached for today.");
            return;
        }
        localStorage.setItem(checkFor,item+1);
        return;
    }
    localStorage.setItem(checkFor,1);
}

main();

settings.json

{"appName":"distract me not",
"websiteLimits":{"facebook.com":5,
                "linkedin.com":5}
}

这似乎相当简单，但它暗示了我。我可能遗漏了一些简单的东西，希望得到一些关于如何解决这个问题的指导！

谢谢！ :)

更新：

我意识到文件应该按其他顺序排列，并且我没有清除以前的错误，所以我被误导了同样的错误正在发生。

但是，脚本的计数似乎不正确（content.js 中的警告行在一次重新加载时会发出两次警告）。有没有解决的办法？另外，我看到 $.getJSON 无法获取本地文件。有没有办法可以将设置抽象到另一个 json 并加载它，或者这是唯一的方法？

非常感谢！ :)

manifest.json

{
  "manifest_version": 2,
  "name": "Distract Me Not",
  "version": "0.1",
  "permissions": ["webNavigation","tabs","https://*.facebook.com/","https://*.linkedin.com/"],
  "background":{
    "scripts":["background.js"]
  },
  "content_scripts": [
  {
    "matches": [
     "https://*.facebook.com/","https://*.linkedin.com/"
    ],
    "js": ["jquery3.1.1.js","content.js"]
  }
]
}

content.js

function getDate(){
    var today = new Date();
    var dd = today.getDate();
    var mm = today.getMonth()+1; //January is 0!
    var yyyy = today.getFullYear();

    if(dd<10) {
        dd='0'+dd
    } 

    if(mm<10) {
        mm='0'+mm
    } 

    today = dd+'/'+mm+'/'+yyyy;
    return(today);
}

function main(){
    var settings = {"appName":"distract me not",
                    "websiteLimits":{"www.facebook.com":5,
                                    "www.linkedin.com":5}
                    };

    appName = settings["appName"];
    websiteLimits = settings["websiteLimits"];
    currentPage = window.location.hostname;
    currentWebsiteLimit = websiteLimits[currentPage];

    alert(currentPage);

    checkFor = appName + getDate();
    item = localStorage.getItem(checkFor);
    if (item) {
        item = Number(item);
        if (item > currentWebsiteLimit) {
            document.write("Sorry! Your limit for " + currentPage + " has been reached for today.");
            return;
        }
        localStorage.setItem(checkFor,item+1);
        return;
    }
    localStorage.setItem(checkFor,1);
}

main();

background.js

chrome.webNavigation.onCompleted.addListener(function(details) {
    chrome.tabs.executeScript(details.tabId, {
        file: 'content.js'
    });
});

Answer 1

您的脚本在每次页面重新加载时运行两次，因为您在每次页面重新加载时包含两次。

看看你的代码就明白了

manifest.json

...
"content_scripts": [
{
  "matches": [
     "https://*.facebook.com/","https://*.linkedin.com/"
  ],
  "js": ["jquery3.1.1.js","content.js"]
}
...

这段代码的意思是：“请在任何页面中包含我的content.js 和jquery3.1.1.js 脚本，该页面的url 与DOM Ready 上的https://*.facebook.com/ 或https://*.linkedin.com/ 匹配”。

background.js

...
chrome.webNavigation.onCompleted.addListener(function(details) {
  chrome.tabs.executeScript(details.tabId, {
      file: 'content.js'
  });
});
...

这段代码的意思是：“请在每次webNavigation.onCompleted 触发时运行content.js”。

如您所见 - 在加载您的 LinkedIn 时，这两个条件都为真，因此脚本 content.js 运行两次，您会看到 2 个警报。

P.S>您只想限制对LinkedIn主页而不是子页面的访问是否正确？