Расширения Chrome: получение документа.images.length с текущей страницы, а не из всплывающего окна. (Javascript) - PullRequest
0 голосов
/ 18 сентября 2018

Ола, после нескольких часов поиска решения я не смогла решить "проблему", поэтому я прошу помощи.Моя цель - создать расширение Google, которое показывает, сколько изображений имеется на текущей вкладке / странице, для этого я пытаюсь использовать javascript:

var x = document.images.length;
document.getElementById("idhere").innerHTML = x

с html:

<p id="idhere"></p>

Это работает, но не так, как мне бы хотелось, потому что он ищет изображения во всплывающем окне расширения, а не на вкладке (фон?).Затем он возвращает 0, так как у меня нет изображений в моем всплывающем окне, но если я добавляю изображение, оно возвращает 1 ...

Мой вопрос: как получить количество изображений, которые находятся на странице "позади""всплывающее окно расширения?

Ответы [ 2 ]

0 голосов
/ 19 сентября 2018

Завершение ответа @ jess:

Сначала добавьте строки ниже в ваш manifest.json :

"content_scripts": [{
    "matches": ["https://anylinkhere.com/*"],
    "css": ["optionalstyle.css"],
    "js": ["contentscript.js"]
}],

Затем создайте файл contentscript.js в папке вашего расширения:

window.onload = function() {
chrome.runtime.sendMessage(document.images.length);
}
  • window.onload = function () {}

будет запущен, когда страница полностью загружена (требуется для загрузки всех изображений)

  • chrome.runtime.sendMessage (document.images.length);

отправит сообщение на ваш background.js с количеством изображений на странице.

А затем в вашем background.js добавьте:

chrome.runtime.onMessage.addListener(function(response, sender, sendResponse,) {
chrome.storage.sync.set({"x": (response)}, function() {
console.log('Set x as '+ (response));
});
});
  • chrome.runtime.onMessage.addListener ...

получите сообщение, отправленное вашим contentscript.js

  • chrome.storage.sync.set ({"x": (ответ)}, ...

сохраняет значение ответа (количество изображений) в x, тогда popup.js сможет получить к нему доступ.

  • console.log ('Установить x как' + (ответ));

войти (необязательно)

Теперь в вашем popup.js :

chrome.storage.sync.get('x', function(data) {
document.getElementById("anyidhere").innerHTML = data.x;
});
  • chrome.storage.sync.get ( 'х', ...

берет значение X из хранилища

  • document.getElementById ("anyidhere"). InnerHTML = data.x;

Добавляет значение X к элементу с указанным идентификатором (из вашего popup.html), например:

<body>
<p id="anyidhere"></p>
</body>

Ну, это все, что я узнал, изучая два дня, некоторая информация может быть неверной или плохо объясненной, но это работает.

Это способ отправки информации с веб-страницы в ваше всплывающее окно

0 голосов
/ 18 сентября 2018

Сценарии содержимого - это файлы, которые запускаются в контексте веб-страниц. Используя стандартную объектную модель документов (DOM), они могут читать информацию о веб-страницах, которые посещает браузер, вносить в них изменения и передавать информацию в родительское расширение.

Вот полная документация по управлению DOM с использованием Сценарии содержимого .

Похожие сообщения SO:

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...