浏览器控制台定制库

时间:2018-04-15 06:11:03

标签: javascript google-chrome firefox

有时我会使用内置浏览器控制台来简化页面导航。考虑例如reddit中的按钮,在点击时,用户将用户重定向到具有不可预测的url的下一页(页面nr不是简单地在url参数内捕获)。在控制台中我用jquery键入函数,它获取下一个按钮的处理程序并单击它。我想在某个地方保存这个功能,并且能够在没有任何先前操作的情况下在控制台中使用它。

有没有办法制作我自己的js库,它会被添加到我自动进入的所有页面中?

1 个答案:

答案 0 :(得分:0)

是的:你可以给自己写一个userscript。例如,假设您想要获取不可预知的next按钮的网址并对其执行某些操作 - 如果您检查了reddit的HTML,您会看到可以选择{{ 1}}与a。假设您想编写一个用户脚本,该脚本会自动显示您转到的每个reddit页面顶部的URL文本。安装用户脚本管理器(如Tampermonkey),创建新脚本,然后粘贴以下内容:

.next-button > a

如果要跨页面加载保存信息,可以使用// ==UserScript== // @name reddit-show-next // @namespace CertainPerformance // @include https://www.reddit.com/* // @grant none // ==/UserScript== (() => { const nextAnchor = document.querySelector('.next-button > a'); // not all pages are guaranteed to have this element, so return if it doesn't exist: if (!nextAnchor) return; const nextHref = nextAnchor.href; document.body.insertBefore(document.createElement('h2'), document.body.children[0]) .textContent = nextHref; // or click it with the following: // nextAnchor.click(); })();

每当您加载与您提供的localStorage匹配的网页时,都可以将用户脚本设置为自动运行 - 这样,您甚至不必打开控制台。用户脚本是一个非常强大的工具,用于自定义您的浏览体验,但您必须首先了解Javascript的基础知识。

如果您想使用您编写的用户脚本从网站上的多个页面中抓取大量信息,您可以使用普通网络请求(例如使用@include)而不是单独导航到每个页面 - 它&#39 ;更容易,并且不难自动完成。