Обнаружение изменений страницы, которые не обновляются sh в Chrome Extension Javascript + Clay. js

Question

Фон

Я пытаюсь написать расширение Google Chrome для обнаружения, когда пользователь прокручивает страницу в Facebook, и если он успешно загружает новый набор сообщений, измените значок для одного из вариантов реакции для всех сообщений. Я использую clay. js, чтобы определить, изменился ли размер div, который содержит ленту Facebook, что означает, что загружено больше постов / были опубликованы комментарии. Это прекрасно работает.

Проблема

Проблема возникает, когда вы переключаетесь между страницами на Facebook без обновления. Например , если вы начнете на странице Home , это будет работать нормально. Однако, когда вы переходите в свой профиль, сценарий больше не запускается, , пока вы не обновите sh страницы. После обновления сценарий снова работает отлично. Я знаю, что мне чего-то не хватает в том, как загружается мой файл, поэтому мой вопрос: как мне запускать свой скрипт на каждой странице Facebook, без необходимости обновлять sh между страницами каждого типа?

Соответствующий код (устройство изменения реакции. js)

const fbContentId = "#content"

// on DOM load, watch for future feed scrolling
document.addEventListener('DOMContentLoaded', checkFeedUpdate(), false);

function checkFeedUpdate(){
    let currFeed = new Clay(fbContentId)
    // resize occurs whenever the user scrolls down or a comment loads
    // on a prexisting post
    currFeed.on('resize', function() {
        switchAllIcons()
    });
}

Манифест (некоторые элементы опущены для простоты, обозначены .. .). change-icons. js - это скрипт, который на самом деле меняет значки, и он будет работать нормально, если сработает программа смены реакции. js script.

{
    ...
    "version": "1.0",
    "manifest_version": 2,
    "content_scripts": [
        {
            "matches": ["https://www.facebook.com/*"],
            "js": ["extension/clay.js", "change-icons.js", "reaction-changer.js"],
            "all_frames": true
        }
    ],
    "web_accessible_resources": [
        "img/*.png"
    ]
...

}

Любая помощь будет принята с благодарностью! Я прочитал документацию Chrome Extension, а также кучу других сообщений о переполнении стека, но, должно быть, где-то пропустил решение.

Answer 1

Хорошо, я потратил последние 2 часа, работая над этим, и нашел решение, которым я доволен на данный момент (хотя и не доволен - но что вы будете делать). В основном, большой вопрос, который у меня возник в моем ОП, был:

как мне запустить мой скрипт на каждой странице Facebook, без необходимости повторного sh между страницами каждого типа?

Ну, я понял, что да, освежение - это решение. Итак ... что если мы принудительно сделаем refre sh на конце Facebook, позволив DOM refre sh и коду, который будет работать, как ожидалось? Я полагаю, что это НАДЕЖНО на самом деле является основной проблемой того, как реализована используемая мной библиотека Clay.js. Во всяком случае, я в основном подошел к решению:

1. Во-первых, создав файл background.js, который использует chrome.tabs.onUpdated.addListener - эта функция в основном позволяет мне определять, изменилась ли вкладка или статус страницы был «завершен», показывая, что он загрузился.
2. Если он загрузился, тогда я запускаю функцию checkFeedUpdate() точно так же, как указано выше.
3. Если она изменилась на новую страницу (например, пользователь нажал с Перейдите в раздел «Профиль»), я принудительно перезагружаюсь и жду, пока сработает пункт 2.
4. 'background. jsis detecting whether or not these states have happened yet, and relaying the information to response-changer.js`.

Вот обновленный бит устройства изменения реакции. js (вместо document.addEventListener):

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
      // listen for messages sent from background.js
      if (request.message === 'reload') {
        location.reload();
      } else if (request.message === 'start'){
        checkFeedUpdate()
      }
  });

Вот обновленный манифест:

    "background": {
    "scripts": ["background.js"]
},
"content_scripts": [
    {
        "matches": ["https://www.facebook.com/*"],
        "js": ["extension/clay.js", "change-icons.js", "reaction-changer.js"],
        "all_frames": true
    }
],
"permissions": [
    "tabs"
],
"web_accessible_resources": [
    "img/*.png"
]

И вот что я создал для background.js:

chrome.tabs.onUpdated.addListener(
    function(tabId, changeInfo) {
      // read changeInfo data and do something with it
      if (changeInfo.url) {
        chrome.tabs.sendMessage( tabId, {
          message: 'reload'
        })
      } else if (changeInfo.status === 'complete'){
          chrome.tabs.sendMessage( tabId, {
              message: 'start'
          })
      }
    }
  );

Если кто-то сталкивается с подобной проблемой (кажется, что обновление работает, но вы не можете заставить его работать без обновления ), похоже, что просто принудительное использование refre sh может быть хорошим решением. Если есть лучший, пожалуйста, дайте мне знать!