2016-06-18 3 views
0

Я начинаю заниматься расширением Chrome, и, короче говоря, я хочу иметь что-то, что выполняется на всех веб-страницах. Короче говоря, он должен быть трекером мыши. Я получаю координаты мыши X и Y мыши в браузере. Тем не менее, я как бы проиграл. Я не знаю, где файл сохраняет, если он экономит, или даже если он работает. Единственное, что работает, это изображение значка, и html появляется из моего понимания.Загрузка функции JavaScript сразу через расширение Chrome

Может ли кто-нибудь объяснить, что я делаю? Я получил это далеко через учебники, но я не могу редактировать его так же хорошо, как хочу.

manifest.json

{ 
    "manifest_version": 2, 

    "name": "MouseTracker", 
    "description": "This extension shows a Google Image search result for the current page", 
    "version": "1.0", 

    "browser_action": { 
    "default_icon": "icon.png", 
    "default_popup": "popup.html" 
    } 

} 

mouseTracker.js

const data = []; 

let last = Date.now(); 
document.onmousemove = function (event) { 
    const time = Date.now(); 
    if (time > (last + 100)) { 
     const {clientX, clientY} = event; 
     data.push({x: clientX, y: clientY, time}); 
     last = time; 
    } 
} 

document.getElementById('finished').onclick = function() { 
    const stuff = JSON.stringify(data); 
    const mime = 'data:text/plain'; 
    downloadURI(mime + ',' + stuff, 'mouse.txt'); 
} 


function downloadURI(uri, name) { 
    var link = document.createElement("a"); 
    link.download = name; 
    link.href = uri; 
    link.click(); 
} 

popup.html

<!doctype html> 
<html> 
    <title>Getting Started Extension's Popup</title> 
    <button id="finished"> 
     Finish Test! 
    </button> 
</html> 

В целом, цель является получение вызова document.onmousemove = function (event) всякий раз, когда мышь перемещается независимо от вкладки. Любые объяснения того, что делает мой код, оценили.

Редактировать: Код как есть. Это ВСЕ файлы.

+0

Ну, для одного: ваш HTML недопустим ... –

+0

@AlexMcMillan Чтобы отслеживать, связывайте файлы – Li357

+0

Да, я только что видел головную вещь, как я ее разместил. Он удаляется в моем исходном коде, но все есть. Это все код и все файлы. – Xenorosth

ответ

1

Я думаю, что ваш вопрос слишком широк, постарайтесь получить хорошее представление о том, как работают хромированные расширения, а затем возвращаются сюда для указаний на случай, если вы застрянете. Вот хороший старт, если вы закончили учебное пособие для расширения хром: https://developer.chrome.com/extensions/overview

Прочитайте классы и методы API расширения chrome, а также через свою архитектуру, которые помогут вам структурировать расширение. Многие вопросы здесь в stackoverflow присутствуют уже и могут дать вам несколько предложений о том, как действовать.

По-моему в вашем случае вам может понадобиться файл background.html подкрепленная скрипта содержимого с помощью передачи сообщений: https://developer.chrome.com/extensions/messaging

Чтобы сохранить данные, которые вы можете использовать html5 локальное хранилище.

Если вы хотите хороший видео-учебник, а не проверить это, вы можете найти его непонятную на первый, но после того, как вы прочитали документацию он получит больше смысла https://www.youtube.com/watch?v=e3McMaHvlBY

удачи с проектом

Смежные вопросы