在Chrome扩展Javascript + Clay.js中检测不会刷新的页面更改

Question

背景

我正在尝试编写一个Google扩展来检测用户在Facebook上滚动时的情况，如果他们成功地加载了一组新的帖子，则更改所有帖子的反应选项之一的图标。我使用clay.js来检测包含Facebook提要的div是否已调整大小，这意味着更多的帖子已经加载/评论已经发布。，这很好，

问题

当你在没有刷新的情况下在Facebook上的页面之间进行交换时，问题就出现了。例如，如果你从你的主页页面开始，这会很好。但是，当您切换到您的配置文件时，脚本将不再运行，直到刷新页面。一旦刷新，脚本将再次完美运行。我知道我的文件是如何加载的，所以我的问题是：如何在每个Facebook页面上运行我的脚本，而不必在每种类型的页面之间刷新？

相关代码 (reaction-changer.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()
    });
}

Manifest (为了简单起见，有些元素省略了.)。is是一个实际更改图标的脚本，如果reaction-changer.js脚本实际运行，它将运行得很好。

{
    ...
    "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扩展文档，以及一堆其他堆栈溢出帖子，但肯定遗漏了一个解决方案。

Answer 1

好吧，我花了两个小时在这个问题上，我找到了一个我现在很满意的解决方案(尽管不满意--但你会怎么做)。基本上，我在行动中遇到的最大问题是：

如何在每个Facebook页面上运行我的脚本，而不必在每种类型的页面之间刷新？

嗯，我意识到，是的，提神是解决问题的办法。所以..。如果我们强制在Facebook的末尾进行刷新，允许DOM刷新，并按预期运行代码，该怎么办？我相信这可能是我所使用的Clay.js库是如何实现的一个根本问题。总之，我基本上是通过以下方式来解决问题的：

1. 首先，创建一个利用background.js的chrome.tabs.onUpdated.addListener文件--这个函数基本上可以让我检测一个选项卡是否改变了，或者页面状态是否“完成”表示它已经加载了。
2. 如果它加载了，那么我将按照上面的方式运行函数checkFeedUpdate()。
3. 如果它更改为一个新页面(例如，用户从Home单击到Profile)，我会强制重新加载，然后等待上面的第2点启动。
4. 'background.jsis detecting whether or not these states have happened yet, and relaying the information toreaction-changer.js`.

下面是更新的reaction-changer.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'
          })
      }
    }
  );

如果有人最终遇到了类似的问题(似乎是耳目一新，但如果没有刷新就无法使其工作)，那么仅仅强制刷新可能是一个好的解决方案。如果有更好的，请告诉我！