如何在不重新加载页面的情况下从 FF Web 扩展内容脚本更改 3rd 方网站上的 Angular 应用程序路由/URL

Posted 2023-05-09

【中文标题】如何在不重新加载页面的情况下从 FF Web 扩展内容脚本更改 3rd 方网站上的 Angular 应用程序路由/URL

【英文标题】：How to change angular app route/URL on a 3rd party website from a FF web extension content_script without reloading page

【发布时间】：2020-12-06 02:46:30

【问题描述】：

我已经构建了一个 FF 扩展程序，可以从“a.com”加载一堆股票市场符号。

然后在我的 FF 浏览器中，扩展程序需要以编程方式更改使用 angularJS 的站点“b.com”中当前加载的路由。

我不拥有也无权更改网站“b.com”上的代码，除非通过 FF 扩展。 我的扩展使用 jQuery 和 vanilla JS。

提示： 在 b.com 上，当我在搜索输入字段（此处由 CSS 选择器“.symbol-lookup-field input”表示）中搜索股票代码然后按回车键时，它会更改路线及其速度。

尝试 #1： 我可以通过简单地更改整个窗口 URL 来更改当前路由，如下所示： window.location.href = 'https://b.com/trading/quote/A/chart';

但是这需要很长时间才能加载，而且由于我需要浏览一百个这样的 URL，我需要它足够快。

尝试 2： 因此，我尝试模拟一个 enter keypress/keydown 事件（两者都尝试过），当我为 ENTER 键设置事件侦听器时，它们从 jQuery 的角度正确触发，但是它最终不会执行与我要执行相同的操作在我的键盘上按回车键。所以这个解决方案最终对我不起作用。请注意，搜索字段的 BG 颜色为绿色，因此这不是 CSS 选择器问题。

这是我那部分的代码：

var myKeyDown = function(event)
    if ((event.keyCode) == 13) 
        alert('Enter keydown triggered');
        $(this).off('keydown',myKeyDown);
    
;
$(".symbol-lookup-field input").off('keydown',myKeyDown).on('keydown',myKeyDown);
var e = jQuery.Event("keydown");
e.which = 13;
e.keyCode = 13;
$(".symbol-lookup-field input").css("background-color",'#e2efd5');
$(".symbol-lookup-field input").trigger(e).trigger("blur");

尝试 #3： 另一种解决方案是找到一种方法来从外部更改已加载的角度应用程序的路线。有谁知道如何从 FF 扩展 content_script 更改 AngularJS 应用程序的当前路由？

所以现在我卡住了，因为这 3 种解决方案中没有一个可以满足需要的使用。任何人都知道输入什么来更改角度应用程序路线？

注意事项：

b.com 网站使用 Angular v1.5.8。 我可以从 FF 扩展访问文档和窗口对象。 b.com 使用指令/ngApp

【问题讨论】：

注意：我可以访问窗口对象和文档对象......所以应该可以以某种方式与角度交互。我只需要知道如何...

【参考方案1】：

我终于找到了解决办法。

由于我们可以在任何浏览器上推送历史记录项，我使用它，最后一部分是我需要 Angular 应用程序显示的 URL：

window.history.pushState(,null, '/trading/quote/A/chart');

为了更改浏览器中的 URL。因为 url 的 Angular 监视中的 $location 模块/服务“实时”更改，所以更改会在 Angular 应用程序内被拾取，并通过正确显示的内容反映出来。

这样就解决了问题。