Skip to content

Instantly share code, notes, and snippets.

@MiroslavCsonka
Created January 27, 2025 23:04
Show Gist options
  • Save MiroslavCsonka/5b99cf35fa39659fcf27c176130bb7aa to your computer and use it in GitHub Desktop.
Save MiroslavCsonka/5b99cf35fa39659fcf27c176130bb7aa to your computer and use it in GitHub Desktop.
Integrating Turbo into a Chrome extension
turbo:load # initial extension load
turbo:before-visit
turbo:before-fetch-request
turbo:visit # sends current URL to the server
turbo:before-fetch-response
turbo:before-cache
turbo:visit # server redirects to the appropriate url (based on the url)
turbo:load
<!doctype html>
<html>
<head>
<title>Cosmos Extension</title>
<meta name="turbo-root" content="${env.HOST}" /> // https://turbo.hotwired.dev/handbook/drive#setting-a-root-location
<script src="turbo-umd.js"></script>
</head>
<body>
<script src="popup.js"></script>
</body>
</html>
chrome.tabs.query({ active: true, currentWindow: true }, async function (tabs) {
const url = tabs[0].url;
const encodedUrl = btoa(url);
const frameUrl = `${env.HOST}/browser-extension/show/${encodedUrl}`;
Turbo.visit(frameUrl, {
action: "replace",
updateHistory: false,
historyChanged: true,
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment