Chrome in your nvim

We all know you can embed neovim in your browser, but can you do it the other way around? Surprisingly, answer is YES :smile:

https://user-images.githubusercontent.com/41148612/192169781-7a260436-723c-4542-a62e-c6e847883529.mp4

Instalation

Before next step, you will need plenary.nvim already installed, so building step would work.

Using packer.nvim:

use {'dimchee/prochrome.nvim', run = 'bash install.sh' }

Using lazy.nvim:

  { 'dimchee/prochrome.nvim', build = 'bash install.sh'}

You don't need to add build step to lazy

Don't forget to install chrome or chromium!!!

Usage

Live Server

You can run any live server, when your chrome starts:

vim.api.nvim_create_autocmd('FileType', {
  pattern = { 'html', 'css', 'js', 'ts' },
  callback = function()
    vim.keymap.set('n', '<F5>', function()
      -- live-server is automaticaly refreshing on change
      require('prochrome').open {
        is_app = true,
        on_start = { 'live-server', '--no-browser' },
        url = 'http://localhost:8080',
      }
    end, { silent = true, desc = 'Start live-server' })
  end,
})

For example, I have my favourite live server tool configured like this

vim.api.nvim_create_autocmd('FileType', {
  pattern = 'elm',
  callback = function()
    vim.keymap.set('n', '<F5>', function()
      require('prochrome').open {
        is_app = true,
        on_start = { 'elm-live', 'src/Main.elm', '--', '--debug' },
        url = 'http://localhost:8000',
      }
    end, { silent = true, desc = 'Start elm-live' })
  end,
})

If you prefer compiling (or writing) to plain html files, we got you covered too:

-- Setting everything up for running
vim.keymap.set('n', '<F5>', function()
  require('prochrome').open {
    is_app = true,
    on_refresh = {'pandoc', 'Readme.md', '-o', 'Readme.html'},
    url = 'file://' .. vim.fn.getcwd() .. '/Readme.html' 
  }
end, { silent = true, desc = 'Start or refresh pandoc live server' })

Preview Github Markdown

It is as simple using Github CLI and this extension. If you already have gh installed, you just need to run

gh extension install yusukebe/gh-markdown-preview

Add binding to your lua config, and you are done:

vim.api.nvim_create_autocmd('BufEnter', {
  pattern = 'Readme.md',
  callback = function()
    vim.keymap.set('n', '<F5>', function()
      require('prochrome').open {
        is_app = true,
        on_start = { 'gh', 'markdown-preview', '--disable-auto-open' },
        url = 'http://localhost:3333',
      }
    end, { silent = true, desc = 'Start github markdown preview' })
  end,
})

View live Documentation

It is convenient to use documentation directly from your editor, but browser looks better. Why not mix them?

Path = require 'plenary.path'
-- Simple regex magic for finding rust project name
local function get_rust_project_name()
  local file, text = io.open('Cargo.toml', 'rb')
  if file then
    text = file:read '*a'
    file:close()
  end
  local _, _, name = text:find '%[package%][^%[]*name%s*=%s*"(.-)"'
  return name
end
vim.api.nvim_create_autocmd('FileType', {
  pattern = 'rust',
  callback = function()
    vim.keymap.set('n', '<F5>', function()
      require('prochrome').open {
        is_app = true,
        on_start = { 'cargo', 'doc' },
        url = 'file://' .. Path:new('./target/doc/')
          :joinpath(get_rust_project_name())
          :joinpath('/index.html')
          :expand(),
      }
    end, { silent = true, desc = 'Start doc browser' })
  end,
})

Look web through telescope

For telescope integration, you will need to load prochrome telescope extension

require('telescope').load_extension'prochrome'

Change tab from telescope

Now you can, for example, change tab in your browser from inside of nvim

:Telescope prochrome focus_tab<CR>

Implement google search + telescope

Features

Open new chrome instance in app mode
Refresh current page
Change page (navigate to a page)
Find Dom Element

Future Plans

Maybe it is good idea to implement everything in pure lua, but that would mean we need some kind of websocket library (maybe we could write one). There is nice implementation here, but i couldn't make it to work in this context.

dimchee / prochrome.nvim

readme