Пример получение “данных” из страницы в расширение?

166
17 октября 2018, 03:20

Манифест:

{
    "manifest_version": 2,
    "name": "Test",
    "description": "Тест расширения",
    "version": "1.1",
    "icons": {
        "128": "128.png"
    },
    "browser_action": {
        "default_popup": "index.html"
    },
    "permissions": [
        "activeTab"
    ],
    "background": {
    "scripts": [
        "jquery.js",
        "background.js"
    ]
    },
    "content_scripts": [
    {
        "matches": ["http://*/*"],
        "css": ["style.css"],
        "js": ["jquery.js","popup.js"]
    }
    ]
}

Background.js

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log(sender.tab ?
                "from a content script:" + sender.tab.url :
                "from the extension");
    if (request.greeting == "hello")
      sendResponse({farewell: "goodbye"});
  });

Popup.js

chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
  console.log(response.farewell);
});

Если зайти на какой нибудь сайт с http:// то в консоле будет goodbye, если я правильно понял, то мы грубо говоря отправляем сообщение hello в расширение, там идет проверка и отправляется ответ, "goodbye"

Как правильно получать данные из страницы в расширение?

Пример: взять с яндекса какой нибудь блок с id="data" (к примеру), получить содержимое var b = $('#data').text(); и передать в свое расширение и например вставить в свою разметку, примерно в блок с id="test"....$('#test').text(b);

Можете по доброй воле, направить на путь истинный? Привести маленький пример вообще было бы чудом =) Спасибо.

Answer 1

Для работы с данными на странице вам нужен content-script. Строго говоря он у вас уже есть (указан в соотв. разделе манифеста), одна скрипт называется popup.js.
Это наводит на мысль, что есть некая путаница. В терминологии расширений: popup и content-script это разные вещи.

Popup – это всплывающее окошко в области расширения хрома.

Content-script – это скрипт, работающий непосредственно на страницах (соответсвующих маске matches в манифесте).

В целом, код у вас верный для контент-скрипта, однако я рекомендую придерживаться сложившейся практики наименования модулей.

Что касается вопроса получения данных, то вы можете обратиться к элементам использую стандартные DOM методы. Сейчас уже все можно сделать без необходимости подключать jQeury.

content-script.js

document.addEventListener('DOMContentLoaded', () => {
    // Берем нужный эелемент и получаем его текст
    const el = document.querySelector('#data');
    const elText = el.innerText;
    // Отправляем в background
    chrome.runtime.sendMessage({
        text: elText
    });
});

background.js

// Слушаем сообщения от CS
chrome.runtime.onMessage.addListener(function (request) {
    console.log(request.text);
});
READ ALSO
Вывод названия дня в Google Charts
javascript

Вывод названия дня в Google Charts

мне нужно вывести название дня в дате в Google Charts

 153
Eval где используется?
javascript

Eval где используется?

Зачем нужно использовать eval в JavaScript?

 143
Как создать модальное окно на React Native?
javascript

Как создать модальное окно на React Native?

Получил задание нарисовать модальное окно на React NativeПосле изучения документации и примеров , так и не удаётся показать на экране окно:

 174
Ошибка JS на Rails сервере
javascript

Ошибка JS на Rails сервере

Запускаю сервер ruby on rais, заходит на loginhtml и выдает вот такую ошибку ,

 166