Как сделать поиск по странице с помощью java Script в плагине для Хром?

Question

[Кирилл]

Всем привет, прошу поомочь, т.к. плохо знаю JS суть в слудующем :
Пишу плагин для хрома, который выполняет поиск по странице, навесил на кнпоку обработчик, но политикой хрома запрещено использовать инлайновые скрипты.
вот так было изначально:

<input type="text" id="text-to-find" placeholder="поиск"> 
<input type="button"  value="найти" onclick="FindOnPage('text-to-find'); return false; "/>

соответственно хром ругается на инлайновые скрипты:
onclick="FindOnPage('text-to-find'); return false;

сам скрипт поиска:

var lastResFind=""; // последний удачный результат
var copy_page=""; // копия страницы в ихсодном виде
function TrimStr(s) {
     s = s.replace( /^\s+/g, '');
  return s.replace( /\s+$/g, '');
}
function FindOnPage(inputId) {//ищет текст на странице, в параметр передается ID поля для ввода
  var obj = window.document.getElementById(inputId);
  var textToFind;

  if (obj) {
    textToFind = TrimStr(obj.value);//обрезаем пробелы
  } else {
    alert("Введенная фраза не найдена");
    return;
  }
  if (textToFind == "") {
    alert("Вы ничего не ввели");
    return;
  }

  if(document.body.innerHTML.indexOf(textToFind)=="-1")
  alert("Ничего не найдено, проверьте правильность ввода!");

  if(copy_page.length>0)
        document.body.innerHTML=copy_page;
  else copy_page=document.body.innerHTML;


  document.body.innerHTML = document.body.innerHTML.replace(eval("/name="+lastResFind+"/gi")," ");//стираем предыдущие якори для скрола
  document.body.innerHTML = document.body.innerHTML.replace(eval("/"+textToFind+"/gi"),"<a name="+textToFind+" style='background:red'>"+textToFind+"</a>"); //Заменяем найденный текст ссылками с якорем;
  lastResFind=textToFind; // сохраняем фразу для поиска, чтобы в дальнейшем по ней стереть все ссылки
  window.location = '#'+textToFind;//перемещаем скрол к последнему найденному совпадению

все работает, все ищет, НО В ПЛАГИНЕ НЕ РАБОТАЕТ ибо инлайн нельзя, знаю, что можно сделать как динамический обработчик, что-то вроде:

document.getElementById('btn-text-to-find').addEventListener('click',FindOnPage('text-to-find'))

но как все это прикрутить хзхз, будте добры подскажите как все это заставить работать, что-бы в pupup.html не было JS

Answer 1

[Егор Живагин]

1 - Убери вообще onclick из html
2 - Вставь строчку

document.getElementById('btn-text-to-find').onclick = function(){
    FindOnPage('text-to-find');
};

Или строку из вопроса в код, например, сразу после объявления переменных (на 3 строку).

Comments

[Кирилл]

спасибо, но в консоль сыпится ошибка :

Uncaught TypeError: Cannot read property 'addEventListener' of null

поправил:

var lastResFind=""; // последний удачный результат
var copy_page=""; // копия страницы в ихсодном виде
document.getElementById('btn-text-to-find').addEventListener('click',FindOnPage('text-to-find'));
function TrimStr(s) {
     s = s.replace( /^\s+/g, '');
  return s.replace( /\s+$/g, '');
}

не пойму почему он не видит

<input type="text" id="text-to-find" placeholder="поиск"> 
<input type="button"  value="найти" id="btn-text-to-find" />

[Егор Живагин]

Кирилл: если ошибка всё ещё сыпится - вариант из моего ответа без этой функции

Поставьте несколько console.log('1, 2, 3, ...') внутри FindOnPage, посмотрите, докуда вообще доходит функция