├── .DS_Store
├── LICENSE
├── README.md
├── code
    ├── .DS_Store
    ├── background.js
    ├── icon.png
    ├── manifest.json
    ├── sidepanel.html
    └── sidepanel.js
└── tutorial-images
    └── demo.gif


/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/runwayml/chrome-extension-tutorial/ec83ea406924058da847cb55b2c70614304ebd1a/.DS_Store


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 | 
3 | Copyright 2024 Runway
4 | 
5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
6 | 
7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
8 | 
9 | THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <img src="tutorial-images/demo.gif" alt="demo.gif" style="max-width: 600px;">
 2 | 
 3 | # Runway Generate Video Chrome Extension
 4 | 
 5 | This Chrome extension connects to the Gen-4 Video API, allowing you to generate a video from any image on a webpage.
 6 | 
 7 | ## Installation
 8 | 
 9 | 1.  **Clone the repository:**
10 |     ```bash
11 |     git clone https://github.com/runwayml/chrome-extension-tutorial
12 |     ```
13 | 2.  **Open Chrome Extensions:**
14 |     Open Google Chrome and navigate to `chrome://extensions`.
15 | 3.  **Enable Developer Mode:**
16 |     In the top right corner of the Extensions page, toggle the **Developer mode** switch to the **on** position.
17 | 4.  **Load Unpacked Extension:**
18 |     Click the **Load unpacked** button that appears.
19 |     Navigate to the directory where you cloned the repository and select the `code` folder.
20 | 
21 | The extension will now be installed and visible in your Chrome extensions list.
22 | 
23 | ## Obtaining a Runway API Key
24 | 
25 | To use the video generation features, you will need a [Runway API account](https://dev.runwayml.com/), key, and credits. Set this up by following the [Runway API Quickstart](https://docs.dev.runwayml.com/guides/using-the-api/) guide.
26 | 
27 | ## Learn More
28 | 
29 | - [Runway API Documentation](https://docs.dev.runwayml.com/)
30 | 


--------------------------------------------------------------------------------
/code/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/runwayml/chrome-extension-tutorial/ec83ea406924058da847cb55b2c70614304ebd1a/code/.DS_Store


--------------------------------------------------------------------------------
/code/background.js:
--------------------------------------------------------------------------------
 1 | chrome.runtime.onInstalled.addListener(() => {
 2 |   chrome.contextMenus.create({
 3 |     id: "generateVideo",
 4 |     title: "Generate video with Runway",
 5 |     contexts: ["image"]
 6 |   });
 7 | });
 8 | 
 9 | chrome.contextMenus.onClicked.addListener((info, tab) => {
10 |   if (info.menuItemId === "generateVideo") {
11 |     chrome.sidePanel.open({ windowId: tab.windowId });
12 |     setTimeout(() => {
13 |       chrome.runtime.sendMessage({ action: "generateVideo", imageUrl: info.srcUrl });
14 |     }, 1000);
15 |   }
16 | });
17 | 
18 | chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
19 |   if (message.action === "startVideoGeneration") {
20 |     startVideoGeneration(message.imageUrl, message.apiKey, message.ratio, message.prompt)
21 |       .then(taskId => sendResponse({ success: true, taskId }))
22 |       .catch(error => sendResponse({ success: false, error: error.message }));
23 |     return true;
24 |   } else if (message.action === "pollForCompletion") {
25 |     pollForCompletion(message.taskId, message.apiKey)
26 |       .then(videoUrl => sendResponse({ success: true, videoUrl }))
27 |       .catch(error => sendResponse({ success: false, error: error.message }));
28 |     return true;
29 |   }
30 | });
31 | 
32 | async function startVideoGeneration(imageUrl, apiKey, ratio, prompt) {
33 |   const response = await fetch(
34 |     "https://api.dev.runwayml.com/v1/image_to_video",
35 |     {
36 |       method: "POST",
37 |       headers: {
38 |         Authorization: `Bearer ${apiKey}`,
39 |         "X-Runway-Version": "2024-11-06",
40 |         "Content-Type": "application/json",
41 |       },
42 |       body: JSON.stringify({
43 |         promptImage: imageUrl,
44 |         seed: Math.floor(Math.random() * 1000000000),
45 |         model: "gen4_turbo",
46 |         promptText: prompt,
47 |         duration: 5,
48 |         ratio,
49 |       }),
50 |     }
51 |   );
52 | 
53 |   const result = await response.json();
54 |   if (!response.ok) {
55 |     throw new Error(result.message || 'Failed to start video generation');
56 |   }
57 |   return result.id;
58 | }
59 | 
60 | async function pollForCompletion(taskId, apiKey) {
61 |   const response = await fetch(`https://api.dev.runwayml.com/v1/tasks/${taskId}`, {
62 |     headers: {
63 |       "Authorization": `Bearer ${apiKey}`,
64 |       "X-Runway-Version": "2024-11-06",
65 |     },
66 |   });
67 | 
68 |   const result = await response.json();
69 |   if (!response.ok) {
70 |     throw new Error(result.message || 'Failed to check task status');
71 |   }
72 | 
73 |   if (result.status === 'SUCCEEDED') {
74 |     return result.output[0];
75 |   } else if (result.status === 'FAILED') {
76 |     throw new Error('Video generation failed');
77 |   } else {
78 |     throw new Error('still_processing');
79 |   }
80 | }
81 | 


--------------------------------------------------------------------------------
/code/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/runwayml/chrome-extension-tutorial/ec83ea406924058da847cb55b2c70614304ebd1a/code/icon.png


--------------------------------------------------------------------------------
/code/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "manifest_version": 3,
 3 |   "name": "Runway Video Generator",
 4 |   "version": "1.0",
 5 |   "description": "Generate videos from images using Runway API",
 6 |   "permissions": [
 7 |     "contextMenus",
 8 |     "storage",
 9 |     "sidePanel",
10 |     "activeTab"
11 |   ],
12 |   "host_permissions": [
13 |     "https://api.dev.runwayml.com/*"
14 |   ],
15 |   "background": {
16 |     "service_worker": "background.js"
17 |   },
18 |   "action": {
19 |     "default_title": "Open Runway Video Generator"
20 |   },
21 |   "side_panel": {
22 |     "default_path": "sidepanel.html"
23 |   },
24 |   "icons": {
25 |     "16": "icon.png",
26 |     "48": "icon.png",
27 |     "128": "icon.png"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/code/sidepanel.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <title>Runway Video Generator</title>
  5 |     <link rel="preconnect" href="https://fonts.googleapis.com" />
  6 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  7 |     <link
  8 |       href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,500;1,9..40,500&display=swap"
  9 |       rel="stylesheet"
 10 |     />
 11 |     <style>
 12 |       body {
 13 |         font-family: "DM Sans", sans-serif;
 14 |         font-optical-sizing: auto;
 15 |         font-weight: 500;
 16 |         font-style: normal;
 17 |         padding: 20px;
 18 |         color: #0c0c0c;
 19 |         font-size: 16px;
 20 |         line-height: 1.5;
 21 |       }
 22 |       #videoContainer {
 23 |         margin-top: 20px;
 24 |         position: relative;
 25 |       }
 26 |       .remove-button {
 27 |         position: absolute;
 28 |         top: 10px;
 29 |         right: 10px;
 30 |         background-color: #fff;
 31 |         width: 36px;
 32 |         height: 36px;
 33 |         cursor: pointer;
 34 |         display: flex;
 35 |         align-items: center;
 36 |         justify-content: center;
 37 |         border: none;
 38 |         opacity: 0;
 39 |       }
 40 |       .remove-button:hover {
 41 |         background-color: rgba(255, 255, 255, 0.5);
 42 |       }
 43 |       .remove-button svg {
 44 |         fill: #0c0c0c;
 45 |         pointer-events: none; /* prevent svg from capturing click events */
 46 |       }
 47 |       .video-wrapper {
 48 |         position: relative;
 49 |         margin-bottom: 20px;
 50 |         align-items: flex-end;
 51 |         display: flex;
 52 |         flex-direction: column;
 53 |       }
 54 |       .video-wrapper:hover .remove-button {
 55 |         opacity: 1;
 56 |       }
 57 |       video {
 58 |         max-width: 100%;
 59 |       }
 60 |       #apiKeyForm {
 61 |         margin-bottom: 20px;
 62 |       }
 63 |       #apiKey {
 64 |         width: 250px;
 65 |       }
 66 |       .image-container {
 67 |         position: relative;
 68 |         display: flex;
 69 |         flex-direction: column;
 70 |         align-items: center;
 71 |         justify-content: center;
 72 |         gap: 0;
 73 |         margin-bottom: 8px;
 74 |       }
 75 |       .loader {
 76 |         position: absolute;
 77 |         top: 0;
 78 |         left: 0;
 79 |         width: 100%;
 80 |         height: 100%;
 81 |         background-color: rgba(0, 0, 0, 0.5);
 82 |         display: flex;
 83 |         align-items: center;
 84 |         justify-content: center;
 85 |       }
 86 |       .remove-video:hover {
 87 |         background-color: rgba(255, 0, 0, 1);
 88 |       }
 89 |       .cta-btn {
 90 |         background-color: #333;
 91 |         color: white;
 92 |         border: none;
 93 |         padding: 8px 16px;
 94 |         border-radius: 4px;
 95 |         cursor: pointer;
 96 |         font-size: 14px;
 97 |         width: 100%;
 98 |       }
 99 | 
100 |       .cta-btn:hover {
101 |         background-color: #555;
102 |       }
103 | 
104 |       .cta-btn:disabled {
105 |         cursor: not-allowed;
106 |         opacity: 0.7;
107 |         box-shadow: none;
108 |       }
109 | 
110 |       .cta-btn:disabled:hover {
111 |         background-color: #cccccc;
112 |       }
113 | 
114 |       input[type="text"],
115 |       input[type="password"] {
116 |         border: 1px solid #0c0c0c;
117 |         border-radius: 4px;
118 |         padding: 8px;
119 |         width: 100%;
120 |         margin-bottom: 8px;
121 |         box-sizing: border-box;
122 |         font-size: 16px;
123 |         line-height: 1.5;
124 |       }
125 |     </style>
126 |   </head>
127 |   <body>
128 |     <div id="apiKeyForm" style="display: none">
129 |       <label for="apiKey">Enter your Runway API Key:</label>
130 |       <input type="password" id="apiKey" required />
131 |       <button id="saveApiKey" class="cta-btn">Save</button>
132 |     </div>
133 |     <div id="promptForm" style="display: none; margin-bottom: 16px">
134 |       <img
135 |         id="selectedImagePreview"
136 |         src=""
137 |         alt="Selected"
138 |         style="
139 |           display: none;
140 |           max-width: 250px;
141 |           max-height: 180px;
142 |           margin-bottom: 8px;
143 |           border-radius: 8px;
144 |           box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
145 |         "
146 |       />
147 |       <label for="promptInput">Prompt:</label>
148 |       <input
149 |         type="text"
150 |         id="promptInput"
151 |         placeholder="Describe the animation..."
152 |       />
153 |       <button id="generateButton" class="cta-btn">Generate</button>
154 |     </div>
155 |     <div id="status">
156 |       Right click on an image and select "Generate video with Runway" to
157 |       generate a video.
158 |     </div>
159 |     <div id="videoContainer"></div>
160 |     <script src="sidepanel.js"></script>
161 |   </body>
162 | </html>
163 | 


--------------------------------------------------------------------------------
/code/sidepanel.js:
--------------------------------------------------------------------------------
  1 | let apiKey = ''; // NEVER store api keys in source code. This is why we use the storage API and prompt the user to enter their API key in the side panel.
  2 | let selectedImageUrl = null;
  3 | 
  4 | const allowedRatios = [
  5 |   { width: 1280, height: 720 },
  6 |   { width: 720, height: 1280 },
  7 |   { width: 1104, height: 832 },
  8 |   { width: 832, height: 1104 },
  9 |   { width: 960, height: 960 },
 10 |   { width: 1584, height: 672 },
 11 | ];
 12 | 
 13 | function findClosestRatio(width, height) {
 14 |   const inputRatio = width / height;
 15 |   let closest = allowedRatios[0];
 16 |   let minDiff = Math.abs(inputRatio - (closest.width / closest.height));
 17 |   for (const ratio of allowedRatios) {
 18 |     const ratioValue = ratio.width / ratio.height;
 19 |     const diff = Math.abs(inputRatio - ratioValue);
 20 |     if (diff < minDiff) {
 21 |       minDiff = diff;
 22 |       closest = ratio;
 23 |     }
 24 |   }
 25 |   return `${closest.width}:${closest.height}`;
 26 | }
 27 | 
 28 | function getImageDimensions(imageUrl) {
 29 |   return new Promise((resolve, reject) => {
 30 |     const img = new Image();
 31 |     img.onload = function() {
 32 |       resolve({ width: img.naturalWidth, height: img.naturalHeight });
 33 |     };
 34 |     img.onerror = reject;
 35 |     img.src = imageUrl;
 36 |   });
 37 | }
 38 | 
 39 | function showApiKeyForm() {
 40 |   document.getElementById('apiKeyForm').style.display = 'block';
 41 |   document.getElementById('status').textContent = 'Please enter your Runway API Key to continue.';
 42 | }
 43 | 
 44 | function hideApiKeyForm() {
 45 |   document.getElementById('apiKeyForm').style.display = 'none';
 46 | }
 47 | 
 48 | document.getElementById('saveApiKey').addEventListener('click', () => {
 49 |   const inputApiKey = document.getElementById('apiKey').value.trim();
 50 |   if (inputApiKey) {
 51 |     chrome.storage.local.set({ apiKey: inputApiKey }, () => {
 52 |       apiKey = inputApiKey;
 53 |       hideApiKeyForm();
 54 |       document.getElementById('status').textContent = 'API Key saved. You can now generate videos.';
 55 |     });
 56 |   }
 57 | });
 58 | 
 59 | // Check for stored API key
 60 | chrome.storage.local.get("apiKey", (result) => {
 61 |   if (result.apiKey) {
 62 |     apiKey = result.apiKey;
 63 |     hideApiKeyForm();
 64 |   } else {
 65 |     showApiKeyForm();
 66 |   }
 67 | });
 68 | 
 69 | chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
 70 |   if (message.action === "generateVideo") {
 71 |     if (apiKey) {
 72 |       selectedImageUrl = message.imageUrl;
 73 |       document.getElementById('promptForm').style.display = 'block';
 74 |       document.getElementById('promptInput').value = '';
 75 |       document.getElementById('status').textContent = 'Enter a prompt and click Generate.';
 76 |       // Show the selected image
 77 |       const imgPreview = document.getElementById('selectedImagePreview');
 78 |       imgPreview.src = selectedImageUrl;
 79 |       imgPreview.style.display = 'block';
 80 |     } else {
 81 |       showApiKeyForm();
 82 |     }
 83 |   }
 84 | });
 85 | 
 86 | // Add event listener for Generate button
 87 | const generateButton = document.getElementById('generateButton');
 88 | generateButton.addEventListener('click', async () => {
 89 |   const prompt = document.getElementById('promptInput').value.trim();
 90 |   if (!selectedImageUrl || !prompt) {
 91 |     document.getElementById('status').textContent = 'Please select an image and enter a prompt.';
 92 |     return;
 93 |   }
 94 |   document.getElementById('promptForm').style.display = 'none';
 95 |   // Hide the image preview after starting generation
 96 |   document.getElementById('selectedImagePreview').style.display = 'none';
 97 |   await generateVideo(selectedImageUrl, prompt);
 98 |   selectedImageUrl = null;
 99 | });
100 | 
101 | function createImageAndLoader(imageUrl) {
102 |   const container = document.createElement('div');
103 |   container.className = 'image-container';
104 | 
105 |   const imageContainer = document.createElement('div');
106 |   imageContainer.className = 'image-container';
107 | 
108 |   const loader = document.createElement('div');
109 |   loader.className = 'loader';
110 | 
111 |   const loaderText = document.createElement('div');
112 |   loaderText.textContent = 'Generating video...';
113 | 
114 |   const newImage = document.createElement('img');
115 |   newImage.src = imageUrl;
116 |   newImage.style.width = '100%';
117 |   newImage.style.height = 'auto';
118 | 
119 |   imageContainer.appendChild(loader);
120 |   imageContainer.appendChild(newImage);
121 |   container.appendChild(imageContainer);
122 |   container.appendChild(loaderText);
123 |   return container;
124 | }
125 | 
126 | async function generateVideo(imageUrl, prompt) {
127 |   if (!apiKey) {
128 |     showApiKeyForm();
129 |     return;
130 |   }
131 | 
132 |   const statusElement = document.getElementById('status');
133 |   statusElement.textContent = '';
134 |   const newImage = createImageAndLoader(imageUrl);
135 |   document.getElementById('videoContainer').insertBefore(newImage, document.getElementById('videoContainer').firstChild);
136 | 
137 |   try {
138 |     // Get image dimensions and closest ratio
139 |     const { width, height } = await getImageDimensions(imageUrl);
140 |     const closestRatio = findClosestRatio(width, height);
141 | 
142 |     // Pass closestRatio and prompt to startVideoGeneration
143 |     const taskId = await startVideoGeneration(imageUrl, closestRatio, prompt);
144 |     newImage.id = `image-${taskId}`;
145 | 
146 |     const videoUrl = await pollForCompletion(taskId);
147 |     document.getElementById(`image-${taskId}`).remove();
148 |     renderVideo(videoUrl);
149 |     saveVideoData(imageUrl, videoUrl);
150 |   } catch (error) {
151 |     newImage.remove();
152 |     statusElement.textContent = `Error: ${error.message}`;
153 |   }
154 | }
155 | 
156 | async function startVideoGeneration(imageUrl, ratio, prompt) {
157 |   return new Promise((resolve, reject) => {
158 |     chrome.runtime.sendMessage({ action: "startVideoGeneration", imageUrl, apiKey, ratio, prompt }, (response) => {
159 |       if (response.success) {
160 |         resolve(response.taskId);
161 |       } else {
162 |         reject(new Error(response.error));
163 |       }
164 |     });
165 |   });
166 | }
167 | 
168 | async function pollForCompletion(taskId) {
169 |   const statusElement = document.getElementById('status');
170 |   
171 |   while (true) {
172 |     try {
173 |       const videoUrl = await new Promise((resolve, reject) => {
174 |         chrome.runtime.sendMessage({ action: "pollForCompletion", taskId, apiKey }, (response) => {
175 |           if (response.success) {
176 |             resolve(response.videoUrl);
177 |           } else if (response.error === 'still_processing') {
178 |             reject(new Error('still_processing'));
179 |           } else {
180 |             reject(new Error(response.error));
181 |           }
182 |         });
183 |       });
184 | 
185 |       return videoUrl;
186 |     } catch (error) {
187 |       if (error.message === 'still_processing') {
188 |         statusElement.textContent = '';
189 |         await new Promise(resolve => setTimeout(resolve, 2000));
190 |       } else {
191 |         throw error;
192 |       }
193 |     }
194 |   }
195 | }
196 | 
197 | function renderVideo(videoUrl) {
198 |   const statusElement = document.getElementById('status');
199 |   statusElement.textContent = '';
200 | 
201 |   const videoContainer = document.getElementById('videoContainer');
202 |   const videoWrapper = document.createElement('div');
203 |   videoWrapper.className = 'video-wrapper';
204 |   videoWrapper.innerHTML = `
205 |     <video controls autoplay muted loop src="${videoUrl}"></video>
206 |   `;
207 |   videoContainer.insertBefore(videoWrapper, videoContainer.firstChild);
208 |   const removeButton = document.createElement('button');
209 |   removeButton.className = 'remove-button';
210 |   removeButton.setAttribute('data-url', videoUrl);
211 |   removeButton.innerHTML = `<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
212 | <path d="M17.97 17.26L10.19 9.49L17.97 1.71L17.26 1L9.49 8.78L1.71 1L1 1.71L8.78 9.49L1 17.26L1.71 17.97L9.49 10.19L17.26 17.97L17.97 17.26Z" fill="#0C0C0C"/>
213 | </svg>
214 | `;
215 |   videoWrapper.appendChild(removeButton);
216 | 
217 |   // Add event listener to the new remove button
218 |   videoWrapper.querySelector('.remove-button').addEventListener('click', removeVideo);
219 | }
220 | 
221 | function saveVideoData(imageUrl, videoUrl) {
222 |   chrome.storage.local.get('generatedVideos', (result) => {
223 |     const videos = result.generatedVideos || [];
224 |     videos.push({ imageUrl, videoUrl, timestamp: Date.now() });
225 |     chrome.storage.local.set({ generatedVideos: videos });
226 |   });
227 | }
228 | 
229 | function removeVideo(event) {
230 |   const videoUrl = event.target.getAttribute('data-url');
231 |   const videoWrapper = event.target.closest('.video-wrapper');
232 | 
233 |   chrome.storage.local.get('generatedVideos', (result) => {
234 |     let videos = result.generatedVideos || [];
235 |     videos = videos.filter(video => video.videoUrl !== videoUrl);
236 |     chrome.storage.local.set({ generatedVideos: videos }, () => {
237 |       videoWrapper.remove();
238 |     });
239 |   });
240 | }
241 | 
242 | // Load previously generated videos
243 | function loadSavedVideos() {
244 |   chrome.storage.local.get('generatedVideos', (result) => {
245 |     const videos = result.generatedVideos || [];
246 |     const videoContainer = document.getElementById('videoContainer');
247 |     videoContainer.innerHTML = ''; // Clear existing videos
248 | 
249 |     videos.reverse().forEach(video => {
250 |       renderVideo(video.videoUrl);
251 |     });
252 |   });
253 | }
254 | loadSavedVideos()


--------------------------------------------------------------------------------
/tutorial-images/demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/runwayml/chrome-extension-tutorial/ec83ea406924058da847cb55b2c70614304ebd1a/tutorial-images/demo.gif


--------------------------------------------------------------------------------