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

Question

背景

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

问题

当您 在 Facebook 的页面之间切换而不刷新时会出现问题。例如，如果您从主页页面开始，这会工作正常。但是，当您切换到个人资料时，脚本不再运行s， 直到您刷新页面。 刷新后，脚本再次完美运行。我知道我遗漏了一些关于文件加载方式的信息，所以我的问题是：如何在每个 Facebook 页面上运行我的脚本，而不必在每种类型的页面之间刷新？

相关代码（反应-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（为简单起见省略了一些元素，用...表示）。 change-icons.js 是实际更改图标的脚本，运行没问题，如果 reaction-changer.js 脚本实际上运行s.

{
    ...
    "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

好吧，我花了最后 2 个小时来解决这个问题，我找到了一个我现在很满意的解决方案（虽然不满意——但你会怎么做）。基本上，我在 OP 中遇到的大问题是：

how do I run my script on every Facebook page, without having to refresh between each type of page?

好吧，我意识到，是的，刷新是解决方案。那么...如果我们在 Facebook 端强制刷新，允许 DOM 刷新，并且代码按预期变为运行怎么办？我相信这可能实际上是我正在使用的 Clay.js 库的实现方式的潜在问题。无论如何，我基本上是通过以下方式接近解决方案的：

首先，创建一个利用 chrome.tabs.onUpdated.addListener 的 background.js 文件——这个功能基本上让我检测选项卡是否已更改或页面状态是否为 "completed" 表明它已更改已加载。
如果它加载了，那么我运行函数 checkFeedUpdate() 和上面完全一样。
如果它更改为新页面（例如，用户从“主页”单击“个人资料”），我会强制重新加载，然后等待上面的第 2 点触发。
'background.jsis detecting whether or not these states have happened yet, and relaying the information to反应-changer.js`。

这是反应的更新位-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'
          })
      }
    }
  );

如果有人最终遇到类似的问题（似乎刷新可以解决问题，但不刷新就无法正常工作），似乎强制刷新可能是一个很好的解决方案。如果有更好的，请告诉我！

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

Detect page changes that'd don't refresh in Chrome Extension Javascript + Clay.js

javascript

facebook

google-chrome