如何创建持久工具栏？答案

【问题标题】：How to create persistent toolbar?如何创建持久工具栏？
【发布时间】：2017-06-19 19:17:44
【问题描述】：

这是针对 Firefox (Waterfox) 中的油脂猴用户脚本。

我们有一个云数据库 (CRM Dynamics)，为了加载特定记录，浏览器使用不同的 url 和参数执行三个页面加载。

我想从这些页面加载之一（加载在中间的那个）中获取参数，并将其显示在页面上的某个位置以供参考。所以我创建了一个适合主功能区正下方的 div。

问题是，由于页面加载了 3 次，也就是说脚本加载了 3 次，所以我使用 GM_getValue 和 GM_setValue 来存储和检索后续页面加载的数据。

但是，情况比这更糟。

页面中的 DOM 项目只能在第一次加载时添加/修改 - 此加载会加载所有 html。
我需要的值在第二次加载时的查询参数中 - 它只是将数据填充到第一页。
在第二个或第三个页面加载时，无法将查询参数值获取到工具栏-div；在第二次加载之前我没有价值。我认为后两个页面加载仅用于在页面加载之间传递参数 - 这些加载中没有页面 DOM。
用户脚本在每次页面加载时触发。
在第三个页面加载时，我可以执行操作，但无法与 html 交互（此页面加载中没有任何内容），即使 html 在窗口中。

有没有办法将我的工具栏-div 放在浏览器的 DOM 中，而不是页面的 DOM 中？这样一来，每个页面加载都可以访问一个地方。

我想做的是以某种方式让第一个页面加载在第三个页面加载完成之后做一些事情。

【问题讨论】：

我可以将 jquery 加载到用户脚本中，没问题。我会发布一个示例，但如果不访问我们的 crm，我想不出一种方法使其易于理解。
恶搞似乎很有趣，但我无法知道 url + 恶搞所需的参数；如果我知道第一页加载时的内容，我根本不需要恶搞。
这个问题太宽泛了，你需要把它归结为一个MCVE。通常，您可以通过使用postMessage、localStorage（仅限同一域）或GM_setValue 在脚本实例之间进行通信来做您想做的事情。如果它们是同域 (i) 框架，您还有其他选择。

【解决方案1】：

想通了！ Brock Adam 的评论让我找到了解决方案。谢谢，布洛克。

所以我想出在第一页加载时运行的代码并确保它这样做：

$(window).on('load', function () {
    console.log('updating itemid');
    $('#myd').text(GM_getValue("itemid"));
});

window.load 事件在每次页面加载时触发，因此当最后一次页面加载运行时，它会触发此加载事件并更新 div 文本。显然，此事件在第三次页面加载完成后才会触发。

【讨论】：