1

Хочу написать расширение , которое будет считать время проведенное в интернет, НО счет начинается только по клику на значок расширения и заканчивает считать , потеряв фокус этого popup-а. Переписал всё c popup.js в background.js - не помогает. Прошу о вашей помощи!) Вот popup.html:

    <!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    </head>
    <body>
        <span id="timer" style="width:100px;">
<span id="min">0</span><i>:</i>
<span id="sec">0</span><i>:</i>
<span id="milisec">0</span>
<br>
</span>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="popup.js"></script>
    </body>
</html>

popup.js:

var milisec = 0;
var sec = 0;
var min = 0;
var timer;
 timer = setInterval(function() {
    $("#milisec").text(milisec);
    milisec++;
    if (milisec == 100) {
      milisec = 0;
      sec++;
      $("#sec").text(sec);
    }
    if (sec == 60) {
      sec = 0;
      min++;
      $("#min").text(min);
    }
  }, 100);

manifest.json:

{
    "name":  "Timer", 
    "version": "1.0",  
    "manifest_version": 2,
"background": {
    "scripts": ["background.js"]
  },
"browser_action": {
    "default_title": "Time in the Internet",
    "default_icon": "icon.png",
    "default_popup": "popup.html"
},
"permissions": [
    "https://ajax.googleapis.com/*"
],
"content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'"
}

background.js - чист

1 ответ 1

2

Необходимо чтобы таймер работал в background странице, ибо popup живет только пока отображается на экране.

Используйте передачу сообщений между popup и background:

  1. Пара сообщений для запуска и установки таймера
  2. Другое для получения текущего значения

Не стоит использовать setTimeout & setInterval для подсчета времени, так как браузеры не гарантируют вызов функции через равно-указанный промежуток времени. Со временем расхождение будет существенно накапливаться.
Лучший вариант – запомнить дату начала отсчета (в миллисекундах, через Date.now()) и подсчиывать разницу при необходимости.

Ниже такого пример расширения:

manifest.json

{
    "name":"Test",
    "manifest_version": 2,
    "description":"",
    "version":"1.0",
     "browser_action": {
          "default_popup": "popup.html"
        },
    "background": {
        "scripts":["background.js"]
    },
    "permissions": [
    ]
}

popup.html

<html>
<head>
    <meta charset="UTF-8">
</head> 
<body>
    <label>Время: </label>
    <input type="text" id="time">

    <button id="start">Запустить</button>
    <button id="stop">Остановить</button>

    <script src="popup.js"></script>    
</body>
</html>

popup.js

document.querySelector('#start').addEventListener('click', () => {
    chrome.runtime.sendMessage('start');
});

document.querySelector('#stop').addEventListener('click', () => {
    chrome.runtime.sendMessage('stop');
});

// Запрос значения таймера. Можно выполнять по-необходимости
setInterval(() => {
    chrome.runtime.sendMessage('get_time', time => {
        document.querySelector('#time').value = time;
    });
},500);

background.js

let lastDate = null; 
let isEnabled = false;

chrome.runtime.onMessage.addListener((action, sender, sendResponse) => {
    switch(action) {
        case "start":
            isEnabled = true;
            lastDate = Date.now();
            break;
        case "stop":
            isEnabled = false;
            lastDate = null;
            break;
        case "get_time": {
            if(isEnabled) {
                sendResponse(Date.now() - lastDate)
            } else {
                sendResponse(null);
            }
            break;
        }
    }
});

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.