Unintentionally reloading a Chrome extension, particularly those in developer mode, can create orphaned content scripts. These scripts remain running in the background but lose communication with the rest of the extension, resulting in errors such as "extension context invalidated" and "unchecked runtime.lastError".
The orphaned content script can still receive DOM messages. To remove it:
1. Send Message from New Content Script:
2. Unregister Listeners in Orphaned Script:
3. Background Script:
4. Content Script:
5. Popup Script:
Example Code:
background.js:
<code class="javascript">// Re-inject content script chrome.runtime.onInstalled.addListener(() => { chrome.tabs.query({ active: true, currentWindow: true }, tabs => { chrome.tabs.executeScript(tabs[0].id, { file: 'content.js' }); }); });</code>
content.js:
<code class="javascript">// Orphaned script detection and cleanup var orphanMessageId = chrome.runtime.id + 'orphanCheck'; window.dispatchEvent(new Event(orphanMessageId)); window.addEventListener(orphanMessageId, unregisterOrphan); // Register named listeners chrome.runtime.onMessage.addListener(onMessage); document.addEventListener('mousemove', onMouseMove); // Orphan flag and cleanup function window.running = true; function unregisterOrphan() { if (chrome.runtime.id) { // Not orphaned return; } window.removeEventListener(orphanMessageId, unregisterOrphan); document.removeEventListener('mousemove', onMouseMove); try { chrome.runtime.onMessage.removeListener(onMessage); } catch (e) {} return true; }</code>
popup.js:
<code class="javascript">async function sendMessage(data) { const [tab] = await chrome.tabs.query({ active: true, currentWindow: true }); if (await ensureContentScript(tab.id)) { return await chrome.tabs.sendMessage(tab.id, data); } } async function ensureContentScript(tabId) { try { const [{ result }] = await chrome.scripting.executeScript({ target: { tabId }, func: () => window.running === true, }); if (!result) { await chrome.scripting.executeScript({ target: { tabId }, files: ['content.js'], }); } return true; } catch (e) {} }</code>
The above is the detailed content of How to Fix \'Extension Context Invalidated\' Errors Caused by Orphaned Content Scripts in Chrome Extensions?. For more information, please follow other related articles on the PHP Chinese website!