javascript - 是否有代码将 javascript 注入(inject)网站以更改 Pane 的宽度？

Question

我试图通过在 google chrome 中注入(inject) javascript 代码来更改 Pane 的宽度。我希望将该代码保存为书签，每当我单击该书签时，更改都会在网站上生效。我可以通过检查、导航 Pane 并更改宽度和 css 来手动更改宽度，但是当我在网站上时，一直这样做很麻烦，所以我想自动化它。

我基本上想要实现的是替换下面的代码

<div tabindex="-1" role="region" aria-label="Navigation pane" class="_25oA4qBLP_b6P080cw5s2H css-43" data-min-width="198" data-max-width="320">

到

<div tabindex="-1" role="region" aria-label="Navigation pane" class="_25oA4qBLP_b6P080cw5s2H css-50" data-min-width="198" style="width: 550px;">

我该怎么做？

Answer 1

选择 <div>与 querySelector或者你喜欢的任何一种方法，然后分配给它的 style属性:

const div = document.querySelector('div[role="region"]');
div.style.width = '550px';

在书签代码中:

javascript: (document.querySelector('div[role="region"]').style.width = '550px', undefined)

请注意，如果您希望每次访问该站点时都发生这种情况，而不是每次都单击小书签，您可以考虑使用用户脚本，它会在页面加载时自动运行您想要的 Javascript。 (一个流行的用户脚本管理器是 Tampermonkey 。)

因为这看起来像纯 CSS，您也可以使用 Stylus要实现这一点 - 只需输入您想要的任何 CSS:

div[role="region"] {
  width: 550px;
}

如果您还想更改类名，请使用 classList.remove和 classList.add :

div.classList.remove('css-43');
div.classList.add('css-50');

(那部分不能单独用CSS完成)