使用 Vimium C 插件来运行 JavaScript 代码

原创已于 2024-12-05 15:00:04 修改 · 980 阅读

30 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #Vimium #浏览器插件 #油猴脚本

于 2024-12-04 23:23:58 首次发布

文章目录

1. 介绍
2. 原理
3. 具体步骤
4. 注意事项

1. 介绍

之前，我写过一篇文章：使用浏览器书签(收藏夹)来运行 JavaScript 代码

在测试这个书签来运行 JavaScript 代码的过程中，发现它有一些缺点，比如：会占用原本就所剩不多的书签栏空间，因为如果将它放到一个文件夹中，又不方便点击；移动鼠标找到这个书签栏，也是比较麻烦的，不如使用键盘来得快。

所以，在经过一段时间的研究后，发现可以使用 Vimium C 的按键重映射功能来实现同样的功能。

这里，依然是以之前那篇文章中的例子为演示，也就是实现一键处理网页中的链接，并让它们默认在新的标签页中打开。【如果你没有看过之前的那篇文章，可以花个两分钟看看】

2. 原理

原理与开头提到的那篇文章中说的一样，就是利用浏览器的地址栏可以运行如下结构的 JavaScript 代码的特性：

javascript: (alert(0))();

因为，往书签的URL中填入上面这种结构的代码可以运行，那么如果可以让 Vimium C 来执行打开一个网页的操作，并将网页的URL设置为JavaScript代码，那是不是也可以运行呢？

于是就有了这篇文章。

3. 具体步骤

首先要知道，我们编写后的代码是填入 Vimium C 这个插件的配置页面中，也就是下图所示的位置：
在这里插入图片描述

具体就是：写好要实现的功能代码，然后将它压缩成一行，因为如果不压缩代码的话，直接粘贴到 Vimium C 的配置页面的输入框中，是会有很多报错的，因为这个输入框中，一行就是一个 Vimium C 的功能，所以，我们编写的 JavaScript 代码不能占据多行。然后就是实现功能的关键点了，使用 Vimium C 的 openUrl 函数，来打开一个网址，而这个网址的值是通过 url=“” 这样的形式传递给 openUrl 这个函数的，也就是说，我们压缩后的代码需要写在这个双引号的里面，这也说明了，我们的功能代码中不能用双引号，只能用单引号。当然，同样也不能有注释，因为代码都被压缩成一行了，注释的存在会将后续的所有代码全部注释掉的。

3.1. 编写功能

这里的代码，就是从开头提到的那篇文章中复制来的，实现的功能就是给当前网页的所有链接设置一个属性值，让其可以默认在新的标签页中打开：

javascript: (function () {
  var links = document.getElementsByTagName("a");
  for (var i = 0; i <= links.length; i++) {
    if (links[i]) {
      links[i].setAttribute("target", "_blank");
    }
  }
  var toast = document.createElement("div");
  toast.style.color = "white";
  toast.style.fontSize = "36px";
  toast.style.fontWeight = "bold";
  toast.style.lineHeight = "50px";
  toast.style.padding = "5px 10px";
  toast.style.backgroundColor = "darkslategrey";
  toast.style.border = "none";
  toast.style.borderRadius = "10px";
  toast.style.position = "fixed";
  toast.style.top = "80px";
  toast.style.right = "80px";
  toast.style.zIndex = "9999";
  toast.style.transition = "1s";
  toast.textContent = "链接可以在新标签中打开了";
  document.body.appendChild(toast);
  setTimeout(() => {
    toast.style.opacity = "0";
    setTimeout(() => {
      document.body.removeChild(toast);
    }, 500);
  }, 1500);
})();

3.2. 压缩代码

我尝试过多个在线压缩 JavaScript 代码的网站，最终还是觉得这个比较好用：JS 压缩/解压工具 | 菜鸟工具

只需要将我们编写的代码经过这个网站压缩一下，然后复制出来，并传递给 Vimium C 的 openUrl 这个函数即可。

3.3. 按键映射

使用 Vimium C 的 map 命令将按键 a 映射为执行 openUrl 函数，然后给这个函数传递一个 url 的参数，参数的内容就是我们压缩后的代码。

我这里选的是字母 a 作为这个功能的触发键，你可以选择你自己的，其实我的 Vimium C 的大部分功能都被我自定义了，恰好在做这个功能的时候，字母 a 没有分配功能，且字母 a 刚好与 a 标签对应，所以就选择了它。

实现这个功能的完整代码【经过压缩后的】如下：

map a openUrl url="javascript:(function(){var\u0020links=document.getElementsByTagName('a');for(var\u0020i=0;i<=links.length;i++){if(links[i]){links[i].setAttribute('target','_blank')}}var\u0020toast=document.createElement('div');toast.style.color='white';toast.style.fontSize='36px';toast.style.fontWeight='bold';toast.style.lineHeight='50px';toast.style.padding='5px\u002010px';toast.style.backgroundColor='darkslategrey';toast.style.border='none';toast.style.borderRadius='10px';toast.style.position='fixed';toast.style.top='80px';toast.style.right='80px';toast.style.zIndex='9999';toast.style.transition='1s';toast.textContent='链接可以在新标签中打开了';document.body.appendChild(toast);setTimeout(()=>{toast.style.opacity='0';setTimeout(()=>{document.body.removeChild(toast)},500)},1500)})();"