Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.05.2017, 12:03
Новичок на форуме
Отправить личное сообщение для lonedr Посмотреть профиль Найти все сообщения от lonedr
 
Регистрация: 12.05.2017
Сообщений: 7

Плагин для Chrome работа с DOM поиск по странице
Добрый день, я новичек в JS)
Пишу плагин для хрома, его задача поиск текста на странице.
Т.е. пользователь вводит в текстовое поле слово, жмет на кнопку и нужное подсвечивается. Если делать не как плашин а просто в html то проблем нет, но вот с плагином столкнулся с проблемой:
Поскольку в плагинах инлайн скрипты запрещены, то повесить обработчик на кнопку в popup.html нельзя, следовательно попытался прикрутить динамиеский обработчик, но что-то не вышло.
Что имею:

popup.html

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



скрипт поиска (s.js):

<script type="text/javascript">
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, '');
}
function FindOnPage(inputId) {//ищет текст на странице, в параметр передается ID поля для ввода
  var obj = document.getElementById('btn-text-to-find').addEventListener('click',FindOnPage('text-to-find'))
  var textToFind;

  if (obj) 
  {
    textToFind = TrimStr(obj.value);//обрезаем пробелы
  }


скрипт лежит в отдельном файле, который вызывается фоновым обработчиком:

popup.js
document.addEventListener("DOMContentLoaded",function (){
   	chrome.tabs.executeScript( {"file": "s.js"});
});


Все это обернуто в DOMContentLoaded, значит весь DOM уже построен (я ан это надеюсь)

popup.js вызывается из popup.html:
<head>
<script src="popup.js"></script>
<script src="jquery.js"></script>
</head>


Обычная структура плагина:
popup.html->popup.js->s.js

при запуске, консоль ругается на строчки:



Код:
Uncaught ReferenceError: TrimStr is not defined
    at FindOnPage (index.html:79)
    at index.html:58
    at dispatch (jquery.js:3)
    at i (jquery.js:3)



Код:
 textToFind = TrimStr(obj.value);//обрезаем пробелы-  Uncaught ReferenceError: TrimStr is not defined

document.getElementById('btn-text-to-find').addEventListener('click',FindOnPage('text-to-find'));
подскажите плс как заставить эту адскую машину работать, а то я совсем запутался.

Если без динамического обработчика т.е. повесить на инпут обычный обработчик:

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


то все работает
но так инлайново для плагина нельзя по политике хрома
Ответить с цитированием
  #2 (permalink)  
Старый 12.05.2017, 12:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,976

lonedr,
может сначала jquery.js а потом popup.js , строки 2 и 3 поменять в popup.html?
Ответить с цитированием
  #3 (permalink)  
Старый 12.05.2017, 12:15
Новичок на форуме
Отправить личное сообщение для lonedr Посмотреть профиль Найти все сообщения от lonedr
 
Регистрация: 12.05.2017
Сообщений: 7

увы но не в этом дело (
вот запустил с напряму (не как плагин, а как html старничка) все скинул в один html файл



<head>

<script src="jquery.js"></script>
</head>
<body>
<h2>поиск</h2>
<input type="text" id="text-to-find" placeholder="поиск"> 
<input type="button"  value="найти" id="btn-text-to-find" />
<br/><i>Название</i>
<hr/>

<table border='2' cellpadding='20'>

РАЗ<br>
ДВА.<br>
ТРИ<br>
4<br>
00:25:92 Guangzho Guangzhou Shirui Electronic Co., Ltd<br>
00:25:93 DatnetIn DatNet Informatikai Kft.<br>
00:25:94 Eurodesi Eurodesign BG LTD<br>
00:25:95 Northwes Northwest Signal Supply, Inc<br>
00:25:96 Gigavisi GIGAVISION srl<br>
00:25:97 KalkiCom Kalki Communication Technologies<br>
00:25:98 ZhongSha Zhong Shan City Litai Electronic Industrial Co. Ltd<br>
00:25:99 HedonEDB Hedon e.d. B.V.<br>
00:25:9A Cestroni CEStronics GmbH<br>
00:25:9B BeijingP Beijing PKUNITY Microsystems Technology Co., Ltd<br>
00:25:9C Cisco-Li Cisco-Linksys, LLC<br>
00:25:9D Private<br>
00:25:9E HuaweiTe Huawei Technologies Co., Ltd.<br>
00:25:9F Technodi TechnoDigital Technologies GmbH<br>
00:25:A0 Nintendo Nintendo Co., Ltd.<br>
00:25:A1 Enalasys<br>
00:25:A2 AltaDefi Alta Definicion LINCEO S.L.<br>
00:25:A3 TrimaxWi Trimax Wireless, Inc.<br>
00:25:A4 Eurodesi EuroDesign embedded technologies GmbH<br>
00:25:A5 WalnutMe Walnut Media Network<br>
00:25:A6 CentralN Central Network Solution Co., Ltd.<br>
00:25:A7 Comverge Comverge, Inc
 
 
</table>
</body>
<style>	#sign {width: 110px;height: 33px;padding: 0;margin: 0;position: fixed;right: 0;bottom: 0;}</style>	




<script type="text/javascript">

$(window).load(function() {
alert ("22d");

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, '');
}









      
 });
function FindOnPage(inputId) {//ищет текст на странице, в параметр передается ID поля для ввода
  var obj = window.document.getElementById(inputId);
  var textToFind;
 
  if (obj) 
  {
    textToFind = TrimStr(obj.value);//обрезаем пробелы
  } 
    
 
  

  
  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:yellow'>"+textToFind+"</a>"); //Заменяем найденный текст ссылками с якорем;
  lastResFind=textToFind; // сохраняем фразу для поиска, чтобы в дальнейшем по ней стереть все ссылки
  window.location = '#'+textToFind;//перемещаем скрол к последнему найденному совпадению
 } 





</script>


та-же самая ошибка

Последний раз редактировалось lonedr, 12.05.2017 в 12:17.
Ответить с цитированием
  #4 (permalink)  
Старый 12.05.2017, 12:29
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

TrimStr вынести из события $(window).load.
Ответить с цитированием
  #5 (permalink)  
Старый 12.05.2017, 12:36
Новичок на форуме
Отправить личное сообщение для lonedr Посмотреть профиль Найти все сообщения от lonedr
 
Регистрация: 12.05.2017
Сообщений: 7

<!--################################################################################################### -->
<head>

<script src="jquery.js"></script>
</head>
<body>
<h2>поиск</h2>
<input type="text" id="text-to-find" placeholder="поиск"> 
<input type="button"  value="найти" id="btn-text-to-find" />
<br/><i>Название</i>
<hr/>

<table border='2' cellpadding='20'>

РАЗ<br>
ДВА.<br>
ТРИ<br>
4<br>
00:25:92 Guangzho Guangzhou Shirui Electronic Co., Ltd<br>
00:25:93 DatnetIn DatNet Informatikai Kft.<br>
00:25:94 Eurodesi Eurodesign BG LTD<br>
00:25:95 Northwes Northwest Signal Supply, Inc<br>
00:25:96 Gigavisi GIGAVISION srl<br>
00:25:97 KalkiCom Kalki Communication Technologies<br>
00:25:98 ZhongSha Zhong Shan City Litai Electronic Industrial Co. Ltd<br>
00:25:99 HedonEDB Hedon e.d. B.V.<br>
00:25:9A Cestroni CEStronics GmbH<br>
00:25:9B BeijingP Beijing PKUNITY Microsystems Technology Co., Ltd<br>
00:25:9C Cisco-Li Cisco-Linksys, LLC<br>
00:25:9D Private<br>
00:25:9E HuaweiTe Huawei Technologies Co., Ltd.<br>
00:25:9F Technodi TechnoDigital Technologies GmbH<br>
00:25:A0 Nintendo Nintendo Co., Ltd.<br>
00:25:A1 Enalasys<br>
00:25:A2 AltaDefi Alta Definicion LINCEO S.L.<br>
00:25:A3 TrimaxWi Trimax Wireless, Inc.<br>
00:25:A4 Eurodesi EuroDesign embedded technologies GmbH<br>
00:25:A5 WalnutMe Walnut Media Network<br>
00:25:A6 CentralN Central Network Solution Co., Ltd.<br>
00:25:A7 Comverge Comverge, Inc
 
 
</table>
</body>
<style>	#sign {width: 110px;height: 33px;padding: 0;margin: 0;position: fixed;right: 0;bottom: 0;}</style>	




<script type="text/javascript">
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, '');
}
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;//перемещаем скрол к последнему найденному совпадению



</script>


сделал, теперь вообще ошибок нет и ничего не происходит, похоже я туплю уже
Ответить с цитированием
  #6 (permalink)  
Старый 12.05.2017, 12:39
Новичок на форуме
Отправить личное сообщение для lonedr Посмотреть профиль Найти все сообщения от lonedr
 
Регистрация: 12.05.2017
Сообщений: 7

ругается вот на это:
window.location = '#'+textToFind;//перемещаем скрол к последнему найденному совпадению


Uncaught SyntaxError: Unexpected end of input
Ответить с цитированием
  #7 (permalink)  
Старый 12.05.2017, 12:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,976

Сообщение от lonedr
document.body.innerHTML = document.body.innerHTML.replace
что так делать нельзя,теряются все addEventListener, вы в курсе?
Ответить с цитированием
  #8 (permalink)  
Старый 12.05.2017, 12:40
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

А вот элементы будут доступны как раз после наступления события $(window).load.
Ответить с цитированием
  #9 (permalink)  
Старый 12.05.2017, 12:44
Новичок на форуме
Отправить личное сообщение для lonedr Посмотреть профиль Найти все сообщения от lonedr
 
Регистрация: 12.05.2017
Сообщений: 7

дак как сделать, что-бы при вводе слова в текстбокс оно искалось на странице без использования инлайновых скрипто в html, что-бы в html был только html) уже и гуглил и перекодил все 3 дня сижу :С
Ответить с цитированием
  #10 (permalink)  
Старый 12.05.2017, 12:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,976

lonedr,
может чем поможет
jQuery highlight plugin — подсветка слов в тексте
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Плагин для Chrome accept Javascript под браузер 0 19.06.2014 19:02
плагин для поиска скриптов в документе agata_273 Общие вопросы Javascript 1 14.01.2014 13:54
Плагин для CKEditor BashOrgRu Общие вопросы Javascript 0 08.11.2013 05:22
Фреймворк для разработки расширений для Chrome chernikov Библиотеки/Тулкиты/Фреймворки 0 05.03.2012 15:51
Поиск элементов по DOM-дереву и работа с XML и XSLT mister_maxim Events/DOM/Window 1 13.03.2011 18:41