Question

我正在尝试制作一个只有一个数字并且每天更新的镀铬扩展程序（减去1）

我已经将它打印出来作为镀铬扩展背景，但现在我正在尝试每天更换数字。 我有4个文件：

background.js
icon_19.png
jquery.js
manifest.json

icon_19.png 是必需的，因为要使用画布设置扩展的背景，您必须先拥有图像。

jquery.js 只是javascript库。我把它包括在内。

的manifest.json：

{
  "manifest_version": 2,

  "name": "Countdown",
  "description": "This extension countdowns to my death.",
  "version": "1.0",
  "background": {
    "scripts":["background.js"]
  },
  "browser_action": {
    "default_title": "Countdown",
    "default_popup": "countdown.html"
  }
}

background.js：

var today = new Date();
var year = today.getFullYear();
var month = today.getMonth() + 1;
var day = today.getDate();
var myDeath = new Date();
myDeath.setMonth(7);
myDeath.setDate(16);
var canvas = document.createElement('canvas');
canvas.width = 19;
canvas.height = 19;
var ctx = canvas.getContext('2d');
var start = 18;

ctx.font='20px Arial';

setInterval(function() {
  ctx.clearRect(0,0,19,19);
  ctx.fillText(start, 0, 19, 19);
  start--;
  chrome.browserAction.setIcon({
    imageData: ctx.getImageData(0, 0, 19, 19)
  })  
}, 1000);

这是什么，它打印出数字（开始）作为chrome扩展背景。然后它开始每1秒倒数一次。它也有效。我只需要一些如何制作它，以便它每隔一天只减去-1，直到我点击myDeath。有人知道如何每天更改1吗？我希望每天打开镀铬时数字会下降一次。提前致谢！！：）

Answer 1

一些注意事项：

您需要增加刷新间隔。没有任何意义，每一天都要提神。我已经每隔12小时设置一次，但你可以将它改为你想要的许多。
计算日期差异应该是它自己的功能，以便您可以重复调用它。这使得代码更容易维护，因为死亡日期数据与使用它的代码分开。
为了维护起见，我将死亡日期配置分离到了自己的对象中。
death.month保存1-12的值。请参阅第一个代码注释。
death.year是可选的，函数中不需要该参数。
background.js以外的任何内容都不需要更改。

background.js

var death = {
    day: 16,
    month: 8
}
var intervalHours = 12;

function getRemainingDays(d, m, y){
    var today = new Date();
    var myDeath = new Date();
    myDeath.setMonth(m-1); // Month is a range from 0-11; this lets you configure using a range from 1-12
    myDeath.setDate(d);
    if(typeof y !== "undefined"){ // if death.year is not provided, just use the current year
        myDeath.setYear(y);
    }
    return (myDeath-today)/86400000; // (myDeath-today) produces a result in milliseconds, this turns that into days
}

var canvas = document.createElement('canvas');
canvas.width = 19;
canvas.height = 19;
var ctx = canvas.getContext('2d');
ctx.font='20px Arial';

setInterval(function() {
  ctx.clearRect(0,0,19,19);
  ctx.fillText(getRemainingDays(death.day, death.month), 0, 19, 19);
  chrome.browserAction.setIcon({
    imageData: ctx.getImageData(0, 0, 19, 19)
  })  
}, (intervalHours*3600000)); // converts hours to milliseconds

倒计时一天，每天更新？

1 个答案:

background.js