浏览器扩展修改网站的 javascript

Question

我想制作一个简单的浏览器扩展来执行以下操作：

用 jkl 替换 hjkl vim 键；在编译器资源管理器的 vim 模式下。

我发现我可以打开开发工具，在某处放置一个断点here然后 将以下代码粘贴到控制台中

monacoVim.VimMode.Vim.noremap(';', 'l');
monacoVim.VimMode.Vim.noremap('l', 'k');
monacoVim.VimMode.Vim.noremap('k', 'j');
monacoVim.VimMode.Vim.noremap('j', 'h');
monacoVim.VimMode.Vim.noremap('h', ';');

这达到了预期的效果，但是我不想有任何手动步骤。所以我想写一个扩展来达到同样的效果。

除了编译器资源管理器之外，我需要该方法适用于 hackerrank 等闭源网站，因此致力于开源并不适用于我的情况。

我怎样才能编写一个扩展来按照我描述的方式修改站点的js？或者还有其他方法可以达到想要的效果吗？

Answer 1

webRequest API 可以动态更改响应主体。编译器资源管理器本身会被编译成一个实现，因此您必须调整下面的示例代码才能使其工作。下面我会解释一下。

manifest.json

{
  "manifest_version": 2,
  "name": "HackCE",
  "description": "Hack Compiler Explorer",
  "version": "0.1",
  "content_security_policy": "default-src 'none'; object-src 'none'; script-src 'self';",
  "browser_specific_settings": {
    "gecko": {
      "id": "[email protected]",
      "strict_min_version": "57.0"
    }
  },
  "background": {
    "scripts": [
      "background.js"
    ]
  },
  "permissions": [
    "webRequest",
    "webRequestBlocking",
    "<all_urls>"
  ]
}

背景.js

( function () {
  'use strict';

  // look for
  //     enableVim(): void {
  // replace it with
  //     enableVim(): void {
  //         monacoVim.VimMode.Vim.noremap(';', 'l');
  //         monacoVim.VimMode.Vim.noremap('l', 'k');
  //         monacoVim.VimMode.Vim.noremap('k', 'j');
  //         monacoVim.VimMode.Vim.noremap('j', 'h');
  //         monacoVim.VimMode.Vim.noremap('h', ';');
  function onBR( e ) {
    var
      stream = browser.webRequest.filterResponseData( e.requestId ),
      dec = new TextDecoder( 'UTF-8' ),
      data = [];

    stream.ondata = function ( e ) {
      data.push( dec.decode( e.data, { stream: true } ) );
    };
    stream.onstop = function () {
      var
        s = data.join( '' ),
        enc = new TextEncoder(),
        textFind = 'enableVim(): void {',
        textAdd = '\n' +
          '        monacoVim.VimMode.Vim.noremap(\';\', \'l\');\n' +
          '        monacoVim.VimMode.Vim.noremap(\'l\', \'k\');\n' +
          '        monacoVim.VimMode.Vim.noremap(\'k\', \'j\');\n' +
          '        monacoVim.VimMode.Vim.noremap(\'j\', \'h\');\n' +
          '        monacoVim.VimMode.Vim.noremap(\'h\', \';\');';

      s = s.replace( textFind, '$&' + textAdd );
      stream.write( enc.encode( s ) );
      stream.close();
    };
    return {};
  }

  browser.webRequest.onBeforeRequest.addListener(
    onBR, {
      types: [ 'main_frame' ],
      urls: [ 'https://raw.githubusercontent.com/compiler-explorer/*/editor.ts' ]
    }, [
      'blocking'
    ]
  );
} () );

此示例展示了如何将您想要的行添加到 github 上的原始列表中。

1. 安装扩展（作为临时附加组件）。
2. 转到问题中包含的链接。它看起来应该没有变化。
3. 单击

   Raw

   按钮。搜索/滚动到

   enableVim(): void

   。看起来应该不一样。

HTTP 数据是字节流（无符号 8 位 int）。流可以被分成块。当块到达时收集它们，将它们解码为 UTF-8 字符串。在末尾将单独的字符串连接成一个字符串。根据需要编辑数据。将重新编码的数据写入请求它的客户端。关闭流。

background.js

中的过滤器调整需要使其完全正常工作：

1. 将

   types

   从

   'main_frame'

   更改为

   'script'

   （假设脚本不是内联的，但很可能不是）。
2. 将

   urls

   更改为实际网站上的实际内容。
3. 更改（根据需要）查找和添加字符串，因为实时网站可能不会像 github 上那样提供脚本。

在 hackerrank 上为我美言几句。