4

Пишу свое первое расширение для хрома, надо по работе.

В расширении есть: текстовое поле и кнопка, при нажатии на кнопку, должен произойти поиск того, что пользователь написал в текстовое поле на странице ( аналог ctrl+f). Но, пишу я это для того, что поиск нужен по большому меню (как аккардион), которое по умолчанию скрыто (свернуто), соответственно пока не развернешь, поиск не возможен.

Задача плагина: развернуть это древо и найти в нем то, что написано в текстовое поле.

Создал файлы:

  1. index.html - тело плагина
  2. jquery.js - подключается библиотека jquery
  3. manifest.json - собственно файл манифест
  4. popup.js - сам скрипт jq который должен менять DOM

Сам сайт мне не доступен, все операции только на стороне клиента, поэтому и пишу плагин.

В manifest.json у меня вот что:

{
    "manifest_version": 2,

    "name": "ИМЯ ПЛАГИНА",
    "description": "Можно модули поискать. Удобно.Наверное...",
    "version": "1.0",

    "browser_action": {
      "run_at": "document_start",
      "css": ["css.css"],
      "matches": ["урл.сайта"],
        "default_icon": "icon.png",
        "default_popup": "index.html",
      "js": ["jquery.js", "popup.js"]
    }
 }

Прошелся Firebagом по тому сайту, нашел стиль отвечающий за свернуть/развернуть меню:

.ng-hide {
    display:none !important
}

Соответственно нужно что-бы эти классы было видно

В popup.js сделал вот так :(с предвкушением, что ничего из этого не выйдет)

$('ng-hide').css({'display: block !important'});

и ничего не вышло, взаимодействия с DOM нет.

Подскажите, как мне заставить браузер изменять объекты DOM дерева через плагин.

1
  • вы написали селектор который ничего вам не вернет. У вас класс .ng-hide, так и создавайте селектор $('.ng-hide') 5 мая 2017 в 12:06

1 ответ 1

2

Popup расширения - это отдельная страница, которая с вкладками может общатся единственным способом - через content_script, который подгружается непосредственно в страницу, которая загружена во вкладке.

Вам нужно сделать как то так:

manifest.json

{
    "manifest_version": 2,
    "name": "ИМЯ ПЛАГИНА",
    "description": "Можно модули поискать. Удобно.Наверное...",
    "version": "1.0",
    "browser_action": {
      "run_at": "document_start",
      "css": ["css.css"],
      "matches": ["урл.сайта"],
        "default_icon": "icon.png",
        "default_popup": "index.html",
      "js": ["jquery.js", "popup.js"]
    },


    "content_scripts": [{
      "matches": ["урл.сайта*"],
      "js": ["jquery.js", "content_script.js"]
    }]
 }

content_script.js

chrome.extension.onRequest.addListener((request, sender, sendResponse) => {
    $('.ng-hide').css({'display: block !important'});
});

popup.js

// Можно повесить на клик или на onload
    chrome.tabs.getSelected(null, tab => {
        chrome.tabs.sendMessage(tab.id, {/*Тут можно передать в content script*/}, function sendResponse(response){
            // Это callback, который можно вызвать из content_script
        });
    });

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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