Chrome-extension boilerplate

1

Is there an example of how to package stimulus turbo boilerplate in a chrome-extension with webpack ?

2

I’m not aware of any

3

I’m on a team that is developing a browser extension using Turbo. The feedback loop is much quicker, and almost all of the code is easily testable.

  1. Download a copy of turbo.es2017-umd.js and put it in js folder of the browser-extension

  2. In the browser extension popup.html.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="turbo-root" content="http://localhost:3000"> <!-- Important for POSTs to work -->
  <script src="../js/turbo.es2017-umd.js"></script>
  <script src="../js/popup.js"></script>
  <link rel="stylesheet" href="../css/popup.css">
  <title>Browser Extension</title>
</head>
<body>
<turbo-frame id="content" src="http://localhost:3000/browser_extension" data-turbo="true">
  loading....
</turbo-frame>
  </body>
</html>
  1. Rails view that responds to /browser_extension, with layout: false
<%= turbo_frame_tag :content do %>
 Hello from Rails.
<% end %>

Currently every response from Rails for the browser extension returns html wrapped in a turbo-frame with id of ‘content’, but it’s early days yet for us and this might change.

1 Like