Обнаружить изменения страницы в веб-расширении - PullRequest
Новая
       12

Обнаружить изменения страницы в веб-расширении

0 голосов
/ 07 июня 2019

Я создаю расширение для конкретного сайта.Он устанавливает ширину элемента определенного размера: 

//script.js
document.getElementById('nice header').style.width = "100px";

Вот мой манифест (соответствующие части): 

{
    "content_scripts": [
      {
          "matches": [ "https://target_website.com/*" ],
          "js": [ "script.js" ]
      }
    ]
}

При отладке расширения, когда я вхожу в target_website.com первый разЯ вижу, что мои изменения применяются.Однако, если я перемещаюсь где-то внутри этого сайта, например, на target_website.com/profile, элемент с идентификатором nice header width устанавливается в его первоначальное значение.Если я затем перезагрузлю эту страницу, изменения из моего расширения будут применены снова.

Как я могу гарантировать, что изменения в моем расширении всегда применяются к веб-сайту?

1 Ответ

1 голос
/ 17 июня 2019

Если я правильно понимаю, на сайт, на который вы нацеливаетесь, используется какая-то технология одностраничного приложения.

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

#nice_header {
    width: 100px; /* maybe add an !important here */
}

затем включите его в ваш manifest.json: 

...
{
    "content_scripts": [
      {
          "matches": [ "https://target_website.com/*" ],
          "css": [ "style.css" ],
          "js": [ "script.js" ]
      }
    ]
}
...

Это не только сохранит ваши настройки, но и сохранит циклы ЦП для ваших пользователей.

Если вы хотите выполнять функцию JavaScript при каждом изменении страницы, вам может потребоваться подписаться на событие webNavigation.onHistoryStateUpdated. Подробнее об этом здесь: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/webNavigation/onHistoryStateUpdated

...