Really interested to know why, too! What's more, background s make extensions pr

Background scripts required? about webpack-extension-reloader HOT 2 OPEN

rubenspgcavalcante commented on June 1, 2024 2

Background scripts required?

from webpack-extension-reloader.

Comments (2)

nicooprat commented on June 1, 2024

Really interested to know why, too! What's more, background scripts make extensions pretty laggy in some cases: https://stackoverflow.com/questions/56500742/why-is-my-google-chrome-extensions-popup-ui-laggy-on-external-monitors-but-not

For reference, here's the section about this in this repo wiki: https://github.com/rubenspgcavalcante/webpack-extension-reloader/wiki/General-Information#wcer-e2

from webpack-extension-reloader.

vjpr commented on June 1, 2024

I bumped into same problem and was not actually notified that the background page was missing from manifest...because I didn't provide the optional manifest option.

@nicooprat Really interested to know why

The code that is running in the extension pages is actually really simple.

wer uses the following template that is injected into all files matching the entries option.

webpack-extension-reloader/src/middleware/wer-middleware.raw.ts

Lines 39 to 89 in 4f9aa5e

    
             // ========================== Called only on content scripts ============================== // 
        
             function contentScriptWorker() { 
        
               runtime.sendMessage({ type: SIGN_CONNECT }).then(msg => console.info(msg)); 
        
               runtime.onMessage.addListener(({ type, payload }: IAction) => { 
        
                 switch (type) { 
        
                   case SIGN_RELOAD: 
        
                     logger("Detected Changes. Reloading ..."); 
        
                     reloadPage && window.location.reload(); 
        
                     break; 
        
                   case SIGN_LOG: 
        
                     console.info(payload); 
        
                     break; 
        
                 } 
        
               }); 
        
             } 
        
             // ======================== Called only on background scripts ============================= // 
        
             function backgroundWorker(socket: WebSocket) { 
        
               runtime.onMessage.addListener((action: IAction, sender) => { 
        
                 if (action.type === SIGN_CONNECT) { 
        
                   return Promise.resolve(formatter("Connected to Extension Hot Reloader")); 
        
                 } 
        
                 return true; 
        
               }); 
        
               socket.addEventListener("message", ({ data }: MessageEvent) => { 
        
                 const { type, payload } = JSON.parse(data); 
        
                 if (type === SIGN_CHANGE && (!payload || !payload.onlyPageChanged)) { 
        
                   tabs.query({ status: "complete" }).then(loadedTabs => { 
        
                     loadedTabs.forEach( 
        
                       tab => tab.id && tabs.sendMessage(tab.id, { type: SIGN_RELOAD }), 
        
                     ); 
        
                     socket.send( 
        
                       JSON.stringify({ 
        
                         type: SIGN_RELOADED, 
        
                         payload: formatter( 
        
                           `${timeFormatter(new Date())} - ${ 
        
                             manifest.name 
        
                           } successfully reloaded`, 
        
                         ), 
        
                       }), 
        
                     ); 
        
                     runtime.reload(); 
        
                   }); 
        
                 } else { 
        
                   runtime.sendMessage({ type, payload }); 
        
                 } 
        
               });

You can see that the background script connects to WebSocket instance, and the content scripts and extension pages connect to the background script.

This makes sense as there is only one websocket connection to manage, and the background script takes care of reloading any tabs that have changed content scripts running in them.

from webpack-extension-reloader.

Background scripts required? about webpack-extension-reloader HOT 2 OPEN

Comments (2)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

	// ========================== Called only on content scripts ============================== //
	function contentScriptWorker() {
	runtime.sendMessage({ type: SIGN_CONNECT }).then(msg => console.info(msg));

	runtime.onMessage.addListener(({ type, payload }: IAction) => {
	switch (type) {
	case SIGN_RELOAD:
	logger("Detected Changes. Reloading ...");
	reloadPage && window.location.reload();
	break;

	case SIGN_LOG:
	console.info(payload);
	break;
	}
	});
	}

	// ======================== Called only on background scripts ============================= //
	function backgroundWorker(socket: WebSocket) {
	runtime.onMessage.addListener((action: IAction, sender) => {
	if (action.type === SIGN_CONNECT) {
	return Promise.resolve(formatter("Connected to Extension Hot Reloader"));
	}
	return true;
	});

	socket.addEventListener("message", ({ data }: MessageEvent) => {
	const { type, payload } = JSON.parse(data);

	if (type === SIGN_CHANGE && (!payload \|\| !payload.onlyPageChanged)) {
	tabs.query({ status: "complete" }).then(loadedTabs => {
	loadedTabs.forEach(
	tab => tab.id && tabs.sendMessage(tab.id, { type: SIGN_RELOAD }),
	);
	socket.send(
	JSON.stringify({
	type: SIGN_RELOADED,
	payload: formatter(
	`${timeFormatter(new Date())} - ${
	manifest.name
	} successfully reloaded`,
	),
	}),
	);
	runtime.reload();
	});
	} else {
	runtime.sendMessage({ type, payload });
	}
	});