I have a chrome extension which was built on v2
version. I’m using background
script to initialise my app. Then in popup.js
I’m using runtime.getBackgroundPages()
to get the instance from background page and perform some operation.
background.js
class Client {
constructor() {
this.settings = { env: "qa" };
}
init() {
<iframe
id="inlineFrameExample"
title="Inline Frame Example"
width="300"
height="200"
src="src"
></iframe>;
}
}
class App {
constructor() {
this.app = new Client();
}
render() {}
}
window.app = new App();
the reason for keeping app is that it acts as single source of truth. All session
data, settings etc are stored here. Other part of the extension like popup.js
use this instance to read
and update
values.
popup.js
class Popup{
constructor(){
this.app = chrome.runtime.getBackgroundPage(); // this is not working
this.app.init();
}
// remianing logic
}
Now since in v3
, the background script has been removed and service worker
should be used. Service worker doesn’t have access to dom
, document
, window
objects.
Hence I’m facing difficulties in migrating. I tried storing the app
instance in chrome
storage. But due to serialization, the methods are getting removed from the value.
here is how I’m trying in mv3 :
// workaround 1 . (background.js)
const app = new App();
chrome.storage.local.set({ instance: app }).then(() => {
console.log("Value is set to " , app);
});
// in popup.js trying to read
chrome.storage.local.get(["instance"]).then((result) => {
console.log("Value currently is ", result);
result.instance.init(); // init method doesn't exists
});
Really confused how should I redesign it ?
Any help will be highly appreciated.