从和HTML div调用外部js函数

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

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

即使该位固定，也可能无法使用，因为Chrome扩展程序不再允许执行内联脚本：请参见此处和此处。

您将必须使用事件侦听器和消息传递。

Answer 2

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

Google Chrome扩展程序示例。

从和HTML div调用外部js函数

问题描述

2 个解决方案

解决方案1
0 2018-02-03 04:08:40

解决方案2
0 2018-02-03 04:28:19

从和HTML div调用外部js函数

问题描述

2 个解决方案

解决方案1 0 2018-02-03 04:08:40

解决方案2 0 2018-02-03 04:28:19

解决方案1
0 2018-02-03 04:08:40

解决方案2
0 2018-02-03 04:28:19