Question

我正在制作一个Google Chrome扩展程序，只需在您打开新标签页时显示当前日期和时间。到目前为止，只有当我将每个函数放在单独的脚本上时才有效（每个函数都显示日期或时间）。为了减少文件数量，我试图将两个函数放在同一个脚本中。我的问题是我似乎无法从同一个脚本文件中调用特定的函数。我一直在谷歌搜索这个比我应该更长的时间，这让我发疯。这是我的代码。任何帮助将不胜感激！

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type= "text/javascript" src ="script".js></script>

</head>

<body bgcolor="C1E9E1">
    <div class="boxDate">
        <script>displayDate();</script>
    </div>

    <br>
    <br>

    <div class="boxTime">       
        <script>displayTime();</script>
    </div>
</body>

function checkNum(i){
  if(i<10) i = "0"+i;
  return i;
}

function displayDate() {
  var day =  new Date();
  var yr = day.getFullYear().toString().substr(-2);
  var mn = day.getMonth() + 1;
  var dy = day.getDate();
  yr = checkNum(yr);
  mn = checkNum(mn);
  dy = checkNum(dy);
  var dateFormat = mn + " " + dy + " " + yr;
  t = setTimeout(displayDate, 500);
  return dateFormat;
  //document.getElementById("dateOutput").innerHTML = dateFormat; 
}

function displayTime(){
  var time = new Date();
  var hr = time.getHours() % 12 || 12;
  var mi = time.getMinutes();
  var sc = time.getSeconds();
  hr = checkNum(hr);
  mi = checkNum(mi);
  sc = checkNum(sc);
  var timeFormat = hr + ":" + mi + ":" + sc;
  t = setTimeout(displayTime, 500);
  return timeFormat;
  //document.getElementById("timeOutput").innerHTML = timeFormat;
}

注意：boxDate和boxTime类来自css文件当我这样做时，我的代码确实有效，但就像我说的那样，这将涉及到我必须拥有2个不同的js文件。

<div class="boxDate">
  <input type="text" id="dateOutput">
    script src = "displayDate.js"></script>
</div>

<div class="boxTime">
  <input type="text" id="timeOutput">
  <script src = "displayTime.js"></script>
</div>

Answer 1

正如this comment中所述，src标记的<script>属性未正确关闭。它应该是<script src="script.js">。

即使该位已修复，也可能无效，因为Chrome扩展程序不再允许内联脚本执行：请参阅here和here。

您必须使用事件监听器和message passing。

Answer 2

使用内容脚本，后台脚本和清单中列出的权限。

Google Chrome扩展程序example。

从和html div调用外部js函数

2 个答案: